本書第 3 章的表 3-3(p.101)列出了 ScriptManager 的方法,其中對 RegiterAsyncPostBackControl 方法的描述為:

將指定的控制項註冊為可由 UpdatePanel 觸發非同步 postback 的控制項。

同時在該頁下方有一段譯注:

如果你希望放在 UpdatePanel 之外的控制項在觸發事件時也有局部更新頁面的能力,便可用此方法。

這是什麼意思呢?

其實 UpdatePanel 要到第 4 章才會介紹,但第 4 章並未示範這個方法怎麼用(也是啦,總不可能針對每一個方法都寫個範例來說明)。不過,我們只要寫個簡單的程式來測試一下便能了解其用法。

步驟

  1. 從 Visual Studio 2005 中開啟既有的 AJAX-enabled 網站,在網站中加入一個新網頁,命名為 RegisterAsyncPostBackControlDemo.aspx(檔名還真是又臭又長 Ick!)。
  2. 從 Toolbox 拉一個 ScriptManager 和 UpdatePanel 至網頁上。
  3. 從 Toolbox 拉一個 Button 和 Label 伺服器控制項至 UpdatePanel1 面板區域內。
  4. 撰寫 Button1 的 Click 事件:
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "更新時間: " +DateTime.Now.ToString();
        }
  5. 你可以先執行看看,當你在網頁上重複點擊 Button1 時,Label1 顯示的時間會不斷更新,但網頁並沒有整個重新載入(從網頁並沒有閃一下就能得知)。
  6. 接著回到設計畫面,再拉一個 Button 控制項至 UpdatePanel1 面板區域之外。
  7. 撰寫 Button2 的 Click 事件,程式碼跟步驟 4 相同。或者,你也可以利用屬性編輯器,直接把 Button2 的 Click 事件指向 Button1_Click。
  8. 執行看看,當你在網頁上重複點擊 Button2 時,Label1 顯示的時間也會不斷更新,但是每次更新時網頁都會閃一下,可以看出網頁有重新載入。
  9. 假設我們希望這個放在 UpdatePanel 之外的按鈕被按下時,也是以非同步 postback 的方式進行頁面的局部更新,此時就可以利用 RegiterAsyncPostBackControl 方法。作法是在網頁的 Load 事件中將 Button2 註冊為非同步 postback 的控制項,程式碼如下:

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(Button2);
    }
  10. 再執行看看,此時不論點擊 Button1 還是 Button2,頁面都不會跳動,因為這時候 Button2 也是以非同步 postback 的方式更新局部頁面了。

執行畫面如下:
註:我特別用另一個 Panel 把 UpdatePanel 內的控制項包起來,並設定其背景色為黃色,以便執行時容易辨別哪些控制項是包在 UpdatePanel 裡面。