Timer 控制項概觀

  • 發行項

更新：2007 年 11 月

ASP.NET AJAX Timer 控制項會以定義的間隔執行回傳。若搭配 UpdatePanel 控制項使用 Timer 控制項，您能夠以定義的間隔啟用網頁局部更新。您也可以使用 Timer 控制項來張貼整個網頁。

此主題包括下列章節：

  • 案例

  • 背景

  • 程式碼範例

  • 類別參考

Timer 控制項案例

當您需要執行下列動作時，可以使用 Timer 控制項：

  • 在不重新整理整個 Web 網頁的情況下定期更新一個或多個 UpdatePanel 控制項的內容。

  • 每當 Timer 控制項導致回傳時執行伺服器上的程式碼。

  • 在定義的間隔同步張貼整個 Web 網頁至 Web 伺服器。

背景

Timer 控制項是伺服器控制項，它內嵌 JavaScript 元件至 Web 網頁。當經過 Interval 屬性中定義的間隔時，JavaScript 元件會從瀏覽器啟始回傳。您會在程式碼 (在伺服器上執行) 中設定 Timer 控制項的屬性，而那些屬性會傳遞到 JavaScript 元件。

當您使用 Timer 控制項時，必須在 Web 網頁中包含 ScriptManager 類別的執行個體。

當 Timer 控制項啟始回傳時，Timer 控制項會引發伺服器上的 Tick 事件。您可以為 Tick 事件建立事件處理常式，並在網頁張貼到伺服器時執行動作。

設定 Interval 屬性以指定回傳的發生頻率，並設定 Enabled 屬性以開啟或關閉 Timer。Interval 屬性定義為以毫秒為單位，而且其預設值為 60,000 毫秒 (60 秒)。

注意事項：

將 Timer 控制項的 Interval 屬性設定為小值，可以產生大量的 Web 伺服器流量。請只在必要時，才使用 Timer 控制項來重新整理內容。

如果必須在不同的間隔更新不同的 UpdatePanel 控制項，您可以在 Web 網頁上包含多個 Timer 控制項。或者，一個 Timer 控制項的單一執行個可以觸發 Web 網頁中的多個 UpdatePanel 控制項觸發。

在 UpdatePanel 控制項內使用 Timer 控制項

當 Timer 控制項包含在 UpdatePanel 控制項內時，Timer 控制項會自動做為 UpdatePanel 控制項的觸發程序 (Trigger) 運作。您可以將 UpdatePanel 控制項的 ChildrenAsTriggers 屬性設定為 false，以覆寫此行為。

對於 UpdatePanel 控制項內的 Timer 控制項，JavaScript 計時元件只會在每個回傳完成時重新建立。因此，從回傳傳回網頁之前，計時間隔不會開始。例如，假設 Interval 屬性設定為 60,000 毫秒 (60 秒)，但回傳花費 3 秒鐘才完成，下一個回傳將在上一個回傳完成之後 63 秒發生。

下列範例顯示如何將 Timer 控制項包含在 UpdatePanel 控制項內。

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

在 UpdatePanel 控制項內使用 Timer 控制項

當 Timer 控制項位於 UpdatePanel 控制項外時，您必須明確定義 Timer 控制項做為要更新之 UpdatePanel 控制項的觸發程序。

若 Timer 控制項位於 UpdatePanel 控制項之外，JavaScript 計時元件會在處理回傳時繼續執行。例如，假設 Interval 屬性設定為 60,000 毫秒 (60 秒)，但回傳花費 3 秒鐘才完成，下一個回傳將在上一個回傳完成之後 60 秒發生。使用者只會在 UpdatePanel 控制項看到已重新整理的內容 57 秒。

您必須將 Interval 屬性設定為可讓一個非同步回傳在下一個回傳啟始之前完成的值。如果在處理上一個回傳時啟始新的回傳，則會取消第一個回傳。

下列範例顯示如何在 UpdatePanel 控制項外部使用 Timer 控制項。

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

程式碼範例

下列範例顯示 UpdatePanel 控制項，這個控制項會顯示隨機產生的股價以及產生股價的時間。根據預設，Timer 控制項會每隔 10 秒更新 UpdatePanel 中的內容。使用者可以決定更新股價的時間為每隔 10 秒、60 秒，或根本不更新股價。當使用者選擇不更新股價時，必須將 Enabled 屬性設定為 false。

<%@ Page Language="VB" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>Timer Example Page</title>
    <script >
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            OriginalTime.Text = DateTime.Now.ToLongTimeString()
        End Sub

        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
            StockPrice.Text = GetStockPrice()
            TimeOfPrice.Text = DateTime.Now.ToLongTimeString()
        End Sub

        Private Function GetStockPrice() As String
            Dim randomStockPrice As Double = 50 + New Random().NextDouble()
            Return randomStockPrice.ToString("C")
        End Function

        Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Interval = 10000
            Timer1.Enabled = True
        End Sub

        Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Interval = 60000
            Timer1.Enabled = True
        End Sub

        Protected Sub RadioButton3_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Enabled = False
        End Sub
</script>
</head>
<body>
    <form id="form1" >
    <asp:ScriptManager ID="ScriptManager1"  />
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000" />

        <asp:UpdatePanel ID="StockPricePanel"  UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
        <ContentTemplate>
            Stock price is <asp:Label id="StockPrice" ></asp:Label><BR />
            as of <asp:Label id="TimeOfPrice" ></asp:Label>  
        </ContentTemplate>
        </asp:UpdatePanel>
        <div>
            <asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency"  Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
            <asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency"  Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
            <asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency"  Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" /><br />
            <br />
        Page originally created at <asp:Label ID="OriginalTime" ></asp:Label>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Timer Example Page</title>
    <script >
        protected void Page_Load(object sender, EventArgs e)
        {
            OriginalTime.Text = DateTime.Now.ToLongTimeString();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            StockPrice.Text = GetStockPrice();
            TimeOfPrice.Text = DateTime.Now.ToLongTimeString();
        }

        private string GetStockPrice()
        {
            double randomStockPrice = 50 + new Random().NextDouble();
            return randomStockPrice.ToString("C");
        }

        protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
            Timer1.Interval = 10000;
        }

        protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
            Timer1.Interval = 60000;
        }

        protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = false;
        }

</script>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000" />

        <asp:UpdatePanel ID="StockPricePanel"  UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
        <ContentTemplate>
            Stock price is <asp:Label id="StockPrice" ></asp:Label><BR />
            as of <asp:Label id="TimeOfPrice" ></asp:Label>  
            <br />

        </ContentTemplate>
        </asp:UpdatePanel>
        <div>
        <br />
        Update stock price every:<br />
        <asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency"  Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
        <asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency"  Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
        <asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency"  Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" />
        <br />
        Page loaded at <asp:Label ID="OriginalTime" ></asp:Label>
        </div>
    </form>
</body>
</html>

教學課程

逐步解說：Timer 控制項簡介

逐步解說：搭配多個 UpdatePanel 控制項使用 ASP.NET Timer 控制項

類別參考

下表顯示 Timer 控制項的重要伺服器類別。

  • Timer
    依定義的間隔來執行非同步或同步 Web 網頁回傳。

請參閱

概念

網頁局部呈現概觀

UpdatePanel 控制項概觀