一個示範 UpdatePanel 的程式化更新範例

這一篇文章延續上一篇「UpdatePanel 更新的程式化控制-明確的 update 方法呼叫」,說明如何在網頁當中,實作其中說明的相關步驟。

這個範例隨著使用者按下畫面上的按鈕,取得後端伺服器的時間,並且透過引用Upate()方法,更新之後將其顯示在畫面上,執行的畫面如下:



在這個畫面當中包含了三個按鈕,分別是「ALL」、「FIRST」以及「SECOND」,其中第一個按鈕「ALL」,沒有任何設定,按下這個按鈕,整個網頁會被更新。

接下來的兩個按鈕,按下的時候,分別更新第一個以及第二個時間標籤,其中第一個按鈕「FIRST」透過程式碼引用Update()更新時間標示,而第二個按鈕則是UpdaetPanel的觸發器。

切換至網頁的設計畫面,其內容如下:



畫面上嵌入了兩個UpdatePanel控制項,以及三個按鈕,其中的「FIRST」按鈕,由ScriptManager控制項進行登錄,「SECOND」按鈕則被設定為第二個UpdatePanel的更新觸發器,原始檔內容如下式:



其中的兩個UpdatePanel控制項的UpdateMode,均設定為Conditional,同時最後一個標籤則是指定為第二個按鈕的Click事件。
緊接著來看看後置程式碼,其中的內容如下:



「Page_Load」於表單載入的時候,引用RegisterAsyncPostBackControl()方法,登錄了畫面上的第一個按鈕,然後在第一個按鈕被按下的時候,執行其事件處理程序「btnFir_Click」,引用UpdtaePanel控制項的Updaet(),執行更新作業。

透過撰寫程式碼引用Update()執行更新作業,除了可以達到一般性的局部更新效果,開發人員可以進一步的寫下邏輯程式碼來控制更新作業,這對於設計複雜的網頁設計非常的有用。

摘自「ASP.NET 應用程式開-與AJAX共舞」第三章

沒有留言: