1. Unobtrusive JavaScript介紹 說到Unobtrusive Ajax,就要談談UnobtrusiveJavaScript了,所謂Unobtrusive JavaScript即為非侵入式JavaScript(即將Js代碼與html代碼分離,方便閱讀與維護),是目前在Web開發領 ...
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 原理剖析