一、创建基本的链接和URL
视图最基本的任务之一是创建链接或URL，使用户能够随之进入应用程序的其他部分。
辅助器生成的链接或URL的好处是：输出来自路由配置，当路由发生改变全自动反映在链接和URL中。
渲染URL的HTML辅助器
| 描述 | 示例 | 输出 |
| 相对于应用程序的URL | Url.Content("~/Content/Site.css") | /Content/Site.css |
| 链接到指定的动作控制器 | Html.ActionLink("My Link", "Index", "Home") | <a href="/">My Link</a> |
| 动作URL | Url.Action("GetPeople","People") | /People/GetPeople |
| 使用路由数据的URL |
Url.RouteUrl( new {controller = "People", action = "GetPeople"}) |
/People/GetPeople |
| 使用路由数据的链接 |
Html.RouteLink("My Link", new{controller="People",action="GetPeople"}) |
<a href="/People/GetPeople">My Link</a> |
| 链接到指定的路由 |
Html.RouteLink("My Link","FormRoute", new{controller="People",action="GetPeople"}) |
<a href="/app/forms/People/GetPeople">My Link</a> |
二、MVC的渐进式Ajax
异步JavaScript与XML: （最重要作用）后台请求服务器数据，而不必重载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）和分部视图
(通过一个子动作仅获取想要的数据，通过新的视图对相关标签内容进入填充)
（1.将视图进行分离，分为框架视图和分部视图，通过新的动作方法只请求分部视图的内容）
（2.通过Ajax对数据进入处理，请求新的动作方法获取数据）
（3.确认更新的父级标签（命名），设置AjaxOptions参数，使用Ajax.BiginForm替换Html.BeginForm）
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 |
1.确保在禁用JS的情况下正常工作，使用AjaxOption.Url属性，以便指定异步请求的目标Url作为Ajax.BeginForm方法参数，而不是以动作名称作为其参数。
2.在Ajax请求期间给用户提供反馈：设置LoadingElementId，LoadingElementDuration属性；添加(默认隐藏)反馈显示的区域。
LoadingElementId="loading",LoadingElementDuration=1000,
<div id="loading" class="load" style="display:none"></div>
三、创建Ajax链接（可降级）
<div>
@foreach(string role in Enum.GetNames(typeof(Role))){
<div class="ajaxLink">
@Ajax.ActionLink(role,"GetPeople",
new{selectRole=role},
new AjaxOptions{
UpdateTargetIde="tableBody",
Url=Url.Action("GetPeopleData",new{selectRole=role})
})
</div>
}
</div>
四、使用Ajax回调
通过调用JavaScript函数，在Ajax请求生命周期中的各个点上给予反馈。
AjaxOptions回调属性
| 属性 | JQuery事件 | 描述 |
| OnBigin | beforeSend | 在发送请求之前立即调用 |
| OnComplete | complete | 请求成功时调用 |
| OnFailure | error | 请求失败时调用 |
| OnSuccess | success | 请求已完成时调用，不管请求是否成功或失败 |
五、通过Ajax回调处理Json数据，更新相关模板。
1.对控制器添加Json支持
注：只有返回的数据不是私有（特殊敏感）的，才使用JsonRequestBehavior.AllowGet。
2.在浏览器中处理Json数据
使用AjaxOption类中的OnSuccess回调属性，指定一个JS函数，用于处理获得的Json数据。
优化Json数据：
1.为Json编码准备数据对象（新建匿名对象赋值）
2.在动作方法中检测Ajax请求，合并成一个动作方法通过判断，返回HTML或Json数据的请求。
源码：http://yunpan.cn/ccvvsjTacNvWc 访问密码 0d10