2007年11月11日 星期日

ASP.NET 2.0當中的Call Back機制

連續幾篇介紹ASP.NET當中的AJAX實作方式,主要的目的也是讓讀者可以有所比較,理解這幾種作法之間的差異。

最後一個要介紹的,當然就是ASP.NET當中的Call Back機制。Call Back是ASP.NET 2.0當中內建的功能,不需要安裝ASP.NET AJAX依舊可以相當有效率的呈現出AJAX效果。

我們看下面的頁面,我們在頁面上放置另一個TextBox2和HtmlButton(ID為CallBackButton,並設為在伺服器端執行:


接著我們鍵入底下的程式碼:


我們先看執行的結果,您會發現,按下下方的HtmlButton,則網頁不需要postback,TextBox2裡面的Server端時間已經更新了:

怎麼完成的呢?
這段程式碼必須好好解釋一下,首先程式碼第三行有一個很不一樣的地方:

0001:Partial Class _Default
0002: Inherits System.Web.UI.Page
0003: Implements System.Web.UI.ICallbackEventHandler
這表示這張.aspx網頁支援Call Back機制(我們待會再來解釋Call Back機制)。而因為網頁支援Call Back機制,因此必須實作底下兩個項目:


我們看先前的Form_Load程式碼:
請特別注意21-25行程式碼,23行的『GetCallbackEventReference』指令,建立了CallBack機制(ASP.NET 2.0會自動產生一段JavaScipt的CallBack程式碼),在第25行我們將此機制(JavaScript)掛到HtmlButon上。

Call Back的整個原理是:
1.在ASP.NET程式碼中,利用『GetCallbackEventReference』產生一段JavaScript的Call Back指令。
2.將這段Call Back指令掛到某個Html控制項上,利用這段JavaScript指令在不postback的情況下,將資料(參數)回傳到Server(參數包含下表中定義的argument, clientCallbackProc…) 。
3.Server端(.aspx.vb程式)接收到資料(參數)後進行處理,處理完後回呼(Call Back)Client端的JavaScript。
4.Client端的JavaScript函式,收到回呼的結果,動態更新網頁內容。
就這樣,不換頁的情況下,我們就可以完成網頁更新的效果。

我們回顧整個Call Back機制的流程,從開發人員的角度,看整個Call Back機制的運作方式:


您會發現分為底下幾個步驟:
※步驟A:Client端啟動Call Back機制。啟動的方式是利用GetCallbackEventReference所建立的WebForm_DoCallback函式(JavaScript)。
※ 步驟B:Server端的RaiseCallbackEvent接收到Client端傳入的參數,開始運作,這時多半處理一些資料庫IO,更新Server端的狀態。
※步驟C:GetCallbackResult被呼叫,這時候多半用來建立要回傳給Client端的HTML碼,例如一張表格,或是一段文字。
※步驟D:Client端接收到從GetCallbackResult傳來的值(多半是剛才Build出來的HTML碼),Client端的ReceivedData函式是我們自己在Page_Load裡面以RegisterStartupScript建立的,可以透過這個函式將接到的HTML以JavaScript塞入頁面中。

整個行程就完成了一個Call Back動作,可以達到不用換頁(Postback)就更新頁面的效果。

2 則留言:

Max 提到...

大大~
請問第一張圖的兩個button是不是都是asp.net的button呢?
其中一個應該是HTML的button吧?
但是圖中的兩個button都有在伺服器執行的小三角箭頭,
不好意思哦~不是很懂...請見諒謝謝~

David 提到...

Hi Max,
如同圖上所描述的,其中一個是HTML Button,會有Server小箭頭是因為我選擇了『在伺服器端執行』即便是HTML Button,你也可以選擇『在伺服器端執行』,這樣 Server Site就可以認得這個Button。但他依舊還是HTML Button,本身不會觸發Postback