一個示範 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共舞」第三章