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

為此我提供了一些JavaScript代碼，截獲一個鏈接原本的目標地址并將其轉(zhuǎn)化為一個AJAX請求。我在這里通過示例中的代碼來展示這種使用方式（這個示例源于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改進之前的代碼相比，唯一的區(qū)別就是額外指定了元素的onclick事件（加粗部分）。在onclick事件執(zhí)行中，這個鏈接默認的跳轉(zhuǎn)行為將被取消，取而代之的是一個AJAX請求，請求的目標便是ProductsController中名為List的Action。

我們可以使用上面的方式應對普通鏈接，那么又該如何將一個客戶端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等值，組成一個請求的body，并且以HTTP POST的方式發(fā)出一個AJAX請求。余下的事情和之前就沒有什么區(qū)別了。

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

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

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

不過需要強調(diào)的是，這僅僅是個原型。或者說這只是一種實現(xiàn)上嘗試，在很多細節(jié)方面并沒有作太多追求。如果要成為一個完善的AJAX解決方案，還需要作大量的改進。例如：

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

更強大的功能，更好的開發(fā)體驗（如客戶端觸發(fā)機制）

異常處理

支持腳本

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

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

***再說一件有趣的事情：在我實現(xiàn)了這個原型之后的某一天，忽然意識到這個控件似乎不光可以為ASP.NET MVC框架使用，也能夠用于普通的WebForms應用程序。這真是一個令人意外的發(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方法