定時作業的最佳利器，善用timer控制項epaper.gotop.com.tw/pdf/acl025800.pdf ·...

定時作業的最佳利器，

善用 Timer 控制項

Timer控制項的運作機制

Timer控制項的使用模式

Timer控制項的擺放位置與其影響

Timer控制項範例集錦

7-2

我相信大家對 Timer 控制項都不會感到陌生，畢竟在 Windows Form 應

用程式中，就已提供 Timer 控制項來幫助大家定時完成特定作業。

ASP.NET AJAX 所提供的 Timer 控制項是一個伺服器控制項，它能夠定

時引發全網頁回傳，當然，在搭配了 UpdatePanel 控制項之後，就可以

定時引發非同步回傳並局部更新 UpdatePanel 控制項的內容。

7-1 Timer 控制項的運作機制

要能夠在網頁上使用 Timer 控制項有一個先決條件，那就是您必須先在

網頁上加入一個 ScriptManager 控制項。

雖然 Timer 控制項是一個伺服器控制項，然而事實上它會在網頁內嵌入

一個 JavaScript 元件。此一 JavaScript 元件會在 Timer 控制項之 Interval

屬性所設定的間隔時間到達時就從瀏覽器引發回傳。您可以利用伺服器

端程式碼來設定 Timer 控制項的屬性，而所做的設定會傳遞給 JavaScript

元件。

Interval 屬性來用決定每隔多長的時間要引發回傳，其設定值的單位是毫

秒（也就是千分之一秒），預設值則是 60,000 毫秒，也就是 60 秒。我們

必須提醒大家，將 Timer 控制項的 Interval 屬性設定成較小的值會使得

回傳頻率增加，也很容易使得 Web 伺服器的流量大增，對整體資源耗用

與效率都會造成不良的影響。因此請在確實需要的時候，才使用 Timer

控制項來定時更新網頁上的內容。

每當 Timer 控制項之 Interval 屬性所設定的間隔時間到達而進行回傳

時，就會在伺服器上引發 Tick 事件。我們通常會替 Tick 事件處理常式

撰寫程式碼，以便能夠根據自己的需求來定時執行特定作業。

另外一個常用的屬性就是 Enabled，您可以將 Enabled 屬性設定成 false

以便讓 Timer 控制項停止計時，而當需要讓 Timer 控制項再次開始計時

的時候，只需再將 Enabled 屬性設定成 True 即可。

7-3

7-2 Timer 控制項的使用模式

一般來說，我們會以下列方式來使用 Timer 控制項：

您可以在網頁上加入單一個 Timer 控制項，並且利用它來定時非同

步更新網頁上一或多個 UpdatePanel 控制項的內容。

如果網頁上不同 UpdatePanel 控制項之內容的所需更新間隔時間並

不相同，則您可以在網頁上加入多個 Timer 控制項，並且利用它們

來分別負責定時非同步更新網頁上不同之 UpdatePanel 控制項的內

容。

您也可以讓 Timer 控制項定時引發全網頁回傳，以便定時更新整個

網頁的內容。

7-3 Timer 控制項的擺放位置與其影響

在此我們要討論一項課題，那就是 Timer 控制項究竟應該擺在

UpdatePanel 控制項之內或之外呢？關於此點，可分下列數種狀況來說明：

如果您將 Timer 控制項擺在 UpdatePanel 控制項之內，而且

UpdatePanel 控制項的 ChildrenAsTriggers 屬性採用預設值 True，

則 Timer 控制項會自動成為所屬 UpdatePanel 控制項的觸發器，也

就是說，它會引發非同步回傳並局部更新所屬之 UpdatePanel 控制

項的內容。

圖表 7-1 所示者是網頁範例 CH7_DemoForm001.aspx 的執行畫面，

它每隔一秒就會更新網頁上的日期時間。就設計手法而言，我們是

將 Timer 控制項擺在 UpdatePanel 控制項之內，而且讓 UpdatePanel

控制項的 ChildrenAsTriggers 屬性與 UpdateMode 屬性分別採用預

設值 True 與 Always（如圖表 7-2 所示），此舉將使得 Timer 控制

項會自動引發非同步回傳並局部更新所屬之 UpdatePanel 控制項的

內容。

7-4

就 Timer 控制項本身而言，我們將其 Interval 屬性設定成 1000（也

就是 1 秒鐘－如圖表 7-3 所示），並替其 Tick 事件處理常式撰寫

下列程式碼：

Protected Sub Timer1_Tick(ByVal sender As Object, _

ByVal e As System.EventArgs)

Dim myDateTime As DateTime = DateTime.Now

Me.Label1.Text = _

myDateTime.Year.ToString & " 年 " & _

myDateTime.Month.ToString & " 月 " & _

myDateTime.Day.ToString & " 日 " & _

myDateTime.Hour & " 點 " & _

myDateTime.Minute & " 分 " & _

myDateTime.Second & " 秒 "

End Sub

圖表 7-1

7-5

圖表 7-2

圖表 7-3

如果您將 Timer 控制項擺在 UpdatePanel 控制項之內，但是卻將

UpdatePanel 控制項的 ChildrenAsTriggers 與 UpdateMode 屬性分

別設定成 False 與 Conditional，在這種狀況下，欲使 Timer 控制項

會成為所屬 UpdatePanel 控制項的觸發器並且引發非同步回傳來局

部更新 UpdatePanel 控制項的內容，可以進行下列兩種作法：

Timer控制項位於 UpdatePanel控制項之內

7-6

第一種作法是替 UpdatePanel 控制項加入一個由 Timer 控制項

之 Tick 事件所引發的觸發器。圖表 7-4 所示者是網頁範例

CH7_DemoForm002.aspx 的執行畫面，它同樣會每隔一秒就非同

步更新網頁一次，以便顯示出目前的日期與時間。然而從圖表

7-5 可以看出，此一 UpdatePanel 控制項的 ChildrenAsTriggers

與 UpdateMode 屬性分別設定成 False 與 Conditional，為了使

位於其中的 Timer 控制項能夠引發非同步回傳並且局部更新

UpdatePanel 控制項的內容，我們替 UpdatePanel 控制項加入一

個由 Timer 控制項之 Tick 事件所引發的觸發器（如圖表 7-5 所

示）。

第二種作法是在 Timer 控制項的 Tick 事件處理常式中呼叫所屬

之 UpdatePanel 控制項的 Update 方法。請大家務必清楚一個觀

念，當 UpdatePanel 控制項的 ChildrenAsTriggers 被設定成

False 時，位於其中的控制項（包括 Timer 控制項）就會是一個

非同步回傳控制項，只不過不會去更新所屬之 UpdatePanel 控

制項的內容。因此在這種時候要去更新所屬之 UpdatePanel 控

制項的內容，只需去呼叫其 Update 方法即可。

圖表 7-4

7-7

圖表 7-5

網頁範例 CH7_DemoForm003.aspx 即是採用此種作法來更新網

頁上的日期時間，以下是其 Timer 控制項之 Tick 事件處理常式

的程式碼內容：


ByVal e As System.EventArgs)


Me.Label1.Text = _

7-8






myDateTime.Second & " 秒 "

' 更新 UpdatePanel 控制項的內容。

Me.UpdatePanel1.Update()

End Sub

如果您將 Timer 控制項擺在 UpdatePanel 控制項之內，則JavaScript 計時元件只有在每一次回傳完成時才會重新建立，此意味著，直到網頁回傳之前，計時器間隔時間不會從頭計算。舉例來說，

假設您將 Timer 控制項的 Interval 屬性設定成 10000 毫秒（也就是10秒），但是回傳作業本身卻花了 2秒鐘才完成，則下一次的回傳將發生在前一次回傳被引發之後的 12秒鐘。

如果您將 Timer 控制項擺在 UpdatePanel 控制項之外，則欲使得

Timer 控制項所引發的非同步回傳能夠局部更新 UpdatePanel 控制

項的內容，則必須視相關狀況來加以設定或撰寫程式碼。說明如下：

第一種作法，是替 UpdatePanel 控制項的 Triggers 屬性明確定

義一個由 Timer 控制項之 Tick 事件所引發的觸發器，如此一

來，才會局部更新 UpdatePanel 控制項的內容。

圖表 7-6 所示者是網頁範例 CH7_DemoForm004.aspx 的執行畫

面，它會每秒更新一次日期時間，然而從圖表 7-7 的設計畫面可

以看出，我們是將 Timer 控制項擺在 UpdatePanel 控制項之外，

為了使 Timer 控制項能夠局部更新 UpdatePanel 控制項中的日

期時間，我們替 UpdatePanel 控制項的 Triggers 屬性明確定義

一個由 Timer 控制項之 Tick 事件所引發的 AsyncPostBack 觸發

器。

7-9

圖表 7-6

圖表 7-7

Timer控制項位於 UpdatePanel控制項之外

7-10

如果 Timer 控制項位於 UpdatePanel 控制項之外，而且

UpdatePanel 控制項的 UpdateMode 屬性採用預設值 Always，

則欲使得 Timer 控制項能夠引發非同步回傳並局部更新

UpdatePanel 控制項的內容，您必須撰寫程式碼來呼叫

ScriptManager 控制項的 RegisterAsyncPostBackControl 方

法，以便將 Timer 控制項註冊為一個非同步回傳控制項。

網頁範例 CH7_DemoForm005.aspx 同樣是利用 Timer 控制項來

每秒更新網頁上的日期時間一次，從圖表 7-8 的設計畫面可以看

出， Timer 控制項位於 UpdatePanel 控制項之外，而且

UpdatePanel 控制項的 UpdateMode 屬性採用預設值 Always。

在此種情況下，欲使得 Timer 控制項能夠引發非同步回傳並局

部更新 UpdatePanel 控制項的內容，我們必須撰寫下列的伺服

器端程式碼：

Protected Sub Page_Load(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles Me.Load

Me.ScriptManager1.RegisterAsyncPostBackControl(Me.Timer1)

End Sub


ByVal e As System.EventArgs) Handles Timer1.Tick


Me.Label1.Text = _






myDateTime.Second & " 秒"

End Sub

7-11

圖表 7-8

如果 Timer 控制項位於 UpdatePanel 控制項之外，而且

UpdatePanel 控制項的 UpdateMode 屬性被設定成

Conditional，則欲使得 Timer 控制項能夠引發非同步回傳並局

部更新 UpdatePanel 控制項的內容，您不僅需要撰寫程式碼來

呼叫 ScriptManager 控制項的 RegisterAsyncPostBackControl方法來將 Timer 控制項註冊為一個非同步回傳控制項，還必須

呼叫 UpdatePanel 控制項的 Update 方法來更新其內容。

網頁範例 CH7_DemoForm006.aspx 同樣是利用 Timer 控制項來

每秒更新網頁上的日期時間一次，從圖表 7-9 的設計畫面可以看

出， Timer 控制項位於 UpdatePanel 控制項之外，而且

UpdatePanel 控制項的 UpdateMode 屬性被設定成

Conditional。在此種情況下，欲使得 Timer 控制項能夠引發非

同步回傳並局部更新 UpdatePanel 控制項的內容，我們必須撰

寫下列的伺服器端程式碼：


ByVal e As System.EventArgs) Handles Timer1.Tick


UpdatePanel控制項的 UpdateMode屬性採用預設值 Always

7-12


Me.Label1.Text = _






myDateTime.Second & " 秒"

Me.UpdatePanel1.Update()

End Sub

Protected Sub Page_Load(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles Me.Load

Me.ScriptManager1.RegisterAsyncPostBackControl(Me.Timer1)

End Sub

圖表 7-9


UpdatePanel控制項的 UpdateMode屬性設定成 Conditional

定時作業的最佳利器， 善用timer控制項epaper.gotop.com.tw/pdf/acl025800.pdf ·...

Documents

定時作業的最佳利器，善用timer控制項epaper.gotop.com.tw/pdf/acl025800.pdf ·...