ASP.NET MVC使用Ajax的輔助的解決方案

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前言：前面我們已經簡單的介紹過了MVC如何Jquery，因為我們如果使用Ajax的話必須要瞭解Jquery，這篇部落格我們將大致瞭解一下ASP.NET MVC如何使用Ajax的輔助方法，此部落格是我的讀書筆記，如果那裡寫的不好，還請各位朋友提出來，我們共同學習。
1．準備工作
　　(1)在MVC剛開始學習的時候，我們就需要介紹ASP.NET MVC架構中的HTML的輔助方法，但是這類文章現在已經很多了，而且個人感覺很簡單，所以沒有寫筆記，我在這裡就不介紹了。
　　(2)ASP.NET MVC架構中的HTML輔助方法，我們可以使用HTML輔助方法建立表單和指向控制器操作的連結，在ASP.NET MVC架構中還包含一組Ajax輔助方法，它們也可以用來建立表單和指向控制器操作的串連，但不同的是它們是非同步進行的，當使用這些輔助方法時，不用編寫任何指令碼代碼來實現程式的非同步性。
　　(3)在後台，這些Ajax輔助方法依賴非侵入式MVC的Jquery擴充，如果使用這些輔助方法，就需要引入指令檔jquery.unobtrusive-ajax.js，至於怎麼引用我在上篇部落格已經說過了，這裡就不貼出代碼了。
2.Ajax的ActionLink方法
　　(1)在Razor視圖中，AJAX輔助方法可以通過Ajax屬性訪問，和HTML輔助方法類似，Ajax屬性上的大部分Ajax輔助方法都是擴充方法(除了AjaxHelper類型之外)。
　　(2)Ajax屬性的ActionLink方法可以建立一個具有非同步行為的錨標籤。現在我們可以在微軟發布的MVC3.0的MusicStore項目上面進行修改，誰如果沒有這個項目的話可以加地下的群，然後再群共用裡面我共用了這個項目。在視圖”Views/Home/Index.cshtml”中添加下面的代碼。

複製代碼代碼如下:<div id="dailydeal">
　　　　@Ajax.ActionLink("點擊我", "DailyDeal", new AjaxOptions
　　　　{
　　　　　　UpdateTargetId="dailydeal",
　　　　　　InsertionMode = InsertionMode.Replace,
　　　　　　HttpMethod="Get"
　　　　})
</div>

　　(3)ActionLink方法的第一個參數指定了串連文本，第二個參數是要非同步呼叫的操作的名稱，類似於同名的HTML輔助方法。對於HTML輔助方法和Ajax輔助方法，顯著不同的是AjaxOptions參數，該參數指定了發送請求和處理伺服器返回結果的方法，參數中還包括用來處理錯誤，顯示載入元素，顯示確認對話方塊等的選項。為了得到伺服器的響應，需要在控制器HomeController上添加一個DailyDeal操作，代碼如下：

複製代碼代碼如下:　public ActionResult DailyDeal()
　　{
　　　　var album = GetDailyDeal();
　　　　return PartialView("_DailyDeal", album);
　　}
　　private Album GetDailyDeal()
　　{
　　　　return storeDB.Albums.OrderBy(a => a.Price).First();
　　}

　(4)Ajax操作串連的目標操作的傳回值是純文字或HTML。下面的Razor代碼就在項目的Views/Home檔案夾下的_DailyDeal.cshtml檔案中。

　註解：Ajax.ActionLink產生的內容能夠獲得伺服器的響應，並可以直接將新內容移植到頁面中，這時為什麼呢？下面我們就介紹一下非同步作業串連的工作原理。
3.HTML5特性
　　(1)如果我們查看ActionLink方法渲染的標記，我們會看到如下代碼：
　　　　<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#dailydeal" href="/Home/DailyDeal">點擊我</a>
　　(2)非侵入式JavaScript的顯著特點就是在HTML中不包含任何JavaScript代碼，也就是說在HTML中看不到指令碼代碼，如果仔細看的話就會發現ActionLink中指定的所有設定被編碼成了HTML元素的特性，並且這些編碼的大多數特性都有data-首碼，通常稱之為data-特性。
　　(3)HTML 5規範為私人應用程式保留了data-特性，換句話說，web瀏覽器不會嘗試解釋data-特性的內容，因此可以放心的把自己的資料交給它，這些資料不會影響頁面的顯示或者渲染。
　　(4)嚮應用程式中添加jquery.unobtrusive-ajax檔案的目的是尋找特定的data-特性，然後操縱元素使其表現出不同的行為。
　　(5)所有的ASP.NET MVC AJAX特性都使用data-特性。
4.Ajax表單
　　(1)下面我們實現另外一種情形，要在音樂市集的首頁為使用者添加一個尋找藝術家的功能，因為需要使用者的輸入，所以必須在頁面上面放一個form標籤，但這不是一個普通的標籤，而是一個非同步表單。下面這段代碼我們看一下：

複製代碼代碼如下:@using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions
　　{
　　　　InsertionMode = InsertionMode.Replace,
　　　　HttpMethod = "GET",
　　　　OnFailure = "searchFailed",
　　　　LoadingElementId = "ajax-loader",
　　　　UpdateTargetId = "searchresults",
　　}))
　　{
　　　　<input type="text" name="q" />
　　　　<input type="submit" value="Search" />
　　　　<img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
　　}

　　(2)再要渲染的表單中，當使用者單擊提交按鈕時，瀏覽器就會向控制器HomeController的ArtistSearch操作發送非同步GET請求，注意上面的代碼已經指定了LoadingElementId作為其中的一個選項，當執行非同步請求時，用戶端架構會自動的顯示這個元素，通常情況下，在這個元素內部會出現一個具有動畫效果的微調框，來告知使用者後台進行中一些處理，此外，還有一個OnFailure選項，這些選項包括許多參數，可以設定它們以捕獲來自Ajax請求的各種用戶端事件，如OnBegin，OnComplete，OnSuccess和OnFailure等，可以給這些參數賦予一個JavaScript函數的名稱，當事件觸發時，調用該函數，上面的代碼就為OnFailure指定了一個JavaScript函數，代碼如下：
　　<script type="text/javascript">
　　　　function searchFailed() {
　　　　　　$("#searchresults").html("對不起，查詢有問題");
　　　　}
　　</script>
　　(3)如果伺服器代碼返回一個錯誤，就意味著AJAX輔助方法都執行失敗了，此時，你可能想捕獲OnFailure事件，如果使用者單擊”search”按鈕而頁面沒有反應，我們可能就會感到困惑，跟前面代碼所做的一樣，可以顯示一個錯誤提示資訊，至少讓他們知道我們已經儘力了。
　　(4)輔助方法BeginForm的輸出類似於輔助方法ActionLink，最後，當使用者單擊提交按鈕提交表單的時候，伺服器會接受到一個Ajax請求，並可能以任意格式的內容作出響應，當用戶端收到來自伺服器端的響應時，非侵入式指令碼就會將相應的內容放入Dom中。
　　(5)對於這個例子，控制器操作需要查詢資料庫並且渲染一個分部視圖，此外，操作還要返回純文字，但同時又想把藝術家放到一個列表中，因此，在HomeControler中寫入如下的方法代碼：複製代碼代碼如下:　public ActionResult ArtistSearch(string q)
　　{
　　　　var artists = GetArtists(q);
　　　　return PartialView(artists);
　　}

　　private List<Artist> GetArtists(string q)
　　{
　　　　return storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();
　　}

　　(6)該分部視圖利用模型構建列表，它位於項目的Views/Home檔案夾下的視圖ArtistSearch.cshtml。

複製代碼代碼如下:@model IEnumerable<MvcMusicStore.Models.Artist>
　　@{
　　　　Layout = null;
　　}
　　<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　<title>ArtistSearch</title>
　　　　</head>
　　　　<body>
　　　　　　<div id="searchresults">
　　　　　　　　<ul>
　　　　　　　　　　@foreach (var item in Model)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　<li>@item.Name</li>
　　　　　　　　　　　　}
　　　　　　　　</ul>
　　　　　　</div>
　　　　</body>
　　</html>

5.web.config檔案裡的AJAX設定
　　(1)預設情況下，非侵入式JavaScript和用戶端驗證在ASP.NET MVC應用程式中是啟用的，然後，我們可以通過web.config檔案中的設定改變這些行為，如果開啟新應用程式根目錄下的web.config檔案，就會看到下面的appSettings配置節點：
　　<appSettings>
　　　　<add key="webpages:Version" value="1.0.0.0"/>
　　　　<add key="ClientValidationEnabled" value="true"/>
　　　　<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
　　</appSettings>
　　(2)如果想在整個應用程式中禁用這兩個特性中的任意特性，只需要將響應特性的value值修改為false即可，另外，還可以逐視圖是的控制這些設定，HTML輔助方法EnableClientValidation和EnableUnobtrusiveJavaScript在一個具體視圖中重寫了這些配置設定。
　　(3)由於現有的自訂指令碼都是依賴與Microsoft AJAX庫而不是Jquery庫，因此禁用這些特性的主要原因是維護應用程式的向後相容性。

　　註：下篇MVC的部落格我們將把注意力轉向ASP.NET MVC架構的另外一個內建AJAX特性-對用戶端驗證的支援。
作者：韓迎龍
出處：http://www.cnblogs.com/hanyinglong

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More