你的位置:首页 > ASP.net教程

[ASP.net教程]第21章 URL和Ajax辅助器方法

一、创建基本的链接和URL

  视图最基本的任务之一是创建链接或URL,使用户能够随之进入应用程序的其他部分。

  辅助器生成的链接或URL的好处是:输出来自路由配置,当路由发生改变全自动反映在链接和URL中。

  渲染URL的HTML辅助器

描述示例输出
相对于应用程序的URLUrl.Content("~/Content/Site.css")/Content/Site.css
链接到指定的动作控制器Html.ActionLink("My Link", "Index", "Home")<a href="http://www.cnblogs.com//">My Link</a>
动作URLUrl.Action("GetPeople","People")/People/GetPeople
使用路由数据的URLUrl.RouteUrl(new {controller = "People", action = "GetPeople"})/People/GetPeople
使用路由数据的链接Html.RouteLink("My Link",new{controller="People",action="GetPeople"})<a href="http://www.cnblogs.com//People/GetPeople">My Link</a>
链接到指定的路由Html.RouteLink("My Link","FormRoute",new{controller="People",action="GetPeople"})<a href="http://www.cnblogs.com//app/forms/People/GetPeople">My Link</a>

二、MVC的渐进式Ajax

  异步JavaScript与 (最重要作用)后台请求服务器数据,而不必重载Web页面的一种模型。

  MVC框架的渐进式Ajax特性基于JQuery的。

    注:在真正的Internet连接上运行的实际应用程序,同步表单可能会让使用Web应用程序的用户很崩溃,会占用服务器的大量带宽和处理能力。

    第一步:在web.config中启用渐进式Ajax特性

      <appSettings>        <add key="webpages:Enabled" value="false" />        <add key="UnobtrusiveJavascriptEnable" value="true"/>      </appSettings>   第二步:模板页中头部引用JQuery库(min版本)和 jquery.unobtrusive-ajax库(min版本)
      <script src="~/Scripts/jquery-1.7.1.js"></script>
   <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
   第三步:修改初始请求方法,新增控制器中动作方法(用于ajax)和分部视图
 public ActionResult GetPeople(string selectedRole = "All")    {      return View((object)selectedRole);    }

@using HelperMethods.Models@model string@{  ViewBag.Title = "GetPeople";   AjaxOptions ajaxOpts = new AjaxOptions  {    UpdateTargetId = "tableBody"  };}<h2>Get People</h2><table>  <thead>  <tr>    <th>Name</th>    <th>Role</th>  </tr>  </thead>   <tbody id="tableBody">    @Html.Action("GetPeopleData",new{selectedRole=Model})  </tbody></table>@using (Ajax.BeginForm("GetPeopleData",ajaxOpts)){  <div>    @Html.DropDownList("selectedRole", new SelectList(    new[] { "All"}.Concat(Enum.GetNames(typeof(Role)))))    <button type="submit">查询</button>  </div>}

    public PartialViewResult GetPeopleData(string selectedRole = "All")    {      IEnumerable<Person> data = personData;      if (selectedRole != "All")      {        Role selected = (Role) Enum.Parse(typeof (Role), selectedRole);        data = personData.Where(p => p.Role == selected);      }      return PartialView(data);    }

@using HelperMethods.Models@model IEnumerable<Person>@foreach (Person p in Model){  <tr>    <td>@p.Name</td>    <td>@p.Role</td>  </tr>}

AjaxOptions属性

属性描述
Confirm在形成Ajax请求前,设置显示给用户的确认窗口信息
HttpMethod设置用来形成请求的HTTP方法(Get 或 Post)
InsertionMode指定从服务器接受的内容以何种方式插入到HTML。枚举:InsertAfter、InsertBefore、Replace(默认)
LoadingElementId指定HTML元素的ID,这是执行Ajax请求期间要显示的HTML元素
LoadingElementDuration指定动画的持续时间,用于显示由LoadingElementId指定的元素
UpdateTargetId设置HTML元素的ID,从服务器接收的内容将插入到该元素中
Url设置所请求的服务器端URL

AjaxOptions回调属性

属性JQuery事件描述
OnBiginbeforeSend在发送请求之前立即调用
OnCompletecomplete请求成功时调用
OnFailureerror请求失败时调用
OnSuccesssuccess请求已完成时调用,不管请求是否成功或失败

  

 Json源码:http://yunpan.cn/ccvvsjTacNvWc 访问密码 0d10