ASP.NET Ajax 控制

Ajax 控制

AJAX 代表 Asynchronous JavaScript and XML。這是一項(xiàng)跨平臺(tái)的能加速響應(yīng)時(shí)間的技術(shù)。AJAX 服務(wù)器控件將腳本添加到頁(yè)面，它由瀏覽器執(zhí)行并處理。

然而像其他 ASP.NET 服務(wù)器控件一樣，這些 AJAX 服務(wù)器控件也能擁有與它們相聯(lián)系的方法和事件句柄，它們都在服務(wù)器端處理。

在 Visual Studio IDE 里的 control 工具箱含有一組叫作 'AJAX' 的控制組件。

ScriptManager 控件

ScriptManager 控件是最重要的控件并且必須出現(xiàn)在頁(yè)面上以讓其他控件工作。

它有基本語(yǔ)法：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

如果你創(chuàng)建一個(gè) 'Ajax Enabled site' 或者從 'Add Item' 對(duì)話框添加一個(gè) 'AJAX Web Form'，網(wǎng)頁(yè)將自動(dòng)形成，并包含 script manager 控件。ScriptManager 控件為所有的服務(wù)器端的控件照顧客戶機(jī)端的腳本。

UpdatePanel 控件

UpdatePanel 控件是一個(gè)容器控件并且源自 Control 類。它作為它里面的子控件的容器而運(yùn)作并且不擁有它自己的接口。當(dāng)它其中的一個(gè)控件觸發(fā)提交回來(lái)，UpdatePanel 干預(yù)異步啟動(dòng)并更新部分頁(yè)面。

例如，如果一個(gè) button 控件在 update panel 內(nèi)，并且它被點(diǎn)擊了，只有 update panel 內(nèi)的控件將被影響，頁(yè)面其他部分的控件將不會(huì)被影響。這被叫做部分提交返回或者異步提交返回。

例子

在你的應(yīng)用程序中添加一個(gè) AJAX 網(wǎng)頁(yè)表單。它包含默認(rèn)的 script manager 控件。插入一個(gè) update panel。將一個(gè) button 控件和一個(gè) label 標(biāo)簽放置在 update panel 控件內(nèi)。將另一個(gè) button 和 label 集放置在 panel 外。

設(shè)計(jì)視圖如下所示：

資源文件如下所示：

<form id="form1" runat="server">
   <div>
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
   </div>

   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
         <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/>
         <br />
         <br />
         <asp:Label ID="lblpartial" runat="server"></asp:Label>
      </ContentTemplate>
   </asp:UpdatePanel>

   <p> </p>
   <p>Outside the Update Panel</p>
   <p>
      <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" />
   </p>

   <asp:Label ID="lbltotal" runat="server"></asp:Label>
</form>

button 控件對(duì)時(shí)間處理程序都擁有相同的代碼：

string time = DateTime.Now.ToLongTimeString();
lblpartial.Text = "Showing time from panel" + time;
lbltotal.Text = "Showing time from outside" + time;

觀察當(dāng)頁(yè)面被執(zhí)行時(shí)，如果總的提交返回按鈕被點(diǎn)擊了，它將更新標(biāo)簽中都更新時(shí)間，但是如果部分提交返回按鈕被點(diǎn)擊，它僅僅更新在 update panel 內(nèi)的標(biāo)簽。

UpdatePanel Control 的屬性

UpdatePanel Control 的方法

以下表格展示了 update panel 控件的方法：

update panel 的行為依賴于 UpdateMode 屬性和 ChildrenAsTriggers 屬性的值。

UpdateProgress 控件

當(dāng)一個(gè)或者更多的 update panel 控件被更新時(shí)，UpdateProgress 控件提供了瀏覽器的一種反饋。例如，當(dāng)一個(gè)用戶登錄或者當(dāng)執(zhí)行一些面向數(shù)據(jù)庫(kù)的工作時(shí)等待服務(wù)器響應(yīng)。

它提供了如 "Loading page..." 的視覺確認(rèn)，表示工作在處理中。

UpdateProgress 控件的語(yǔ)法是：

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>

</asp:UpdateProgress>

以上的片段展示了一個(gè)簡(jiǎn)單的帶有 ProgressTemplate 標(biāo)簽的信息。但是，它可以是一張圖片或者其他相關(guān)的控件。UpdateProgress 控件顯示每一個(gè)異步的返回，除非它使用 AssociatedUpdatePanelID 屬性，被指定為單獨(dú)的 update panel。

UpdateProgress 控件的屬性

以下的表格展示了 update progress 控件的屬性。

UpdateProgress 控件的方法

以下的表格展示了 update progress 控件的方法：

Timer 控件

timer 控件被用來(lái)自動(dòng)初始化提交返回。這可以用兩種方式完成：

(1)設(shè)置 UpdatePanel 控件的 Triggers 屬性。

<Triggers> 
   <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" />
</Triggers>

(2)直接在 UpdatePanel 內(nèi)部放置一個(gè) timer 控件來(lái)作為一個(gè)子控件的觸發(fā)器。一個(gè)單獨(dú)的 timer 能作為許多 UpdatePanel 的觸發(fā)器。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

   <ContentTemplate>
      <asp:Timer ID="Timer1" runat="server" Interval="1000">
         </asp:Timer>

      <asp:Label ID="Label1" runat="server" Height="101px" style="width:304px" >
         </asp:Label>
   </ContentTemplate>

</asp:UpdatePanel>