當(dāng)前位置：
我們?nèi)绻褂肁jax的話(huà)必須要了解Jquery，這篇我們將大致了解一下ASP.NET MVC如何使用Ajax的輔助方法。
1．準(zhǔn)備工作
(1)在MVC剛開(kāi)始學(xué)習(xí)的時(shí)候，我們就需要介紹ASP.NET MVC框架中的HTML的輔助方法，但是這類(lèi)文章現(xiàn)在已經(jīng)很多了，而且個(gè)人感覺(jué)很簡(jiǎn)單，所以沒(méi)有寫(xiě)筆記，我在這里就不介紹了。
(2)ASP.NET MVC框架中的HTML輔助方法，我們可以使用HTML輔助方法創(chuàng)建表單和指向控制器操作的鏈接，在ASP.NET MVC框架中還包含一組Ajax輔助方法，它們也可以用來(lái)創(chuàng)建表單和指向控制器操作的連接，但不同的是它們是異步進(jìn)行的，當(dāng)使用這些輔助方法時(shí)，不用編寫(xiě)任何腳本代碼來(lái)實(shí)現(xiàn)程序的異步性。
(3)在后臺(tái)，這些Ajax輔助方法依賴(lài)非侵入式MVC的Jquery擴(kuò)展，如果使用這些輔助方法，就需要引入腳本文件jquery.unobtrusive-ajax.js，至于怎么引用我在上篇博客已經(jīng)說(shuō)過(guò)了，這里就不貼出代碼了。
2.Ajax的ActionLink方法
(1)在Razor視圖中，AJAX輔助方法可以通過(guò)Ajax屬性訪(fǎng)問(wèn)，和HTML輔助方法類(lèi)似，Ajax屬性上的大部分Ajax輔助方法都是擴(kuò)展方法(除了AjaxHelper類(lèi)型之外)。
(2)Ajax屬性的ActionLink方法可以創(chuàng)建一個(gè)具有異步行為的錨標(biāo)簽。現(xiàn)在我們可以在微軟發(fā)布的MVC3.0的MusicStore項(xiàng)目上面進(jìn)行修改，誰(shuí)如果沒(méi)有這個(gè)項(xiàng)目的話(huà)可以加地下的群，然后再群共享里面我共享了這個(gè)項(xiàng)目。在視圖”Views/Home/Index.cshtml”中添加下面的代碼。
1 <div id="dailydeal">
2 @Ajax.ActionLink("點(diǎn)擊我", "DailyDeal", new AjaxOptions
3 {
4 UpdateTargetId="dailydeal",
5 InsertionMode = InsertionMode.Replace,
6 HttpMethod="Get"
7 })
8 </div>
(3)ActionLink方法的第一個(gè)參數(shù)指定了連接文本，第二個(gè)參數(shù)是要異步調(diào)用的操作的名稱(chēng)，類(lèi)似于同名的HTML輔助方法。對(duì)于HTML輔助方法和Ajax輔助方法，顯著不同的是AjaxOptions參數(shù)，該參數(shù)指定了發(fā)送請(qǐng)求和處理服務(wù)器返回結(jié)果的方法，參數(shù)中還包括用來(lái)處理錯(cuò)誤，顯示加載元素，顯示確認(rèn)對(duì)話(huà)框等的選項(xiàng)。為了得到服務(wù)器的響應(yīng)，需要在控制器HomeController上添加一個(gè)DailyDeal操作，代碼如下：
1 public ActionResult DailyDeal()
2 {
3 var album = GetDailyDeal();
4 return PartialView("_DailyDeal", album);
5 }
6 private Album GetDailyDeal()
7 {
8 return storeDB.Albums.OrderBy(a => a.Price).First();
9 }
(4)Ajax操作連接的目標(biāo)操作的返回值是純文本或HTML。下面的Razor代碼就在項(xiàng)目的Views/Home文件夾下的_DailyDeal.cshtml文件中。
注解：Ajax.ActionLink生成的內(nèi)容能夠獲得服務(wù)器的響應(yīng)，并可以直接將新內(nèi)容移植到頁(yè)面中，這時(shí)為什么呢？下面我們就介紹一下異步操作連接的工作原理。
3.HTML5特性
(1)如果我們查看ActionLink方法渲染的標(biāo)記，我們會(huì)看到如下代碼：
<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#dailydeal" href="/Home/DailyDeal">點(diǎn)擊我</a>
(2)非侵入式JavaScript的顯著特點(diǎn)就是在HTML中不包含任何JavaScript代碼，也就是說(shuō)在HTML中看不到腳本代碼，如果仔細(xì)看的話(huà)就會(huì)發(fā)現(xiàn)ActionLink中指定的所有設(shè)置被編碼成了HTML元素的特性，并且這些編碼的大多數(shù)特性都有data-前綴，通常稱(chēng)之為data-特性。
(3)HTML 5規(guī)范為私有應(yīng)用程序保留了data-特性，換句話(huà)說(shuō)，web瀏覽器不會(huì)嘗試解釋data-特性的內(nèi)容，因此可以放心的把自己的數(shù)據(jù)交給它，這些數(shù)據(jù)不會(huì)影響頁(yè)面的顯示或者渲染。
(4)向應(yīng)用程序中添加jquery.unobtrusive-ajax文件的目的是查找特定的data-特性，然后操縱元素使其表現(xiàn)出不同的行為。
(5)所有的ASP.NET MVC AJAX特性都使用data-特性。
4.Ajax表單
(1)下面我們實(shí)現(xiàn)另外一種情形，要在音樂(lè)商店的首頁(yè)為用戶(hù)添加一個(gè)查找藝術(shù)家的功能，因?yàn)樾枰脩?hù)的輸入，所以必須在頁(yè)面上面放一個(gè)form標(biāo)簽，但這不是一個(gè)普通的標(biāo)簽，而是一個(gè)異步表單。下面這段代碼我們看一下：
1 @using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions
2 {
3 InsertionMode = InsertionMode.Replace,
4 HttpMethod = "GET",
5 OnFailure = "searchFailed",
6 LoadingElementId = "ajax-loader",
7 UpdateTargetId = "searchresults",
8 }))
9 {
10 <input type="text" name="q" />
11 <input type="submit" value="Search" />
12 <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
13 }
(2)再要渲染的表單中，當(dāng)用戶(hù)單擊提交按鈕時(shí)，瀏覽器就會(huì)向控制器HomeController的ArtistSearch操作發(fā)送異步GET請(qǐng)求，注意上面的代碼已經(jīng)指定了LoadingElementId作為其中的一個(gè)選項(xiàng)，當(dāng)執(zhí)行異步請(qǐng)求時(shí)，客戶(hù)端框架會(huì)自動(dòng)的顯示這個(gè)元素，通常情況下，在這個(gè)元素內(nèi)部會(huì)出現(xiàn)一個(gè)具有動(dòng)畫(huà)效果的微調(diào)框，來(lái)告知用戶(hù)后臺(tái)正在進(jìn)行一些處理，此外，還有一個(gè)OnFailure選項(xiàng)，這些選項(xiàng)包括許多參數(shù)，可以設(shè)置它們以捕獲來(lái)自Ajax請(qǐng)求的各種客戶(hù)端事件，如OnBegin，OnComplete，OnSuccess和OnFailure等，可以給這些參數(shù)賦予一個(gè)JavaScript函數(shù)的名稱(chēng)，當(dāng)事件觸發(fā)時(shí)，調(diào)用該函數(shù)，上面的代碼就為OnFailure指定了一個(gè)JavaScript函數(shù)，代碼如下：
<script type="text/javascript">
function searchFailed() {
$("#searchresults").html("對(duì)不起，查詢(xún)有問(wèn)題");
}
</script>
(3)如果服務(wù)器代碼返回一個(gè)錯(cuò)誤，就意味著AJAX輔助方法都執(zhí)行失敗了，此時(shí)，你可能想捕獲OnFailure事件，如果用戶(hù)單擊”search”按鈕而頁(yè)面沒(méi)有反應(yīng)，我們可能就會(huì)感到困惑，跟前面代碼所做的一樣，可以顯示一個(gè)錯(cuò)誤提示信息，至少讓他們知道我們已經(jīng)盡力了。
(4)輔助方法BeginForm的輸出類(lèi)似于輔助方法ActionLink，后，當(dāng)用戶(hù)單擊提交按鈕提交表單的時(shí)候，服務(wù)器會(huì)接受到一個(gè)Ajax請(qǐng)求，并可能以任意格式的內(nèi)容作出響應(yīng)，當(dāng)客戶(hù)端收到來(lái)自服務(wù)器端的響應(yīng)時(shí)，非侵入式腳本就會(huì)將相應(yīng)的內(nèi)容放入Dom中。
(5)對(duì)于這個(gè)例子，控制器操作需要查詢(xún)數(shù)據(jù)庫(kù)并且渲染一個(gè)分部視圖，此外，操作還要返回純文本，但同時(shí)又想把藝術(shù)家放到一個(gè)列表中，因此，在HomeControler中寫(xiě)入如下的方法代碼：
1 public ActionResult ArtistSearch(string q)
2 {
3 var artists = GetArtists(q);
4 return PartialView(artists);
5 }
6
7 private List<Artist> GetArtists(string q)
8 {
9 return storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();
10 }
(6)該分部視圖利用模型構(gòu)建列表，它位于項(xiàng)目的Views/Home文件夾下的視圖ArtistSearch.cshtml。
1 @model IEnumerable<MvcMusicStore.Models.Artist>
2 @{
3 Layout = null;
4 }
5 <!DOCTYPE html>
6 <html>
7 <head>
8 <title>ArtistSearch</title>
9 </head>
10 <body>
11 <div id="searchresults">
12 <ul>
13 @foreach (var item in Model)
14 {
15 <li>@item.Name</li>
16 }
17 </ul>
18 </div>
19 </body>
20 </html>
5.web.config文件里的AJAX設(shè)置
(1)默認(rèn)情況下，非侵入式JavaScript和客戶(hù)端驗(yàn)證在ASP.NET MVC應(yīng)用程序中是啟用的，然后，我們可以通過(guò)web.config文件中的設(shè)置改變這些行為，如果打開(kāi)新應(yīng)用程序根目錄下的web.config文件，就會(huì)看到下面的appSettings配置節(jié)點(diǎn)：
<appSettings>
<add key="webpages:Version" value="1.0.0.0"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
(2)如果想在整個(gè)應(yīng)用程序中禁用這兩個(gè)特性中的任意特性，只需要將響應(yīng)特性的value值修改為false即可，另外，還可以逐視圖是的控制這些設(shè)置，HTML輔助方法EnableClientValidation和EnableUnobtrusiveJavaScript在一個(gè)具體視圖中重寫(xiě)了這些配置設(shè)置。
(3)由于現(xiàn)有的自定義腳本都是依賴(lài)與Microsoft AJAX庫(kù)而不是Jquery庫(kù)，因此禁用這些特性的主要原因是維護(hù)應(yīng)用程序的向后兼容性。
