服務(wù)器端的實(shí)現(xiàn)原理并不復(fù)雜，不過作為解決方案的另一個(gè)關(guān)鍵部分，如何在客戶端觸發(fā)一個(gè)AJAX提交也是一個(gè)值得思考的話題。 UpdatePanel的方式可謂“全自動”：頁面加載時(shí)將會把服務(wù)器端的Trigger信息輸出至客戶端，然后在客戶端截獲form的提交事件，并通過 UniqueID或DOM結(jié)構(gòu)等方式來判斷這次提交是否該轉(zhuǎn)化為AJAX方式。不過在一個(gè)ASP.NET MVC頁面中幾乎不會出現(xiàn)產(chǎn)生PostBack的元素，相反會有大量的普通鏈接，它們才是AJAX更新的主要截獲目標(biāo)。

為此我提供了一些JavaScript代碼，截獲一個(gè)鏈接原本的目標(biāo)地址并將其轉(zhuǎn)化為一個(gè)AJAX請求。我在這里通過示例中的代碼來展示這種使用方式（這個(gè)示例源于Brad Abrams提供的ASP.NET MVC示例，不過我舍棄了Northwind數(shù)據(jù)庫與Entity Framework，取而代之的是XML數(shù)據(jù)以及自定義的簡單Model。此外，我也將其移植到ASP.NET MVC框架的0416 Build中）：

＜%foreach(varcategoryinthis.ProductCategories)  
{%＞  
＜li＞  
＜%=Html.ActionLink＜ProductsController＞(  
c=＞c.List(category,1),  
category,  
new{onclick="mvcAjax.get(this,event)"})%＞  
＜/li＞＜%  
}%＞ 

這段代碼來自分類列表頁。與AJAX改進(jìn)之前的代碼相比，唯一的區(qū)別就是額外指定了元素的onclick事件（加粗部分）。在onclick事件執(zhí)行中，這個(gè)鏈接默認(rèn)的跳轉(zhuǎn)行為將被取消，取而代之的是一個(gè)AJAX請求，請求的目標(biāo)便是ProductsController中名為List的Action。

我們可以使用上面的方式應(yīng)對普通鏈接，那么又該如何將一個(gè)客戶端from的提交行為也變成AJAX操作呢？以下依舊是示例中的代碼：

＜formmethod="post" 
action="＜%=Url.Action("Update",new{id=this.Product.ProductID})%＞" 
onsubmit="mvcAjax.submit(this,event);"＞  
 
＜table＞  
＜tr＞  
＜td＞Name:＜/td＞  
＜td＞＜%=Html.TextBox("Name",this.Product.Name)%＞＜/td＞  
＜/tr＞  
...  
＜/table＞  
 
＜inputtype="submit"value="Save"/＞  
＜/form＞ 

在截獲了form的submit事件之后，客戶端將會收集該form中的所有input、select等值，組成一個(gè)請求的body，并且以HTTP POST的方式發(fā)出一個(gè)AJAX請求。余下的事情和之前就沒有什么區(qū)別了。

與UpdatePanel相比，MvcAjaxPanel的客戶端截獲方式可謂“純手工”，但是我并不認(rèn)為這會造成什么問題。ASP.NET MVC強(qiáng)調(diào)的就是職責(zé)分離，而這種分離并不僅僅體現(xiàn)在代碼上，也體現(xiàn)在開發(fā)人員的職責(zé)上。在開發(fā)ASP.NET MVC應(yīng)用程序時(shí)，負(fù)責(zé)View的是前端開發(fā)工程師，對他們來說JavaScript與AJAX可謂是再熟悉不過的技術(shù)。在合時(shí)的地方手動編寫一些 JavaScript調(diào)用反而會讓他們得到無比的自由性。例如在之前的代碼示例中，調(diào)用mvcAjax.get或mvcAjax.submit方法時(shí)完全可以在前后自由地加入額外操作或者條件判斷。這就不會像使用UpdatePanel時(shí)，如果需要使用JavaScript提交一個(gè)AJAX更新，還需要借助不登大雅之堂的trick。

也正因?yàn)槿绱耍琋ikhil提出的解決方案非常不錯，它能夠和前臺開發(fā)人員的自定義邏輯進(jìn)行靈活地結(jié)合。此外，通過閱讀ASP.NET MVC框架0416 Build的代碼，我發(fā)現(xiàn)在新版本的ASP.NET MVC中似乎將會內(nèi)置這種AJAX解決方案了——不過這也的確符合微軟的一貫做法，不是嗎？

這個(gè)AJAX解決方案原型的使用方式和工作原理已經(jīng)描述完了，如果您對其具體實(shí)現(xiàn)感興趣，或者想親自嘗試一下，可以下載文章末尾的附件。附件中的解決方案包含三個(gè)項(xiàng)目，MvcAjax為提供MvcAjaxPanel的項(xiàng)目，而MvcWebApp是一個(gè)普通的ASP.NET MVC示例程序，而MvcAjaxWebApp自然就是添加AJAX效果之后的結(jié)果了。在示例中，我還在Master Page中定義的菜單（即頁面左側(cè)的菜單）里顯示了一塊當(dāng)前時(shí)間，這是為了體現(xiàn)MvcAjaxPanel的“一次提交，多處更新”的特點(diǎn)。

不過需要強(qiáng)調(diào)的是，這僅僅是個(gè)原型?；蛘哒f這只是一種實(shí)現(xiàn)上嘗試，在很多細(xì)節(jié)方面并沒有作太多追求。如果要成為一個(gè)完善的AJAX解決方案，還需要作大量的改進(jìn)。例如：

提供一些客戶端的hook供前臺開發(fā)人員使用（如提交前、接受后、或者處理一個(gè)提交還沒有返回，客戶端就發(fā)起另一個(gè)請求的情況等等）。

更強(qiáng)大的功能，更好的開發(fā)體驗(yàn)（如客戶端觸發(fā)機(jī)制）

異常處理

支持腳本

支持跳轉(zhuǎn)（Redirection）

此外，作為面向ASP.NET MVC特有的AJAX解決方案，也有一些額外的問題需要考慮。最典型的問題之一就是在使用ASP.NET MVC時(shí)很少使用模板控件，而更多的使用頁面中的循環(huán)，那么如何讓MvcAjaxPanel在循環(huán)內(nèi)容生效？我也產(chǎn)生過一些想法，但是如果要真正確定下來最終的實(shí)現(xiàn)方式，很多東西還需要進(jìn)一步思考。如果您對于這個(gè)AJAX解決方案有什么建議或其他任何想法，也請盡快告訴我。

***再說一件有趣的事情：在我實(shí)現(xiàn)了這個(gè)原型之后的某一天，忽然意識到這個(gè)控件似乎不光可以為ASP.NET MVC框架使用，也能夠用于普通的WebForms應(yīng)用程序。這真是一個(gè)令人意外的發(fā)現(xiàn)。

【編輯推薦】

1. ASP.NET的AsyncState參數(shù)
2. ASP.NET MVC執(zhí)行異步Action
3. 概述ASP.NET MVC框架
4. ASP.NET MVC中使用UpdataModel方法
5. ASP.NET MVC的Action方法