一起談.NET技術，巨大轉變！ASP.NET MVC2調用AJAX新特征

　　在ASP.NET MVC程式設計中使用AJAX功能是非常簡單的。借助于JQuery架構，你還可以增加其他的優秀特征并且使AJAX調用特别簡單。本文中，我們将探讨這方面的程式設計内容。

　　一、檢測一個AJAX請求

　　在Web表單中，建立AJAX請求典型的方法是使用一個更新面闆。當更新面闆回寄時，ScriptManager提供一個方法(通過其isInAsyncPostBack屬性)來檢測伺服器上的AJAX回寄。ASP.NET MVC也提供了類似的機制。因為AJAX能夠調用行為方法，是以我們需要一種方法來檢測一個請求是否是标準的GET/POST操作，還是一個AJAX請求。

　　我們可以使用一個有用的擴充方法來實作上述檢測，這隻需調用Request.IsAjaxRequest()方法即可。我們知道，一個Web請求是一個針對HttpRequestBase(針對.NET架構HttpRequest對象的一個包裝器)的引用，它也是一個控制器的屬性。故而，我們可以使用IsAjaxRequest()方法來檢查請求資訊，以確定正在向伺服器發出一個AJAX請求。通過這種方式，我們可以正确地檢測出目前請求是一個ASP.NET請求還是一個jQuery請求。

　　要實作上述這一點，隻需要在你的行為方法中添加下面的代碼。

　　清單1—檢測一個AJAX請求 

if (Request.IsAjaxRequest())

//AJAX request

else

//Standard request

　　為什麼檢測一個AJAX請求如此重要呢?因為根據行為方法所實作的任務我們處理AJAX請求的方式不同于标準的請求。我們很快會看到這樣的例子。

　　二、使用Ajax表單

　　微軟提供了一組AJAX擴充集，其中之一便是Ajax表單。通過此Ajax表單，可以向伺服器發出異步請求并提供相關的響應内容。用戶端所有的AJAX調用機制都包含在一個MicrosoftMVCAjax腳本内。清單2給出了一個簡單的Ajax表單示例。

　　清單2：使用AJAX.BeginForm擴充  

<div id="customresponse"></div>

<% using (Ajax.BeginForm("AjaxCustom", new AjaxOptions

{ UpdateTargetId = "customresponse" })){%>

<div>

Name: <%= Html.TextBox("CustomName")%>

</div>

Value: <%= Html.TextBox("CustomValue")%>

<input type="submit" value="save" />

<%}%>

　　上述AJAX表單處理回寄的細節，并使用JavaScript以異步方式執行，而不是執行一個到伺服器端的标準HTTP回寄。在清單2中，表單把資料回寄到AjaxCustom行為方法，并把表單的值傳遞過去，最後得到傳回的響應内容并以某種方式來使用這個結果。

　　接下來，在行為方法中你可以使用非常現成的Request.IsAjaxRequest方法：

　　清單3：處理可能的Ajax回寄并提供響應 

[HttpPost]

public ActionResult AjaxCustom(FormCollection post)

{

return Content("Success");

return RedirectToAction("Index");

}

　　如果是一個AJAX請求，則把一個特殊的字元串傳遞回用戶端，并進行相應處理。這一行為是受AjaxOptions集合控制的。上面的清單2中把字元串“Success”注入到一個id為“customresponse”的HTML元素中。如果由于某種原因，該請求不是來自一個AJAX調用，行為方法仍可以正常工作—重定向到另一個視圖中。我們将在以後的文章中讨論這些情況。

　　上面我隻是簡要地介紹了使用MS Ajax的情況，因為我相信最好的AJAX方案是當屬使用JQuery。

　　三、使用JQuery

　　jQuery功能非常強大，這種力量主要來自它的簡單性以及它能夠讓你完全控制整個過程。JQuery能夠通過簡單的幾行用戶端代碼就可以對一個MVC行為方法執行一個GET或POST操作。回調的結果直接傳遞給你手中，這意味着你可以全面控制響應操作，而且這一點是很容易做到的。在jQuery中，我們可以使用以下的形式把表單資料釋出到伺服器：

　　清單4：回寄表單資料 

var form = $("#form1");

$.post(form.attr("action"), form.serialize(), function(data){

//Do something with data

});

　　一個行為方法的響應可以是以下類型之一：

　　• Content("Success")—以一個字元串方式傳回内容，然後你可以把它注入到HTML文檔中。

　     • Json(new{ a = 1 })—傳回一個JSON對象。

　     • View("Action")—以HTML字元串方式傳回一個視圖或部分視圖。

　　上述這些選項都非常棒，因為jQuery能夠讓你從根本上進行資料控制，你可以使用這些資料來注入到使用者界面甚至完全取代UI内容。讓我們分析針對上述選擇的各個對應的例子。我構造了一個簡單的控制器，它能夠傳回上述每一種類型的内容。

　　清單5：傳回上述每一種類型的内容示例

public class JQueryController : Controller

public ActionResult GettingContent()

return Content("This is my content");

public ActionResult GettingJson()

return Json(new { key = 1,value = "First" }, JsonRequestBehavior.AllowGet);

public ActionResult GettingPartial()

return PartialView("TestPartial");

public ActionResult Index()

return View();

　　我們的用戶端會使用jQuery來使用上面定義的這些行為方法，每一個對應使用一個單獨的AJAX行為方法。在前面的JQuery調用中，執行了一個回寄，但我特意要求使用GET操作。一個GET和POST操作非常類似，除了POST傳遞的是一個序列值的集合之外。

　　清單6：正在加載新資料 

<script type="text/javascript">

$(document).ready(function(){

$.getJSON('<%= Url.Action("GettingJson")%>', function(obj){

$('#jsoninject').html(obj.key.toString()+" = "+ obj.value.toString());

$.get('<%= Url.Action("GettingContent")%>', function(obj){

$('#contentinject').html(obj);

$('#partialinject').load('<%= Url.Action("GettingPartial")%>');

</script>

　　這些方法中，get和load工作非常相似，它們都把内容直接加載到HTML元素中。其中，load方法能夠直接注入而不用回調，但get能夠使你更多地控制資料的處理。

　　在文檔完全加載後，上述代碼将産生以下HTML輸出内容。  

<H1>Injecting JSON Object</H1>

<DIV id=jsoninject>1 = First</DIV>

<H1>Injecting Content</H1>

<DIV id=contentinject>This is my content</DIV>

<H1>Injecting Partial</H1>

<DIV id=partialinject>

<DIV>This is my partial view. </DIV></DIV>

　　四、使用屬性控制請求

　　當向伺服器送出請求時，一切有關請求的内容都被檢查(頭部、正文，等等)。這是由AJAX請求決定的。根據你的應用程式的複雜程度，你可能想建立單獨的行為方法，一個針對處理AJAX請求，另一個針對其餘的請求。是以，一個索引視圖可能會對應一個AjaxIndex行為方法來處理Ajax請求，而另外存在一個Index行為方法來處理其餘的請求。為此，我們可以利用過濾器屬性來確定調用正确的行為方法。

　　下面給出的兩個類都使用了一個過濾器屬性，分别允許AJAX請求和标準的HTTP GET/POST請求。

　　清單7：使用AJAX/标準請求過濾屬性 

public class AjaxOnlyRequestAttribute : ActionMethodSelectorAttribute

#region " Methods "

public override bool IsValidForRequest(ControllerContext

controllerContext, MethodInfo methodInfo)

return controllerContext.HttpContext.Request.IsAjaxRequest();

#endregion

public class StandardOnlyRequestAttribute : ActionMethodSelectorAttribute

return !controllerContext.HttpContext.Request.IsAjaxRequest();

　　上面這些過濾器屬性屬于行為方法選擇器類型。這意味着，當MVC架構試圖比對一個到行為方法的請求時，它将執行如下過程：

　　1.嘗試查找一個名字為Index的行為方法。

　　2.是否查找完所有現有的規則?—是。

　　3.檢查過濾器—隻存在一個Ajax過濾器。

　　4.這是一個AJAX請求嗎?—不是。

　　5.忽略此行為方法。

　　如果在該過程結束時，不存在任何行為方法，則将從伺服器端傳回資源沒有發現的響應。

　　五、小結

　　在本文中，我們已經看到了MS AJAX和jQuery架構多種使用方法，而且了解到在MVC應用程式中使用AJAX支援是非常友善的。雖然這些功能也存在于Web表單架構下，但jQuery架構使你的MVC程式中實作AJAX調用更為容易。此外，自定義過濾器屬性可以幫助你确定每一個請求相應的行為方法，或者可以使用Request.IsAjaxRequest方法直接檢測請求類型。

【相關文章】: <a href="http://kb.cnblogs.com/page/73293/" target="_blank">巨大轉變！ASP.NET MVC2行為方法新改進</a> <a href="http://kb.cnblogs.com/page/72445/" target="_blank">巨大轉變！教你使用ASP.NET MVC2新功能</a> <a href="http://kb.cnblogs.com/page/72166/" target="_blank">巨大轉變！ASP.NET MVC2使用者界面新實踐</a>