程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> 關於C# >> 探討ASP.NET MVC框架內置AJAX支持編程技術

探討ASP.NET MVC框架內置AJAX支持編程技術

編輯:關於C#
 

傳統型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函數,只是上面的形式更為直觀且易於使用罷了。

(三)添加控制器Action方法
然後,我們在Home控制器中添加一個Action方法ExamineTextBox,內容如下:

public class HomeController : Controller
{
public string ExamineTextBox(string textBox1)
{
string[] existingUsers = { ScottGu, ScottHa, GuyIncognito, Boris };

if (existingUsers.Contains(username))
{
return 此名字已經被使用了!;
}
else
{
return 可以使用這個名字!;
}
}
}

注意,這裡ExamineTextBox的return方法返回的不是一個ActionResult類型,而是一個string。事實上,這個 string返回結果將會被自動打包成一個ContentResult類型。因此,你也可以直接返回一個ContentResult類型;但是,上面的編程使得函數格式更為易於理解。
另外值得注意的是,上面的方法返回的結果是經由AJAX調用實現的。之後,此結果被“悄悄地”填入到相應的span標記中。通過運行時啟動你的任何HTTP攔截工具,你會觀察到出現類似如下所示的請求(Request)內容:
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

現在,我們來觀察一下響應(Response)結果,如下所示:
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

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved