傳統型ASPNET Web Forms是基於同時包含了表現層和後台代碼的Web頁面所以緊隨其後出現的ASPNET AJAX特別是這個框架的服務器端控件並沒有像它們本應該的那樣光芒四射於是很多跟隨AJAX時髦的ASPNET開發者只是向ASPNET頁面中隨意地放置一些UpdatePanel控件以便使其程序實現基本的AJAX支持實際上這只是防止了頁面的閃爍而根本上頁面還是進行了完整的回發並且要經歷整個頁面的生存周期為了消除ASPNET Web Forms所依賴的頁面回寄和ViewState等復雜技術微軟又推出了ASPNET應用開發的另一個可選框架—ASPNET MVC也正是基於前面的分析ASPNET MVC中也加入了部分AJAX支持技術但是目前的ASPNET MVC框架尚未發布其正式發行版本在許多方面仍存在不完善的地方尤其是對於AJAX技術僅提供了有限的支持本文中我們將通過一個簡單的例子來討論如何借助於ASPNET MVC Preview 框架提供的AjaxForm方法實現基本的AJAX編程支持
一 引言
如果你詳細研究一下ASPNET MVC框架每個版本之間的變化信息有關資源那麼你會注意到新版本的框架中提供了一組新對象例如AjaxHelper和AjaxExtensions借助於這些對象你可以為你的ASPNET MVC應用程序添加流行的Ajax支持功能此外借助於客戶端JavaScript腳本框架JQuery你也能實現同樣的目的而且借助於開源工程MVCContrib似乎你也能夠實現同樣的Ajax支持
本文中我們針對ASPNET MVC Preview 框架提供的Ajax作一簡單的討論分析其提供的基本的Ajax支持功能
二 實例剖析
（一）創建示例ASPNET MVC工程
啟動Visual Studio （我使用的是Team System版本）創建一個新的ASPNET MVC工程並命名為MvcBuiltinAjax（注本實
例中使用的是目前最新的ASPNET MVC Preview 而且在本例中我們並不關心是否加入單元測試支持框架的問題）
（二）修改視圖頁面Indexaspx
請注意本例中我們直接修改視圖頁面Indexaspx我們將在此頁面中添加一個文本框和一個按鈕控件我們的目的是當點擊此按鈕控件時執行表單提交功能通過此過程我們將回調服務器端並取得相應的字符串而且此字符內容將被以Ajax方式填入到按鈕控件旁邊的div元素中圖展示了實例程序的某一運行時刻的快照圖中當我們在文本框中輸入字符串張三時後台控制器Action方法查詢已有數據串如果其中沒有剛剛輸入的內容則顯示可以使用這個名字！否則顯示 此名字已經被使用了！的提示
現在我們來看一下修改視圖Indexaspx中涉及的主要內容如下所示
<asp:Content ID=indexContent ContentPlaceHolderID=MainContent runat=server>
<p>
<%using (AjaxForm(ExamineTextBox new AjaxOptions {UpdateTargetId = resultDiv }))
{ %>
<%= HtmlTextBox(textBox)%>
<input type=submit value=Button/>
<span id=resultDiv/>
<% } %>
</p>
</asp:Content>
請注意這裡所使用的AjaxForm幫助函數和引用span元素的UpdateTargetID屬性的值有關AjaxOptions的用法也有許多值得考察的地方後面再進行討論
如果你進一步分析一下運行時刻上面視圖頁面的相應源碼那麼你會注意到對應於上面內容的如下一段內容
<p>
<form action=/Home/ExamineTextBox onsubmit=SysMvcAsyncFormhandleSubmit(this { insertionMode: updateTargetId: result }); return false;><input type=text name=textBox id=textBox value= />
<input type=submit value=提交/>
<span id=result/>
</form>
</p>
正如你所想像的在前面的編碼中我們也完全可以直接使用這裡的SysMvcAsyncFormhandleSubmit函數只是上面的形式更為直觀且易於使用罷了
（三）添加控制器Action方法
然後我們在Home控制器中添加一個Action方法ExamineTextBox內容如下
public class HomeController : Controller
{
public string ExamineTextBox(string textBox)
{
string[] existingUsers = { ScottGu ScottHa GuyIncognito Boris };
if (existingUsersContains(username))
{
return 此名字已經被使用了！;
}
else
{
return 可以使用這個名字！;
}
}
}
注意這裡ExamineTextBox的return方法返回的不是一個ActionResult類型而是一個string事實上這個string返回結果將會被自動打包成一個ContentResult類型因此你也可以直接返回一個ContentResult類型但是上面的編程使得函數格式更為易於理解
另外值得注意的是上面的方法返回的結果是經由AJAX調用實現的之後此結果被悄悄地填入到相應的span標記中通過運行時啟動你的任何HTTP攔截工具你會觀察到出現類似如下所示的請求（Request）內容
POST /Home/ExamineTextBox HTTP/
Referer:
ContentType: application/xwwwformurlencoded; charset=utf
AcceptEncoding: gzip deflate
Host: localhost:
ContentLength:
Connection: KeepAlive
Pragma: nocache
textBox=dude&__MVCAJAX=true
現在我們來觀察一下響應（Response）結果如下所示
HTTP/ OK
Server: ASPNET Development Server/
CacheControl: private
ContentType: text/html; charset=utf
ContentLength:
Connection: Close
三關於腳本文件MicrosoftMvcAjaxdebugjs
還記得前面的表單編碼中當調用AjaxForm時出現一個UpdateTargetID嗎？它所指向的是按鈕控件旁邊的div元素（相應於其ID值）其實這個div元素內容的填入方式是通過腳本文件MicrosoftMvcAjaxdebugjs控制實現的
為了進一步弄清楚問題的實質我們還是跟蹤到腳本文件MicrosoftMvcAjaxdebugjs的內容中來看一下相關的代碼片斷吧如下所示
//把結果插入進目標元素中
if (targetElement) { //如果存在目標元素
switch (insertionMode) {
case SysMvcInsertionModeReplace:
targetElementinnerHTML = executorget_responseData();
break;
case SysMvcInsertionModeInsertBefore:
targetElementinnerHTML = executorget_responseData() + targetElementinnerHTML;
break;
case SysMvcInsertionModeInsertAfter:
targetElementinnerHTML = targetElementinnerHTML + executorget_responseData();
break;
}
}
四把對Ajax腳本的引用添加到母版視圖
注意在目前（最新版本的Preview ）的ASPNET MVC編程中我們必須手工添加相應的Ajax腳本庫在本例中我把它們添加到母版視圖SiteMaster下如下所示
<script src=/Content/MicrosoftAjaxdebugjs type=text/javascript></script>
<script src=/Content/MicrosoftMvcAjaxdebugjs type=text/javascript></script>
另外還請注意上面的腳本文件MicrosoftMvcAjaxjs是框架最新提供的它（以及另外幾個腳本文件）位於你新建的MVC應用程序的Content文件夾下
五小結
最後請記住本文中的項目是在ASPNET MVC Preview 下編寫和編譯通過的從進一步分析ASPNET MVC目前提供的幾個程序集不難看出其目前提供的Ajax支持支持是非常有限的目前從網上搜集到的有關於ASPNET MVC框架內置的Ajax支持文章也非常罕見作為參考讀者不妨再研究一下這篇博客文章
_Panels_with_ASPNET_MVCaspx
From:http://tw.wingwit.com/Article/program/net/201311/11276.html
