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的介紹的文章中有相關的列子：

JsonResult

注意點

• 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中的語句。