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 原理剖析