Asp.Net MVC Unobtrusive Ajax

1.   Unobtrusive JavaScript介紹

　　說到Unobtrusive Ajax，就要談談UnobtrusiveJavaScript了，所謂Unobtrusive JavaScript即為非侵入式JavaScript（即將Js代碼與html代碼分離，方便閱讀與維護），是目前在Web開發領域推行的一種思想。

2.   在ASP.NET MVC中的應用

2.1 概述

         使用VS新建一個ASP.NET MVC項目就會在~/Scripts/目錄下麵看到很多以unobtrusive結尾的javascript腳本文件，如：

　　今天的主角是ASP.NET MVC Unobtrusive Ajax，那麼大家應該可以猜到主要還是jquery.unobtrusive-ajax.js和jquery.unobtrusive-ajax.min.js這兩個文件。這就是ASP.NETMVC實現非侵入式Ajax的主要手段，若要在項目中使用Unobtrusive Ajax，那麼一定要用到這兩個文件中的一個，至於具體用哪個就不多廢話了。下麵來看看Unobtrusive Ajax在ASP.NET MVC中的使用。

         ASP.NET MVC對BeginForm的使用提供了11個重載的版本，但是細細觀察11個重載版本就會發現，這些重載中共同點是有一個AjaxOptions類型的參數，除此之外Ajax輔助方法的BeginForm和Html輔助方法的BeginForm相同參數版本之間並無差別，而這個AjaxOptions就是ASP.NET MVC實現Ajax方法依據。

　　  AjaxOptions的主要屬性有：

         上表中對參數進行了分組和著色以示區分其在BeginForm中的作用：

• Url和HttpMethod算是Ajax請求的基礎了，指示了Ajax請求的Url路徑及所採用的Http方法；
• UpdateTargetId和InsertionMode是對請求成功後回顯的設置，正如上例所示的那樣；
• OnBegin、OnComplete、OnFailure以及OnSuccess四個屬性則是對Ajax請求過程JavaScript回調的設置，是具體的JavaScript語句或者是一個JavaScript函數；
• Confirm則是在發起Ajax請求前頁面進行確認的消息，頁面通過window.confirm顯示確認信息；
• LoadingElementDuration和LoadingElementId這兩個則屬於錦上添花的東西了，用於在請求過程中顯示頁面動態請求情況，比如一個‘Loading…’的文字或者一個顯示進度的圖片。

         設置說明：

• Url:預設為form的action，上面提到的jquery.unobtrusive-ajax.js兩段代碼中對其進行了設置，如果有設置data-ajax-url屬性，則取data-ajax-url屬性作為ajax請求的url，否則取<form>的action屬性（如果是鏈接的話，則取的是<a>的href屬性）。
• HttpMethod：預設值為GET，這部分的設置和AjaxOptions.Url是相似的，對於Form來說優先順序依次為data-ajax-method屬性，form.action，"GET"，對於Link來說就是"GET"。
• UpdateTargetId：原則上應是需要更新的html元素的id（MVC的Aajx輔助方法會自動在生成的data-ajax-update屬性前面插入字元'#'，參看前面Ajax.BeginForm生成的Html代碼），但是細細查看代碼，你會發現此處可為多個html元素，只要第一個不加#，之後的依次加上即可，如UpdateTargetId ="div1,#div2, #div3"，可實現多個div同時更新，甚至於後面的可以是任何jQuery支持的css selector。

2.2 示例

　　為了便於觀察測試效果，在新建的MVC項目的HomeController中增加如下Action：

        public ActionResult Index()
        {
            return View();
        }

 
        public string s(string q)
        {
            return "The Query String is : " + q;
        }

　　其中Action ‘Index’用於顯示Ajax操作頁面，Action ‘s’用來響應Ajax請求結果。Index頁面的主要內容如下：

 1 @using (Ajax.BeginForm(
 2     new AjaxOptions
 3     {
 4         Url = "Home/s",
 5         HttpMethod = "GET",
 6         UpdateTargetId = "searchResult",
 7         InsertionMode = InsertionMode.Replace
 8     }))
 9 {
10     <input type="text" name="q" />
11     <input type="submit" value="查詢" />
12 } 
13 
14 <div id="searchResult"></div>

　　其作用就是生成一個表單，提交這個表單的時候執行非同步的Ajax請求，並將請求結果回顯到id為searchResult的div元素內。運行如下：

參考資料：

ASP.NET MVC Unobtrusive Ajax 原理剖析