ASP.NET - Ajax 控制元件

---

---

AJAX 代表非同步 JavaScript 和 XML。這是一種跨平臺技術，可以加快響應時間。AJAX 伺服器控制元件向頁面新增指令碼，該指令碼由瀏覽器執行和處理。

但是，與其他 ASP.NET 伺服器控制元件一樣，這些 AJAX 伺服器控制元件也可能具有與之關聯的方法和事件處理程式，這些方法和事件處理程式在伺服器端處理。

Visual Studio IDE 中的控制元件工具箱包含一組稱為“AJAX 擴充套件”的控制元件。

ScriptManager 控制元件

ScriptManager 控制元件是最重要的控制元件，其他控制元件要正常工作，頁面上必須存在此控制元件。

它具有基本語法

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

如果建立“啟用 Ajax 的站點”或從“新增項”對話方塊中新增“AJAX Web 窗體”，則 Web 窗體將自動包含 ScriptManager 控制元件。ScriptManager 控制元件負責所有伺服器端控制元件的客戶端指令碼。

UpdatePanel 控制元件

UpdatePanel 控制元件是一個容器控制元件，派生自 Control 類。它充當其內子控制元件的容器，並且沒有自己的介面。當其中的控制元件觸發回發時，UpdatePanel 會介入以非同步啟動回發並僅更新該頁面的一部分。

例如，如果按鈕控制元件位於更新面板內並且被單擊，則只有更新面板內的控制元件會受到影響，頁面其他部分的控制元件不會受到影響。這稱為部分回發或非同步回發。

示例

在應用程式中新增一個 AJAX Web 窗體。它預設包含 ScriptManager 控制元件。插入一個更新面板。在更新面板控制元件內放置一個按鈕控制元件以及一個標籤控制元件。在面板外部放置另一組按鈕和標籤。

設計檢視如下所示

原始檔如下所示

<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>

兩個按鈕控制元件的事件處理程式程式碼相同

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

觀察到，當頁面執行時，如果單擊完整回發按鈕，它會在兩個標籤中都更新時間，但如果單擊部分回發按鈕，它只會更新更新面板內的標籤。

一個頁面可以包含多個更新面板，每個面板包含其他控制元件（如網格）並顯示資料的不同部分。

當發生完整回發時，更新面板內容會預設更新。可以透過更改控制元件的 UpdateMode 屬性來更改此預設模式。讓我們看一下更新面板的其他屬性。

UpdatePanel 控制元件的屬性

下表顯示了更新面板控制元件的屬性

UpdatePanel 控制元件的方法

下表顯示了更新面板控制元件的方法

更新面板的行為取決於 UpdateMode 屬性和 ChildrenAsTriggers 屬性的值。

UpdateProgress 控制元件

UpdateProgress 控制元件在更新一個或多個更新面板控制元件時在瀏覽器上提供某種反饋。例如，當用戶登入或在執行某些資料庫相關作業時等待伺服器響應時。

它提供視覺確認，例如“正在載入頁面...”，指示工作正在進行。

UpdateProgress 控制元件的語法為

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

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>
   
</asp:UpdateProgress>

以上程式碼片段顯示了 ProgressTemplate 標記內的簡單訊息。但是，它可以是影像或其他相關控制元件。UpdateProgress 控制元件顯示每次非同步回發，除非它使用 AssociatedUpdatePanelID 屬性分配給單個更新面板。

UpdateProgress 控制元件的屬性

下表顯示了更新進度控制元件的屬性

UpdateProgress 控制元件的方法

下表顯示了更新進度控制元件的方法

Timer 控制元件

Timer 控制元件用於自動啟動回發。這可以透過兩種方式完成

(1) 設定 UpdatePanel 控制元件的 Triggers 屬性

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

(2) 將 Timer 控制元件直接放置在 UpdatePanel 內以充當子控制元件觸發器。單個 Timer 可以是多個 UpdatePanel 的觸發器。

<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>