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 秒)。
.gif "注意事項") 注意事項： |
|---|
將 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>
教學課程
逐步解說：搭配多個 UpdatePanel 控制項使用 ASP.NET Timer 控制項
類別參考
下表顯示 Timer 控制項的重要伺服器類別。
- Timer
依定義的間隔來執行非同步或同步 Web 網頁回傳。