本文英文原版及代碼下載:
http://aspnet.4guysfromrolla.com/articles/062106-1.aspx
淺談ASP.NET 2.0里面的AJAX 和 Atlas
導言:
傳統上,web應用程序主要運用"請求/回應"模式。然后頁面交互,典型的情況是向web服務器上請求一個回轉(一個請求),然后執行服務器端工作并返回一個更新過的頁面(一個回應).這樣的話,當進行頁面交互的時候多少會有些延遲.要提高用戶體驗的話,其中一種方法是使用AJAX.AJAX是一種使用JavaScript 和 XMLHttpRequest對象的技術.它可以把從客戶端發往web服務器的HTTP requests進行“瘦身”(light-weight).一旦接收到回應,頁面就使用JavaScript通知頁面的 Document Object Model (DOM) 和 CSS 設置進行無縫刷新.
過去,向web程序添加AJAX類型是比較困難的,并且學習起來比較難,因為AJAX包括了很多技術(JavaScript, XML, XmlHttpObject, HTTP requests, DHTML等等),不過隨著ASP.NET Atlas framework的出現.當談到AJAX時就用不著嘆氣了.
在本文,我們首先介紹AJAX a以及 Microsoft's Atlas framework的概念.接下來,我們通過一個簡單的示例講解這些概念.最后,通過一個稍微復雜點的示例見識 Atlas的威力,并向GridView控件添加AJAX行為,最后的案例顯示,向一個現有的或新建的web程序添加AJAX行為是很容易的.
AJAX 和 Atlas的基本概念
AJAX表示異步JavaScript和XML. (Asynchronous JavaScript and XML).AJAX技術的核心是XMLHttpRequest object對象,該對象便于以異步方式向web服務器傳送更少量的數據,而不是每次當用戶做出改動時刷新整個頁面.就像前面提到的那樣,在以前,AJAX技術很難執行,因為開發者需要寫客戶端JavaScript來進行異步請求并處理回應.自然,服務器端代碼也要處理這種“局部”回傳.此外,瀏覽器在執行DOM 和 XMLHttpObject的細微差異也會使事情變的不那么簡單.
針對執行AJAX技術面臨的這些困難,微軟推出了Atlas framework,它是對ASP.NET的擴充,用它可以很容易的貫徹到你的ASP.NET web應用程序中,真是難以置信.比如,使用Atlas的話,你不必再擔心瀏覽器的兼容性,因為Atlas framework會根據客戶端瀏覽器的不同,輸出相應的代碼.
本文接下來將演示如何構建一個使用AJAX技術的頁面;這2個例子可以在本文結尾處下載得到.假定你安裝的是Visual Studio 2005(或Web Developer),以及SQL Server 2005 Express版.(對那些非SQL Server 2005Express版本的用戶,我們稍后會提供相應的用法說明,指導如何順利的運行第二個示例)
一個基本的Atlas示例
讓我們先來演示一個簡單的示例。首先我們要網站Atlas website(atlas.asp.net)上去下載并安裝April CTP setup (.msi)文件( http://www.microsoft.com/downloads/details.aspx?FamilyId=B01DC501-B3C1-4EC0-93F0-7DAC68D2F787&displaylang=en ). 在默認安裝即可,該安裝文件將在你的Visual Studio 2005 或 Visual Web Developer里安裝Atlas website 模板.
現在你已經安裝了Atlas模板.打開Visual Studio 2005,在File菜單里選“New Web Site” .
圖1:
在My Templates里選Atlas Web Site項,在location里做相應的設置,再點OK.該Atlas Web Site模板以已經做了最初的準備工作。比如,在解決資源管理器里,查看 /bin目錄的話,你將會看到一個Microsoft.Web.Atlas.dll編譯文件.此外,你查看Web.config文件的話,你將看到所有必須的“掛鉤”(hooks)開始向Web應用程序添加Atlas functionality.(在此,我不打算講解Web.config文件里有關Atlas的屬性,你想更多的了解的話,請參閱Atlas documentation: http://www.asp.net/ajax/documentation/live/ )
最后,如果你查看Default.aspx頁面的源代碼,你可以看到Atlas新添加了一個 server控件:
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
在每一個使用Atlas functionality的頁面,你必須使用ScriptManager控件聲明.我們先忽略頁面底部的<script>模塊,直接看我們的示例.
首先,在Default.aspx頁面里輸入如下的代碼片段,以替換<form>標簽里的現有代碼:
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<div style="background-color: Yellow; float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel" runat="server" /><br />
<asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" OnClick="FullPostBackButton_OnClick" />
</div>
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<div style="background-color: Lime; width: 100px;">
<asp:Label ID="PartialPostBackLabel" runat="server" /><br />
<asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" OnClick="PartialPostBackButton_OnClick" />
</div>
</ContentTemplate>
</atlas:UpdatePanel>
</form>
簡單的說,這段代碼創建了2個用戶界面,且都用當前的服務器時間來更新一個 Label控件。第一個界面使用標準的,“請求/回應”模式完全回傳("Full Post Back"控件);而第二個界面使用AJAX技術進行局部回傳.我們不談第一個界面,那是不言而喻的。 我們將重點看第二個"Partial Post Back"控件.
就像你看到的那樣,ScriptManager控件添加了EnablePatialRendering屬性,且設置為rue. 這將允許ASP.NET部分回傳頁面而不是全部回傳。這就是我們想要的!要異步地處理部分回傳給web服務器的數據,為此我們要添加一個UpdatePanel 控件:
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
將參與異步回傳的ASP.NET控件放置在UpdatePanel的<ContentTemplate>標簽里.該UpdatePanel的Mode屬性指示什么時候發生局部回傳.就本頁面而言,Mode屬性為Conditional,那就意味著下面3種事件之一發生時, UpdatePanel將會把其數據回傳給服務器:
1.明白無誤的調用UpdatePanel的Update()方法.
2.一個UpdatePanel事件導致Update()方法明白無誤的被調用.
3.包含在UpdatePanel里面的一個server控件導致一個頁面回傳
如果你忽略Mode特性的話,它默認為Always,那就是說,當頁面里的任何一個 server控件導致回傳時,UpdatePanel都要刷新.在本例中我們使用第三種方法來回傳UpdatePanel(那就是說,當UpdatePanel里面的一個控件引發回傳的時候,該UpdatePanel就會回傳)。就像你看到的一樣,我們將一個Label 和 Button控件包含在<ContentTemplate>標簽里,因此當點擊Button控件時UpdatePanel就會回傳.
最后,在頁面的<head>表簽里添加如下的服務器端<script>模塊(如果你愿意的話,也可以添加到頁面的后臺代碼類里)
<script runat="server">
void FullPostBackButton_OnClick(object sender, EventArgs e)
{
FullPostBackLabel.Text = DateTime.Now.ToString();
}
void PartialPostBackButton_OnClick(object sender, EventArgs e)
{
PartialPostBackLabel.Text = DateTime.Now.ToString();
}
</script>
它們是頁面上2個Button控件的服務器端事件處理器(一個在UpdatePanel里面,一個在外面),它們都會用服務器當前的時間來對Label控件進行更新.
我們來運行,點擊這2個按鈕,之后你的屏幕看起來和下面的差不多:
圖2:
當你點擊"Partial Post Back"按鈕時, 你將看到其上面的時間改變了但屏幕沒有任何的閃爍,頁面并沒有完全的回傳,也沒有改變其它部分的時間!點擊"Partial Post Back"按鈕的時候,使用XMLHttpRequest object對象向web服務器進行異步回傳;web服務器然后返回信息.該簡單的示例向我們展示在你的web程序里使用Atlas執行AJAX行為是很簡單的.
在下一個示例里,我們使用GridView控件,用局部回傳來更新、排序、分頁記錄!
構建一個使用Atlas技術的GridView控件
我們來使用GridView控件進行更具實踐性的示例。首先創建一個新個Atlas template工程.請下載本文的代碼,在AtlasSecondExample文件夾下的的App_Data文件夾里有一個名為Database.mdf的數據庫文件.將其復制到你新近創建的website的App_Data文件夾里
打開Default.aspx頁面,進入source模式,在<form>標簽里添加如下的代碼:
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
</form>
我們在第一個示例里解釋過了這些代碼,你理解起來應該已經沒有障礙了.
接下來,創建一個強類型的DataSet,在創建過程中你可以自動的生產nsert, update, delete SQL statements.關于使用強類型DataSet的好處已經超出了本文的范疇,你可以參閱Scott Mitchell寫的《Working with Data in ASP.NET 2.0》系列教程.
在File菜單里選New File,再選DataSet,點Add(將其命名為DataSet1).然后詢問你是否將其放在App_Code文件夾里,選Yes. 這將打開DataSet Designer and the TableAdapter Configuration Wizard向導.
確保在下拉列表里選中Database.mdf文件,再連續點3次Next,接著輸入SELECT statement,用從數據庫檢索的記錄填充到DataSet,鍵入下面的statement,再點2次Next,最后點Finish.
SELECT * FROM Employees
我們的SELECT statement僅僅返回Employees表的所有記錄.保存該強類型DataSet再關閉DataSet Designer.
現在我們將注意力轉移到構建使用AJAX的GridView控件.打開Default.aspx頁面并切換到design模式,拖一個GridView控件到UpdatePanel內部,在智能標簽里,在“選擇數據源”里選擇“新數據源”。然后就開啟了Data Source Configuration Wizard向導,選擇“Object”并使用其默認ID,再點OK. 接下來的屏幕我們將在下拉列表里看到我們創建的名為DataSet1TableAdapters.EmployeesTableAdapter的TableAdapter,選中它,點Next,再點Finish.
差不多就這些了!在GridView的智能標簽里啟用分頁、排序、編輯功能.運行該工程,你看到的輸出和下面的圖片差不多。
圖4
測試排序、分頁、編輯功能。我們注意到這些功能都是異步發生的!
最后我還想提一點,絕大多數用戶在與web頁面交互的時候,體驗的是頁面產生回傳,屏幕閃爍一下后又重新對頁面進行裝載.這樣用戶就可以知道頁面在進行處理.但隨著AJAX的出現,就不會出現屏幕閃爍的情況了,不過最后還是通過某種感官效果來提示用戶頁面正進行處理.一個比較簡單的方法是使用Atlas內置的,稱為UpdateProgess的服務器控件.你可以添加該控件到任何頁面,無論何時一個 UpdatePanel產生回傳,UpdateProgress的<ProgressTemplate>標簽里的所有內容都會顯示出來,直到頁面更新完為止.你甚至可以放一個GIF圖像文件出來,提示用戶頁面正在處理.
<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</atlas:UpdateProgress>
結語:
在本文,我們看到使用Microsoft的Atlas來執行AJAX功能是多么的簡單。我們做了2個示例,第一個用來解釋AJAX和Atlas framework的基本概念.另一個示例演示了如何將一個ASP.NET server控件放在一個合適的Atlas server控件里,使其也可以使用AJAX技術.欣慰的是,通過本文我們為你揭開了AJAX 和 Atlas的神秘面紗.
附錄:
名稱解釋:Hook
Hook是Windows中提供的一種用以替換DOS下“中斷”的系統機制,中文譯為“掛鉤”或“鉤子”。在對特定的系統事件進行hook后,一旦發生已hook事件,對該事件進行hook的程序就會受到系統的通知,這時程序就能在第一時間對該事件做出響應。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
