ASP.NET AJAX簡明教程

　　 當咱們談論Ajax時，首先想到的就是JavaScript下的Ajax，用來完成網頁的交互，局部刷新工做，Microsoft的ASP.NET AJAX框架在Web的開發中承擔着相似的角色，並簡化了JavaScript中的Ajax的操做。

　　Microsoft的ASP.NET AJAX框架，整合了客戶端腳本庫和服務器的開發框架，基於.NET平臺和Visual Studio開發工具來建立具備良好用戶體驗的Web頁面和服務器端的頁面。

　　ASP.NET AJAX框架的結構體系：

　　1.客戶端

　　ASP.NET AJAX是可擴展的，徹底面向對象的JavaScript客戶端腳本框架，容許開發者在JavaScript腳本中很是容易地調用Web Service。包含兼容IE，Firefox，Safari，Chrome等瀏覽器的瀏覽器兼容層，擴展了JavaScript的核心服務，豐富組件的基礎類庫，以及用來管理Web服務，應用程序通訊，異步遠程方法調用的網絡層。

　　2.服務器端

　　ASP.NET AJAX服務器端集成了對異步客戶端回調的腳本支持，Web Service的調用和實現基本AJAX應用的服務器端控件；

　　  ASP.NET AJAX框架包含了ScriptManager，UpdatePanel，UpdaProgress和Timer四個核心的服務器端控件，核心控件之間的關係能夠用下圖來描述：

             

　　下面具體介紹各個控件的使用方法：

　　1.ScriptManager控件：

　　ScriptManager是ASP.NET AJAX的運行基礎，用來處理頁面上的全部AJAX組件，註冊JavaScript腳本，註冊Web Service，在AJAX的開發中，ScriptManager是必須的，且有且僅有一個。

　　ScriptManager的內部標籤有：

　　<Scripts>

　　　　<asp:ScriptReference Path=""></asp:ScriptReference>

　　</Scripts>

　　用來註冊外部的腳本文件；

　　<Services>

　　　　<asp:ServiceReference Path=""></asp:ServiceReference>

　　<Services />

　　用來註冊Web Service；

　　在JavaScript中調用Web Service要經歷建立Web Service，在客戶端註冊Web Service，在JavaScript中引用Web Service中的方法三個步驟。

　　下面給出一個調用Web Service的簡單示例： 

 1 <script type="text/javascript">
 2         //爲何要以這種方式調用Web Service的方法；
 3         function myButton1_onClick() {
 4             AjaxService.Greet(show);
 5         }
 6 
 7         function show(result) {
 8             alert(result);
 9         }
10     </script>

 1 <div>
 2         <%--註冊服務器端的ScriptManager控件；--%>
 3         <asp:ScriptManager ID="myScriptManager" runat="server" >
 4             <Services>
 5                 <asp:ServiceReference Path="~/AjaxService.asmx" />
 6             </Services>
 7         </asp:ScriptManager>
 8     </div>
 9 
10    <%-- 調用Web Service;--%>
11     <div class="WebServiceDemo">
12         <p>This is a example about the Web Service!</p>
13         <input type="button" name="myButton1" value="獲取Web服務" onclick="myButton1_onClick();"/>
14     </div><br /><br /><br />　

 1 [WebService(Namespace = "http://tempuri.org/")]
 2 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 3 // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 4  [System.Web.Script.Services.ScriptService]
 5 public class AjaxService : System.Web.Services.WebService {
 6 
 7     public AjaxService () {
 8     }
 9 
10     [WebMethod]
11     public string Greet()
12     {
13         return "Hello Ajax!";
14     } 
15 }

　　 注：至於爲何要在JavaScript腳本中使用那樣的調用方法，我也不知道，等待更新……

　　2.UpdatePanel和UpdateProgress控件：

　　UpdatePanel控件是服務器端的控件，用來建立實現局部更新的Web應用程序，強大之處在於不須要寫任何JavaScript腳本就可以實現頁面的局部更新；

　　UpdatePanel的屬性之中最重要的是UpdateMode，即更新模式，有Always和Conditional兩個值，當值爲Conditional時，只有觸發註冊到該UpdatePanel上的控件時纔會局部更新頁面，不然的話，只要.aspx頁面中包含兩個或兩個以上的UpdatePanel，有一個進行局部更新，其餘的都會隨之更新；（這個現象能夠在運行整個項目Demo時發現！）；

　　UpdatePanel控件的內部標籤有：

　　<ContentTemplate>

　　　　在這裏添加須要局部更新的ASP.NET服務器端控件；

　　　　注：若是但願UpdateProgress可以正常顯示，該UpdatePanel綁定的觸發器控件也要在這裏定義！

　　</ContentTemplate>

　　<Triggers  />包含<asp:AsyncPostBackTrigger />內部標籤，用於異步局部更新頁面。<asp:AsyncPostBackTrigger />有ControlID和EventName兩個屬性，其中ControlID用來設置用於觸發異步回傳控件的ID，如Button控件，EventName用來設置當觸發綁定控件的什麼事件時開始異步回傳，局部更新頁面，如Button的「Click」事件。

　　UpdateProgress控件綁定於一個或多個UpdatePanel控件，用來顯示UpdatePanel控件局部更新頁面的過程信息。

　　UpdateProgress控件的重要屬性有AssociatedUpdatePanelID和DisplayAfter兩個，AssociatedUpdatePanelID用來設置UpdateProgress控件綁定的UpdatePanel控件的ID，DisplayAfter用來設置UpdateProgress控件延遲顯示的毫秒數。

　　UpdateProgress控件的內部標籤有：

　　<ProgressTemplate>

　　　　在這裏添加顯示狀態信息的ASP.NET控件或者文本；

　　</ProgressTemplate>

　　注：若是沒有定義UpdatePanel控件，就使用UpdateProgress控件，在調試的過程當中會報錯。

　　下面給出一個使用UpdatePanel和UpdateProgress控件的簡單示例：

 1 <div class="UpdatePanelandUpdateProgressDemo">
 2         <p>This is a example about the UpdatePanel and UpdateProgress!</p>
 3         <div>
 4            初始時間：<asp:Label ID="Label1" runat="server"></asp:Label><br />
 5         </div>
 6 
 7         <asp:UpdatePanel ID="myUpdatePanel" runat="server" UpdateMode="Conditional">
 8             <%--把須要局部跟新的控件內容添加到該區域；--%>
 9             <ContentTemplate>
10                 當前時間：<asp:Label ID="Label2" runat="server"></asp:Label><br />
11                 <%--當<asp:Button />控件在<ContentTemplate />外部時，<asp:UpdateProgress />控件沒法正常顯示，
12                 可是 <asp:UpdatePanel />能夠正常使用；--%>
13                 <asp:Button ID="myButton2" Text="使用UpdatePanel局部更新頁面" runat="server" OnClick="myButton2_OnClick"/>
14             </ContentTemplate>
15             <Triggers>
16                 <asp:AsyncPostBackTrigger ControlID="myButton2" EventName="Click"/>
17             </Triggers>
18         </asp:UpdatePanel>
19 
20          <asp:UpdateProgress ID="myUpdateProgress" AssociatedUpdatePanelID="myUpdatePanel" runat="server">
21             <ProgressTemplate>
22                 <asp:Label ID="Label3" Text="正在更新數據，請等待……" runat="server"></asp:Label>
23             </ProgressTemplate>
24         </asp:UpdateProgress>
25     </div><br /><br />

 1     protected void Page_Load(object sender, EventArgs e)
 2     {
 3         Label1.Text = DateTime.Now.ToString();
 4         Label2.Text = DateTime.Now.ToString();
 5     }
 6 
 7     public void myButton2_OnClick(object sender, EventArgs e)
 8     {
 9         Label2.Text = DateTime.Now.ToString();
10         System.Threading.Thread.Sleep(2000);
11         //沒法如下面的方式添加HTML標籤；
12         //Response.Write("<p>This is a example about the UpdatePanel!</p>");
13     }

　　3.Timer控件：

　　Timer計時器控件，用來實現通過一段時間間隔刷新頁面的功能。Timer控件可以定時觸發整個頁面回送，當它與UpdatePanel結合使用時能夠定時觸發異步回送並局部刷新UpdatePanel控件的內容。

　　Timer控件的重要屬性有Interval和onTick，Interval用來設置刷新的時間間隔，onTick用來設置一個處理程序來執行頁面回送服務器時執行的請求。Timer處在UpdatePanel控件外部時刷新整個頁面， 處在UpdatePanel控件內部是執行局部刷新；Timer控件處在UpdatePanel控件的內外部也會影響到JavaScript計時器組件的計時操做，讀者自行探索，不在詳述。

　　下面給出一個使用Timer控件的簡單示例：

 1 <div class="TimerDemo">
 2         <p>This is a example about the Timer!</p>
 3         <%--當添加兩個或兩個以上的UpdatePanel時經過設置UpdateMode屬性來阻止UpdatePanel同時所有刷新；--%>
 4         <asp:UpdatePanel ID="myUpdatePanel2" runat="server" UpdateMode="Conditional">
 5             <ContentTemplate>
 6                 <asp:Image ID="myImage" runat="server" AlternateText="myImage" ImageAlign="Left" ImageUrl="images/image1.jpg"/>
 7                 <asp:Timer ID="myTimer" runat="server" Interval="2000" OnTick="myTimer_OnTick"></asp:Timer>
 8             </ContentTemplate>
 9         </asp:UpdatePanel>
10     </div>

1 public void myTimer_OnTick(object sender, EventArgs e)
2     {
3         Random r = new Random();
4         int i = r.Next(5) + 1;
5         myImage.ImageUrl = "images/image" + i + ".jpg";
6     }

　　4.ASP.NET AJAX Control Toolkit

　　我還沒使用過，我的感受是一個相似jQuery UI 的控件庫，詳細的介紹參考：http://asp.net/ajax/downloads/default.aspx。

　　到此ASP.NET AJAX簡明教程就結束了，但願給遇到困惑的讀者一點啓發。完整的示例下載訪問：連接: http://pan.baidu.com/s/1hqqvFtM 密碼: pwq5。

　　參考文獻：

　　　　[1] ASP.NET 4.0（C#）實用教程，張玉蘭編著，2012-10，北京，清華大學出版社。

　　　　[2] ASP.NET 3.5（C#）實用教程，王輝等編著，2010-08，北京，清華大學出版社。

　　本文歷史：

• 2014-12-24　　初稿完成。