.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 即為回傳時的事件處理常式：
 1<asp:ScriptManager runat="server" id="ScriptManager1" />
 2<asp:UpdatePanel runat="server" id="UpdatePanel1"
 3    UpdateMode="Conditional">
 4  <contenttemplate>
 5    <asp:Timer id="Timer1" runat="server"
 6      Interval="120000"
 7      OnTick="Timer1_Tick">
 8    </asp:Timer>
 9  </contenttemplate>
10</asp:UpdatePanel>
11

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

 1<asp:ScriptManager runat="server" id="ScriptManager1" />
 2<asp:Timer ID="Timer1" runat="server" Interval="120000"
 3  OnTick="Timer1_Tick">
 4</asp:Timer>
 5<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 6  <Triggers>
 7    <asp:AsyncPostBackTrigger ControlID="Timer1"
 8        EventName="Tick" />
 9    </Triggers>
10    <ContentTemplate>
11      <asp:Label ID="Label1" runat="server" ></asp:Label>
12  </ContentTemplate>
13
14</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 控制項指定一條訊息：
1<asp:UpdateProgress ID="UpdateProgress1" runat="server">
2<ProgressTemplate>
3  An update is in progress
4</ProgressTemplate>
5</asp:UpdateProgress>
6

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 應用程式，以為使用者提供更好的用戶端體驗。