Microsoft Word - CH07_P36

Size: px

Start display at page:

Download "Microsoft Word - CH07_P36"

增予郎
5 years ago
Views:

1 定時作業的最佳利器, 善用 Timer 控制項 Timer 控制項的運作機制 Timer 控制項的使用模式 Timer 控制項的擺放位置與其影響 Timer 控制項範例集錦

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-2

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-3

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 圖表

5 Timer 控制項位於 UpdatePanel 控制項之內圖表 7-2 圖表 7-3 如果您將 Timer 控制項擺在 UpdatePanel 控制項之內, 但是卻將 UpdatePanel 控制項的 ChildrenAsTriggers 與 UpdateMode 屬性分別設定成 False 與 Conditional, 在這種狀況下, 欲使 Timer 控制項會成為所屬 UpdatePanel 控制項的觸發器並且引發非同步回傳來局部更新 UpdatePanel 控制項的內容, 可以進行下列兩種作法 : 7-5

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 圖表 7-5 網頁範例 CH7_DemoForm003.aspx 即是採用此種作法來更新網頁上的日期時間, 以下是其 Timer 控制項之 Tick 事件處理常式的程式碼內容 : Protected Sub Timer1_Tick(ByVal sender As Object, _ ByVal e As System.EventArgs) Dim mydatetime As DateTime = DateTime.Now Me.Label1.Text = _ 7-7

8 mydatetime.year.tostring & " 年 " & _ mydatetime.month.tostring & " 月 " & _ mydatetime.day.tostring & " 日 " & _ mydatetime.hour & " 點 " & _ mydatetime.minute & " 分 " & _ mydatetime.second & " 秒 " ' 更新 UpdatePanel 控制項的內容 Me.UpdatePanel1.Update() End Sub 如果您將 Timer 控制項擺在 UpdatePanel 控制項之內, 則 JavaScript 計時元件只有在每一次回傳完成時才會重新建立, 此意味著, 直到網頁回傳之前, 計時器間隔時間不會從頭計算舉例來說, 假設您將 Timer 控制項的 Interval 屬性設定成毫秒 ( 也就是 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-8

9 圖表 7-6 Timer 控制項位於 UpdatePanel 控制項之外圖表

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 Protected Sub Timer1_Tick(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Timer1.Tick 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-10

Timer 控制項位於 UpdatePanel 控制項之外 UpdatePanel 控制項的 UpdateMode 屬性採用預設值 Always 圖表 7-8 如果 Timer 控制項位於 UpdatePanel 控制項之外, 而且 UpdatePanel 控制項的 UpdateMode 屬性被設定成 Conditional, 則欲使得 Timer 控制項能夠引發非同步回傳並局部更新

11 Timer 控制項位於 UpdatePanel 控制項之外 UpdatePanel 控制項的 UpdateMode 屬性採用預設值 Always 圖表 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 控制項的內容, 我們必須撰寫下列的伺服器端程式碼 : Protected Sub Timer1_Tick(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Timer1.Tick 7-11

12 Dim mydatetime As DateTime = DateTime.Now Me.Label1.Text = _ mydatetime.year.tostring & " 年 " & _ mydatetime.month.tostring & " 月 " & _ mydatetime.day.tostring & " 日 " & _ mydatetime.hour & " 點 " & _ mydatetime.minute & " 分 " & _ 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 Timer 控制項位於 UpdatePanel 控制項之外 UpdatePanel 控制項的 UpdateMode 屬性設定成 Conditional 圖表

在本章之前, 我們都是在網頁的設計檢視中加入 UpdatePanel 控制項來圍住所要非同步局部更新的區域事實上, 除了採用宣告式語法之外, 您也可以使用程式控制方式來建立與更新 UpdatePanel 控制項, 本章將詳細討論此種作法 4-1 如何以程式控制方式更新一個 UpdatePanel

本章將討論下列主題 : 如何以程式控制方式更新一個 UpdatePanel 控制項如何以程式控制方式建立一個 UpdatePanel 控制項如何於自訂控制項中啟用局部更新功能自訂 UpdatePanel 控制項的錯誤處理使用 JavaScript 程式碼來自訂 UpdatePanel 控制項的錯誤處理在本章之前, 我們都是在網頁的設計檢視中加入 UpdatePanel 控制項來圍住所要非同步局部更新的區域