探討ASP.NET MVC架構內建AJAX支援編程技術

傳統型ASP.NET Web Forms是基於同時包含了表現層和後台代碼的Web頁面， 所以，緊隨其後出現的ASP.NET AJAX，特別是這個架構的伺服器端控制項並沒有像 它們本應該的那樣光芒四射。於是，很多跟隨AJAX時髦的ASP.NET開發人員只是向 ASP.NET頁面中隨意地放置一些UpdatePanel控制項以便使其程式實現基本的AJAX支 持。實際上，這隻是防止了頁面的“閃爍”，而根本上頁面還是進行 了完整的回傳，並且要經曆整個頁面的生存周期。為了消除ASP.NET Web Forms 所依賴的頁面回寄和ViewState等複雜技術，微軟又推出了ASP.NET應用開發的另 一個可選架構—ASP.NET MVC。也正是基於前面的分析，ASP.NET MVC中也 加入了部分AJAX支援技術。但是，目前的ASP.NET MVC架構尚未發布其正式發行 版本，在許多方面仍存在不完善的地方，尤其是對於AJAX技術僅提供了有限的支 持。本文中，我們將通過一個簡單的例子來討論如何藉助於ASP.NET MVC Preview 4架構提供的Ajax.Form方法實現基本的AJAX編程支援。

一、引 言

如果你詳細研究一下ASP.NET MVC架構每個版本之間的變化資訊有關資 源，那麼你會注意到新版本的架構中提供了一組新對象，例如AjaxHelper和 AjaxExtensions。藉助於這些對象，你可以為你的ASP.NET MVC應用程式添加流 行的Ajax支援功能。此外，藉助於用戶端JavaScript指令碼架構JQuery你也能實現 同樣的目的，而且藉助於開源工程 MVCContrib似乎你也能夠實現同樣的Ajax支 持。

本文中，我們針對ASP.NET MVC Preview 4架構提供的Ajax作一簡單 的討論，分析其提供的基本的Ajax支援功能。

二、執行個體剖析

（一 ）建立樣本ASP.NET MVC工程

啟動Visual Studio 2008（我使用的是Team System版本）建立一個新的ASP.NET MVC工程，並命名為MvcBuiltinAjax（註： 本執行個體中使用的是目前最新的ASP.NET MVC Preview 4；而且在本例中我們並不 關心是否加入單元測試支援架構的問題）。

（二）修改視圖頁面 Index.aspx

請注意，本例中我們直接修改視圖頁面Index.aspx。我們將 在此頁面中添加一個文字框和一個按鈕控制項。我們的目的是，當點擊此按鈕控制項 時，執行表單提交功能。通過此過程，我們將回調伺服器端並取得相應的字串 ，而且此字元內容將被以Ajax方式填入到按鈕控制項旁邊的div元素中。圖1展示了 執行個體程式的某一運行時刻的快照。圖中，當我們在文字框中輸入字串“ 張三”時，後台控制器Action方法查詢已有資料串，如果其中沒有剛剛輸 入的內容，則顯示“ 可以使用這個名字！”；否則，顯示 “ 此名字已經被使用了！”的提示。

現在，我們來看一下修改視圖 Index.aspx中涉及的主要內容，如下所示：

＜asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server" ＞
　　＜p＞
　　　 ＜%using (Ajax.Form ("ExamineTextBox", new AjaxOptions {UpdateTargetId = "resultDiv" }))
　　　　{ %＞
　　　　　　＜%= Html.TextBox("textBox1")%＞
　　　　　　＜input type="submit" value="Button"/＞
　　　　　　 ＜span id="resultDiv"/＞
　　 ＜% } %＞
　　＜/p＞
＜/asp:Content＞

請注意這裡所使用的Ajax.Form協助函數和 引用span元素的UpdateTargetID屬性的值。有關AjaxOptions的用法也有許多值 得考察的地方，後面再進行討論。

如果你進一步分析一下運行時刻上面 視圖頁面的相應源碼，那麼，你會注意到對應於上面內容的如下一段內容：

＜p＞
　　　　＜form action="/Home/ExamineTextBox" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'result' }); return false;"＞＜input type="text" name="textBox1" id="textBox1" value="" /＞
　　　　　　 ＜ input type="submit" value="提交"/＞
　　　　 　　 ＜span id="result"/＞
　　　＜/form＞
　　 ＜ /p＞

正如你所想像的，在前面的編碼中，我們也完全可以直接使用這 裡的Sys.Mvc.AsyncForm.handleSubmit函數，只是上面的形式更為直觀且易於使 用罷了。