初學 ASP.NET AJAX (四)：Timer 和 UpdateProgress

1 概述

Timer 和 UpdateProgress 是 ASP.NET AJAX Extensions 1.0 中所包含的其他二個簡單的服務器控件。Timer 控件用於定時觸發事件，而 UpdateProgress 控件用於在局部更新時爲用戶顯示進度條。

2 Timer 控件

Timer 控件在預定的時間間隔中執行回發。如果將 Timer 控件和 UpdatePanel 控件一起使用，就可以定時的進行局部頁面的刷新。也可以使用 Timer 控件來發送整個頁面。

2.1 Timer 控件的使用場景

可以在以下情況下使用 Timer 控件：

• 週期性的更新一個或多個 UpdatePanel 控件，而無須刷新整個頁面。
• 每次 Timer 控件回發時都在服務器端運行代碼。
• 定時的同步發送整個頁面到服務器。

2.2 背景

Timer 控件是一個將 Javascript 組件嵌入到 Web 頁面中的服務器控件。Javascript 組件在經過定義在 Interval 屬性中定義的間隔時啓動來自瀏覽器的回發。可以在運行在服務器上的代碼中設置 Timer 控件的屬性，這些屬性都會被傳送到 Javascript 組件。
在使用 Timer 控件時，頁面中必須包含一個 ScriptManager 控件。
當 Timer 控件啓動一個回發時，Timer 控件在服務器端觸發 Tick 事件，可以爲 Tick 事件創建一個處理程序來執行頁面發送回服務器的動作。
設置 Interval 屬性以指定回送發生的頻率，設置 Enabled 屬性以開啓或關閉 Timer，Interval 屬性以毫秒爲單位，默認爲 60000 毫秒，也即 60 秒。
注意：將 Interval 屬性設置爲很小的值將會導致頻率的回發，從而引發性能問題，所以，要以必要的頻率使用 Timer 控件來刷新內容。
如果不同的 UpdatePanel 必須以不同的間隔更新，那麼就可以在同一頁面中包含多個 Timer 控件。另一種選擇是，單個 Timer 控件實例可以是同一頁面中多個UpdatePanel 控件的觸發器。

2.3 在 UpdatePanel 控件內部使用 Timer 控件

當 Timer 控件被包含在 UpdatePanel 控件的內部時，Timer 控件自動成爲 UpdatePanel 控件的觸發器。可以將 UpdatePanel 控件的 ChildrenAsTriggers 屬性設置爲 false 來覆蓋這種行爲。
對於在 UpdatePanel 控件內部的 Timer 控件，Javascript 時間組件僅在每次回髮結束時重新創建，因此，時間間隔在頁面從回發返回前不會開始。例如，如果 Interval 屬性被設置爲 60000 毫秒，而回送花費了3秒來完成，即下次回送在前一次回送發生後63秒之後才發生。
下列示例展示瞭如何在 UpdatePanel 控件內部包含一個 Timer 控件，其中指定的 Timer1_Tick 即爲回發時的事件處理程序：

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:UpdatePanel runat="server" id="UpdatePanel1"
    UpdateMode="Conditional">
  <contenttemplate>
    <asp:Timer id="Timer1" runat="server"
      Interval="120000"
      OnTick="Timer1_Tick">
    </asp:Timer>
  </contenttemplate>
</asp:UpdatePanel>

2.4 在 UpdatePanel 控件外部使用 Timer 控件

當 Timer 控件在 UpdatePanel 控件的外部時，必須顯式的定義 Timer 控件爲要更新的 UpdatePanel 控件的觸發器。
如果 Timer 控件在 UpdatePanel 控件的外部，Javascript 時間組件會像回發已被處理一樣繼續運行。例如，如果 Interval 屬性被設置爲 60000 毫秒（60秒），回發需要3秒來完成，則下次回發將在上次回發的後60秒後回發，而用戶看到的在 UpdatePanel 控件中的更新內容只有57秒。
必須設置 Interval 屬性爲使一個異步回發在下次回發啓動前可以完成的值，如果新的回發在更早的回發處理期間啓動的話，早期的回發將被取消。
下列示例展示瞭如何在 UpdatePanel 控件外部使用 Timer 控件。

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:Timer ID="Timer1" runat="server" Interval="120000"
  OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1"
        EventName="Tick" />
    </Triggers>
    <ContentTemplate>
      <asp:Label ID="Label1" runat="server" ></asp:Label>
  </ContentTemplate>

</asp:UpdatePanel>

3 UpdateProgress 控件

UpdateProgress 控件提供 UpdatePanel 控件中局部頁面更新時的狀態信息。可以定製 UpdateProgress 控件的默認內容和佈局。要防止在局部頁面更新時發生閃屏，可以設置 UpdateProgress 控件在顯示前的延遲。

3.1 場景

當一個頁面中包含一個或多個 UpdatePanel 控件用於局部頁面輸出時，使用 UpdateProgress 控件可以設計一個更爲直觀的界面。如果局部頁面更新很慢，就可以用 UpdateProgress 控件來提供一個更新狀態的可視化反饋。可以在一個頁面上放置多個 UpdateProgress 控件，每個關聯不同的 UpdatePanel 控件。另一種選擇是，只使用一個 UpdateProgress 控件，而讓它與頁面中的所有 UpdatePanel 控件相關聯。

3.2 背景

UpdateProgress 控件輸出爲一個 <div> 元素，它的顯示或隱藏依賴於關聯的 UpdatePanel 控件是否導致異步回發。對於原始頁面和同步回發，UpdateProgress 控件不會顯示。

3.3 將一個 UpdateProgress 控件與一個 UpdatePanel 控件相關聯

可以設置 UpdateProgress 控件的 AssociatedUpdatePanelID 屬性來將它與 UpdatePanel 控件相關聯。當一個回發源自 UpdatePanel 控件時，所有關聯的 UpdateProgress 控件都會顯示。如果不將 UpdateProgress 控件與特定的 UpdatePanel 控件關聯，則 UpdateProgress 控件將爲所有回發顯示進度。
如果 UpdatePanel 控件的 ChildrenAsTriggers 屬性設置爲 false ，並且異步回發源自 UpdatePanel 控件的內部時，所有關聯的 UpdateProgress 控件都將顯示。

3.4 創建 UpdateProgress 的內容

用 ProgressTemplate 屬性來以聲明的方式指定由 UpdateProgress 控件顯示的消息。<ProgressTemplate> 元素可以包含 HTML 和標記。下列示例演示瞭如何爲 UpdateProgress 控件指定一條消息：

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

3.5 指定內容佈局

當 DynamicLayout 屬性設置爲 true 時，UpdateProgress 控件初始時不佔用頁面的空間，頁面在需要時動態的顯示 UpdateProgress 控件。爲支持動態顯示，控件輸出的 <div> 元素的 display 樣式屬性初始被設置爲 none。
當 DynamicLayout 屬性設置爲 false 時，UpdateProgress 控件將在頁面顯示時佔用空間，即使控件不顯示。在這種情況下，控件的 <div> 元素的 displey 樣式屬性被設置爲 block ，而 visibility 初始設置爲 hidden 。

3.6 在頁面中放置 UpdateProgress 控件

可以將 UpdateProgress 控件放在 UpdatePanel 控件的外部或內部。UpdateProgress 控件隨着它關聯的 UpdatePanel 控件更新爲一個異步回發的返回而顯示，即使 UpdateProgress 控件被包含在另一個 UpdatePanel 控件中也一樣。
如果 UpdatePanel 控件在另一個更新面板內部，源自子面板內部的回發將導致關聯子面板的 UpdateProgress 控件的顯示。同時，關聯父面板的所有 UpdateProgress 控件也將顯示。如果回發源自父面板的直接子控件，則僅有與父面板相關聯的 UpdateProgress 控件顯示。這與回發如何被觸發時一樣的邏輯。

3.7 指定 UpdateProgress 控件顯示的時機

可以使用 Javascript 的 PageRequestManager 類的 beginRequest 和 endRequesst 事件來編程控制 UpdateProgress 控件顯示的時機。在beginRequest 事件處理程序中，顯示錶示 UpdateProgress 控件的 DOM 元素，在 endRequest 的事件處理程序中隱藏元素。
在下列情形下必須提供客戶端腳本來顯示或隱藏 UpdateProgress 控件：

• 在源自一個註冊爲更新面板的異步回發觸發器的回發期間，而它並沒有與 UpdateProgress 控件關聯。
• 在源自以編程的方式使用 ScriptManager 控件的 RegisterAsyncPostBackControl(Control) 方法註冊爲異步回發控件的控件回發期間，在這種情況下，UpdateProgress 控件無法自動確定異步回發已被觸發。

3.8 其他屬性

DisplayAfter ：

以毫秒爲單位指定 UpdateProress 控件顯示的延遲時間。

4 總結

至此，ASP.NET AJAX Extensions 1.0 中所包含的幾個服務器控件已都學習完畢，使用這些服務器控件，我們就可以開發出具有基本的 AJAX 特性的 Web 應用程序，以爲用戶提供更好的客戶端體驗。