逐步解說：Timer 控制項簡介

更新：2007 年 11 月

本逐步解說中，您要利用下列三個 ASP.NET AJAX 伺服器控制項，依時間間隔來更新部分 Web 網頁：ScriptManager 控制項、UpdatePanel 控制項及 Timer 控制項。把這些控制項加入至頁面，可讓您在每次回傳時就不必重新整理整個頁面。只會更新 UpdatePanel 控制項的內容。

如需網頁局部呈現的詳細資訊，請參閱網頁局部呈現概觀。

必要條件

若要實作本逐步解說中的程序，您需要：

• Microsoft Visual Studio 2005 或 Visual Web Developer Express 版。

• 具備 AJAX 能力的 ASP.NET 網站。

依時間間隔來重新整理 UpdatePanel 控制項

1. 在 Microsoft Visual Studio 2005 或 Visual Web Developer Express 版中建立新的具備 AJAX 能力的 ASP.NET Web 網頁，並切換至 [設計] 檢視。

2. 如果頁面尚未包含 ScriptManager 控制項，請在工具箱的 [AJAX 擴充功能] 索引標籤中按兩下 ScriptManager 控制項，以便將該控制項加入至頁面。

   

3. 在工具箱中按兩下 UpdatePanel 控制項，將其加入至頁面。

   

4. 按一下 UpdatePanel 控制項內部，然後按兩下 Timer 控制項，將其加入至 UpdatePanel 控制項。

   

   注意事項：
   Timer 控制項無論是位於 UpdatePanel 控制項的內部或外部，都可做為觸發程序。本範例說明如何使用 UpdatePanel 控制項內部的 Timer 控制項。有關如何使用 UpdatePanel 控制項外部的 Timer 控制項來做為觸發程序，請參考逐步解說：搭配多個 UpdatePanel 控制項使用 ASP.NET Timer 控制項 的範例。

5. 將 Timer 控制項的 Interval 屬性設定為 10000。

   Interval 屬性定義是以毫秒為單位，因此將 Interval 屬性設定為 10,000 毫秒，將每隔 10 秒重新整理 UpdatePanel 控制項一次。

   注意事項：
   在本範例中，計時器間隔設定為 10 秒。這是為了讓您在執行範例時，不必等太久就能看到結果。然而，每個計時器間隔都會回傳至伺服器，並造成網路流量。因此，在實際執行應用程式時，您應該將計時器間隔設定成適合應用程式的最長時間。

6. 按一下 UpdatePanel 控制項內部，然後在工具箱的 [標準] 索引標籤下，按兩下 Label 控制項，將它加入至 UpdatePanel 控制項。

   注意事項：
   請確定您已將 Label 控制項加到 UpdatePanel 控制項內部。

   

7. 將標籤的 Text 屬性設定為 [UpdatePanel 尚未重新整理]。

8. 按一下 UpdatePanel 控制項外部，然後按兩下 Label 控制項，將第二個標籤加入至 UpdatePanel 控制項外部。

   注意事項：
   請確定您已將第二個 Label 控制項加到 UpdatePanel 控制項外部。

   

9. 按兩下 Timer 控制項，以建立 Tick 事件的處理常式。

10. 加入程式碼，將 Label1 控制項的 Text 屬性設定成目前時間。

11. 建立 Page_Load 處理常式並加入程式碼，將 Label2 控制項的 Text 屬性設定成頁面建立的時間。

12. 切換至原始碼檢視。

    請確定頁面的標記如下：

    Partial Class _Default
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Label2.Text = "Page created at: " & _
              DateTime.Now.ToLongTimeString()
        End Sub
    
        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
            Label1.Text = "Panel refreshed at: " & _
              DateTime.Now.ToLongTimeString()
    
        End Sub
    End Class
    

    public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label2.Text = "Page created at: " +
              DateTime.Now.ToLongTimeString();
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "Panel refreshed at: " +
              DateTime.Now.ToLongTimeString();
        }
    }
    

13. 儲存變更，然後按 CTRL+F5 在瀏覽器中檢視頁面。

14. 等待至少 10 秒鐘，讓面板重新整理。

    面板內的文字會變更成顯示面板內容上次重新整理的時間。但面板外的文字不會重新整理。

檢閱

本逐步解說介紹一些基本概念，指導您使用 Timer 控制項及 UpdatePanel 控制項來啟用網頁局部更新功能。頁面上如果有 UpdatePanel 控制項或 Timer 控制項，則必須加入 ScriptManager 控制項。根據預設，非同步回傳時，面板內部的 Timer 控制項只會引發面板重新整理。如果將面板外部的 Timer 控制項設定成面板的觸發程序，則它也能引發 UpdatePanel 重新整理。

下一個步驟是要學習如何使用 UpdatePanel 控制項外部的 Timer 控制項，以及如何使用計時器來更新多個 UpdatePanel 控制項。詳細資訊請參閱逐步解說：搭配多個 UpdatePanel 控制項使用 ASP.NET Timer 控制項。

請參閱

概念

Timer 控制項概觀

網頁局部呈現概觀

參考

Timer

UpdatePanel

ScriptManager