淺談ASP.NET MVC框架內(nèi)置AJAX支持編程技術_.Net教程

推薦：解析ASP.NET中C 和J#的混合應用
不想搞得太復雜，我僅僅演示實現(xiàn) DataReader和DataSet，起個拋磚引玉的作用，也顧不得代碼結(jié)構(gòu)是否優(yōu)美、性能是否良好，能夠達到本文的目的即可。 為了方便大家親自動手實踐，數(shù)據(jù)庫使用的是ACCESS，文章末尾有下載鏈接。實際項目中要使用SqlServer和ORACLE

傳統(tǒng)型ASP.NET Web Forms是基于同時包含了表現(xiàn)層和后臺代碼的Web頁面，所以，緊隨其后出現(xiàn)的ASP.NET AJAX，特別是這個框架的服務器端控件并沒有像它們本應該的那樣光芒四射。于是，很多跟隨AJAX時髦的ASP.NET開發(fā)者只是向ASP.NET頁面中隨意地放置一些UpdatePanel控件以便使其程序?qū)崿F(xiàn)基本的AJAX支持。實際上，這只是防止了頁面的“閃爍”，而根本上頁面還是進行了完整的回發(fā)，并且要經(jīng)歷整個頁面的生存周期。為了消除ASP.NET Web Forms所依賴的頁面回寄和ViewState等復雜技術，微軟又推出了ASP.NET應用開發(fā)的另一個可選框架—ASP.NET MVC。也正是基于前面的分析，ASP.NET MVC中也加入了部分AJAX支持技術。但是，目前的ASP.NET MVC框架尚未發(fā)布其正式發(fā)行版本，在許多方面仍存在不完善的地方，尤其是對于AJAX技術僅提供了有限的支持。本文中，我們將通過一個簡單的例子來討論如何借助于ASP.NET MVC Preview 4框架提供的Ajax.Form方法實現(xiàn)基本的AJAX編程支持。

一、 引言

如果你詳細研究一下ASP.NET MVC框架每個版本之間的變化信息有關資源，那么你會注意到新版本的框架中提供了一組新對象，例如AjaxHelper和AjaxExtensions。借助于這些對象，你可以為你的ASP.NET MVC應用程序添加流行的Ajax支持功能。此外，借助于客戶端JavaScript腳本框架JQuery你也能實現(xiàn)同樣的目的，而且借助于開源工程 MVCContrib似乎你也能夠?qū)崿F(xiàn)同樣的Ajax支持。
本文中，我們針對ASP.NET MVC Preview 4框架提供的Ajax作一簡單的討論，分析其提供的基本的Ajax支持功能。

二、 實例剖析

（一）創(chuàng)建示例ASP.NET MVC工程

啟動Visual Studio 2008（我使用的是Team System版本）創(chuàng)建一個新的ASP.NET MVC工程，并命名為MvcBuiltinAjax（注：本實例中使用的是目前最新的ASP.NET MVC Preview 4；而且在本例中我們并不關心是否加入單元測試支持框架的問題）。

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

請注意，本例中我們直接修改視圖頁面Index.aspx。我們將在此頁面中添加一個文本框和一個按鈕控件。我們的目的是，當點擊此按鈕控件時，執(zhí)行表單提交功能。通過此過程，我們將回調(diào)服務器端并取得相應的字符串，而且此字符內(nèi)容將被以Ajax方式填入到按鈕控件旁邊的div元素中。圖1展示了實例程序的某一運行時刻的快照。圖中，當我們在文本框中輸入字符串“張三”時，后臺控制器Action方法查詢已有數(shù)據(jù)串，如果其中沒有剛剛輸入的內(nèi)容，則顯示“ 可以使用這個名字！”；否則，顯示 “此名字已經(jīng)被使用了！”的提示。

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

以下為引用的內(nèi)容： ＜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幫助函數(shù)和引用span元素的UpdateTargetID屬性的值。有關AjaxOptions的用法也有許多值得考察的地方，后面再進行討論。

如果你進一步分析一下運行時刻上面視圖頁面的相應源碼，那么，你會注意到對應于上面內(nèi)容的如下一段內(nèi)容：

以下為引用的內(nèi)容： ＜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函數(shù)，只是上面的形式更為直觀且易于使用罷了。

（三）添加控制器Action方法
然后，我們在Home控制器中添加一個Action方法ExamineTextBox，內(nèi)容如下：

以下為引用的內(nèi)容： public class HomeController : Controller { public string ExamineTextBox(string textBox1) { string[] existingUsers = { "ScottGu", "ScottHa", "GuyIncognito", "Boris" }; if (existingUsers.Contains(username)) { return "此名字已經(jīng)被使用了！"; } else { return "可以使用這個名字！"; } } }

注意，這里ExamineTextBox的return方法返回的不是一個ActionResult類型，而是一個string。事實上，這個 string返回結(jié)果將會被自動打包成一個ContentResult類型。因此，你也可以直接返回一個ContentResult類型；但是，上面的編程使得函數(shù)格式更為易于理解.

另外值得注意的是，上面的方法返回的結(jié)果是經(jīng)由AJAX調(diào)用實現(xiàn)的。之后，此結(jié)果被“悄悄地”填入到相應的span標記中。通過運行時啟動你的任何HTTP攔截工具，你會觀察到出現(xiàn)類似如下所示的請求（Request）內(nèi)容：

以下為引用的內(nèi)容： POST /Home/ExamineTextBox HTTP/1.1 Referer: http://localhost.:45210/Home Content-Type: application/x-www-form-urlencoded; charset=utf-8 Accept-Encoding: gzip, deflate Host: localhost.:45210 Content-Length: 28 Connection: Keep-Alive Pragma: no-cache

textBox1=dude&__MVCAJAX=true

現(xiàn)在，我們來觀察一下響應（Response）結(jié)果，如下所示：

以下為引用的內(nèi)容： HTTP/1.1 200 OK Server: ASP.NET Development Server/9.0.0.0 Cache-Control: private Content-Type: text/html; charset=utf-8 Content-Length: 39 Connection: Close

三、關于腳本文件MicrosoftMvcAjax.debug.js

還記得前面的表單編碼中當調(diào)用Ajax.Form時出現(xiàn)一個UpdateTargetID嗎？它所指向的是按鈕控件旁邊的div元素（相應于其ID值）。其實，這個div元素內(nèi)容的填入方式是通過腳本文件MicrosoftMvcAjax.debug.js控制實現(xiàn)的。

為了進一步弄清楚問題的實質(zhì)，我們還是跟蹤到腳本文件MicrosoftMvcAjax.debug.js的內(nèi)容中來看一下相關的代碼片斷吧，如下所示：

以下為引用的內(nèi)容： //把結(jié)果插入進目標元素中 if (targetElement) { //如果存在目標元素 switch (insertionMode) { case Sys.Mvc.InsertionMode.Replace: targetElement.innerHTML = executor.get_responseData(); break; case Sys.Mvc.InsertionMode.InsertBefore: targetElement.innerHTML = executor.get_responseData() targetElement.innerHTML; break; case Sys.Mvc.InsertionMode.InsertAfter: targetElement.innerHTML = targetElement.innerHTML executor.get_responseData(); break; } }

四、把對Ajax腳本的引用添加到母版視圖

注意，在目前（最新版本的Preview 4）的ASP.NET MVC編程中，我們必須手工添加相應的Ajax腳本庫。在本例中，我把它們添加到母版視圖Site.Master下，如下所示：

以下為引用的內(nèi)容： ＜script src="/Content/MicrosoftAjax.debug.js" type="text/javascript"＞＜/script＞ ＜script src="/Content/MicrosoftMvcAjax.debug.js" type="text/javascript"＞＜/script＞

另外還請注意，上面的腳本文件MicrosoftMvcAjax.js是框架最新提供的，它（以及另外幾個腳本文件）位于你新建的MVC應用程序的Content文件夾下。

五、小結(jié)

最后，請記住，本文中的項目是在ASP.NET MVC Preview 4下編寫和編譯通過的。從進一步分析ASP.NET MVC目前提供的幾個程序集不難看出，其目前提供的Ajax支持支持是非常有限的。目前從網(wǎng)上搜集到的有關于ASP.NET MVC框架內(nèi)置的Ajax支持文章也非常罕見。

分享：解析.NET中的動態(tài)編譯技術
代碼的動態(tài)編譯并執(zhí)行是一個.NET平臺提供給我們的很強大的工具用以靈活擴展（當然是面對內(nèi)部開發(fā)人員）復雜而無法估算的邏輯，并通過一些額外的代碼來擴展我們已有 的應用程序。這在很大程度上給我們提供了另外一種擴展的方式（當然這并不能算是嚴格意義上的