MVC Ajax Helpers
在MVC中要实现Ajax有很多的方式，有微软自己的MicrosoftAjax，也可以用JQuery的AJax来实现，如果对其他的JavaScript框架熟悉，还可以采用其他的实现方案，比如说Prototype等等。
以下是微软自己的实现方案。
需要预先加载的JavaScript文件：
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
MVC3.0需要引用 <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
不然没有Ajax效果
在MVC中已经提供了下面几个现成的HTML Hepler：
- Ajax.ActionLink()
- Ajax.BeginForm()
- Ajax.RouteLink()
- Ajax.BeginRouteForm()
Ajax.ActionLink
使用ActionLink发送异步请求的方法：
View
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> </div> @Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })
Controller
public ActionResult GetTime() { return Content(DateTime.Now.ToString()); }
以上示例使用ActionLink超链接发送请求到GetTime，返回一个ContentResult，通过AjaxOptions中的UpdateTargetId属性指定了需要更新的页面元素。
AjaxOptions中还有其他可以指定的属性：
| Confirm | 等效于javascript中的return confirm(msg)，在点击该链接时先提示需要确认的信息。 |
| HttpMethod | 指定使用Get或者是Post方式发送Http请求 |
| InsertMode | 指定使用哪一种方式在指定的UpdateTargetId元素更新数据，可以有三种方式： "InsertAfter", "InsertBefore", or "Replace" 。默认为：Replace |
| LoadingElementDuration | Loading元素显示的时间 |
| LoadingElementId | 可以指定在Http请求期间显示的Loading元素 |
| OnBegin | 在Http请求之前执行的javascript方法 |
| OnComplete | 在Http请求结束时执行的方法 |
| OnFailure | 在Http请求失败时执行的方法 |
| OnSuccess | 在Http请求成功时执行的方法 |
| UpdateTargetId | Http请求更新的页面元素 |
| Url | Http请求的Url |
关于AjaxOptions中各方法的使用方法，在之前关于ActionResult的介绍的文章中有相关的列子：
注意点
- OnComplete和OnSuccess的区别：OnComplete是获取了Http请求时引发的，此时页面还没有进行更新，OnSuccess是在页面已经更新后引发的。
- ActionLink中的actionName和AjaxOption中的Url的关系：两者分别产生的HTML如下，但是执行的结果相同，希望有高手能解释下这两者有无区别。
<a href="/Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
<a href="/" data-ajax-url="Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>
Ajax.BeginForm
该Html Hepler可以实现使用Ajax方式提交Form，在指定的页面元素中显示提交的结果。
View
@model MvcAjax.Models.UserModel @{ ViewBag.Title = "AjaxForm"; } <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> </div> @using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" })) { <table> <tr> <td> @Html.LabelFor(m => m.UserName) </td> <td> @Html.TextBoxFor(m => m.UserName) </td> </tr> <tr> <td> @Html.LabelFor(m => m.Email) </td> <td> @Html.TextBoxFor(m => m.Email) </td> </tr> <tr> <td> @Html.LabelFor(m => m.Desc) </td> <td> @Html.TextBoxFor(m => m.Desc) </td> </tr> <tr> <td colspan="2"> <input type="submit" value="Submit" /> </td> </tr> </table> }
Model
using System.ComponentModel.DataAnnotations; namespace MvcAjax.Models { public class UserModel { [Display(Name = "Username")] public string UserName { get; set; } [Display(Name = "Email")] public string Email { get; set; } [Display(Name = "Description")] public string Desc { get; set; } } }
Controller
public ActionResult AjaxForm() { return View(); } [HttpPost] public ActionResult SaveUser(UserModel userModel) { //Save User Code Here //...... return Content("Save Complete!"); }
以上示例代码实现了采用Ajax提交Form数据的大概方法，在Ajax.BeginForm中同样使用AjaxOptions来设置Ajax请求的参数，和Ajax.ActionLink中的使用方法相同。
其他：
在介绍JavaScriptResult时曾经提到了该ActionResult在普通的请求中是直接当作文件Reponse出的，但是在Ajax请求中，便可以使用该Result，并且执行Result中的JavaScript。
比如将上面的Conntroller更改为以下代码：
[HttpPost] public ActionResult SaveUser(UserModel userModel) { //Save User Code Here //...... //return Content("Save Complete!"); return JavaScript("alert('Save Complete!');"); }
便可在执行改Ajax请求之后执行JavaScriptResult中的语句。