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(
2new AjaxOptions
3{
4Url = "Home/s",
5HttpMethod = "GET",
6UpdateTargetId = "searchResult",
7InsertionMode = 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元素內。執行如下：
參考資料：