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

2024-07-10 12:51:00

字體：大中小

供稿：網(wǎng)友

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

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

一、引言

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

二、實(shí)例剖析

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

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

（二）修改視圖頁(yè)面Index.aspx

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

現(xiàn)在，我們來(lái)看一下修改視圖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＞

請(qǐng)注意這里所使用的Ajax.Form幫助函數(shù)和引用span元素的UpdateTargetID屬性的值。有關(guān)AjaxOptions的用法也有許多值得考察的地方，后面再進(jìn)行討論。

如果你進(jìn)一步分析一下運(yùn)行時(shí)刻上面視圖頁(yè)面的相應(yīng)源碼，那么，你會(huì)注意到對(duì)應(yīng)于上面內(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方法
然后，我們?cè)贖ome控制器中添加一個(gè)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 "可以使用這個(gè)名字！";
}
}
}

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

另外值得注意的是，上面的方法返回的結(jié)果是經(jīng)由AJAX調(diào)用實(shí)現(xiàn)的。之后，此結(jié)果被“悄悄地”填入到相應(yīng)的span標(biāo)記中。通過(guò)運(yùn)行時(shí)啟動(dòng)你的任何HTTP攔截工具，你會(huì)觀察到出現(xiàn)類似如下所示的請(qǐng)求（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)在，我們來(lái)觀察一下響應(yīng)（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

三、關(guān)于腳本文件MicrosoftMvcAjax.debug.js

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

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

以下為引用的內(nèi)容：
//把結(jié)果插入進(jìn)目標(biāo)元素中
if (targetElement) { //如果存在目標(biāo)元素
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;
}
}

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

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

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

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

五、小結(jié)

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

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

上一篇：解析ASP.NET 2.0創(chuàng)建母版頁(yè)引來(lái)的麻煩_.Net教程

下一篇：淺析ASP.NET全局異常處理_.Net教程