ASP.NET AJAX入門系列（6）：UpdateProgress控制項簡單介紹

在ASP.NET AJAX Beta2中，UpdateProgress控制項已經從“增值”CTP中移到了ASP.NET AJAX核心中。以下兩篇關於UpdateProgress的文章基本翻譯自ASP.NET AJAX官方網站。

 

主要內容

1．UpdateProgress控制項簡單使用

2．使用多個UpdateProgress控制項

 

一．UpdateProgress控制項簡單使用

1．建立一個Web頁面並切換到設計檢視。

2．在工具箱的AJAX Extensions標籤下，雙擊ScriptManager控制項添加到頁面中。

3．雙擊UpdatePanel控制項添加到頁面中。

4．雙擊UpdateProgress控制項添加到頁面中。

5．在UpdateProgress控制項中添加文本“Progress……”。

6．在UpdatePanel中添加一個Button和一個Label。

7．設定Label的Text屬性值為“Initial Page Rendered”。

8．雙擊Button添加Click事件。

9．在Buttond的Click事件處理中添加如下代碼，這裡人為的建立一個3秒鐘的延遲並顯示目前時間。

protected void Button1_Click(object sender, EventArgs e)

{
    // Introducing delay for demonstration.

    System.Threading.Thread.Sleep(3000);

    Label1.Text = "Page refreshed at " +

        DateTime.Now.ToString();

}

10．儲存並按Ctrl + F5運行。

11．單擊Button，介面如下：

二．使用多個UpdateProgress控制項

預設情況下，UpdageProgress控制項將顯示頁面上所有的UpdatePanel控制項更新的進度資訊，在以前版本的UpdateProgress中，我們無法設定UpdateProgress只顯示某一個UpdatePanel的更新，最新版本的UpdateProgress控制項提供了AssociatedUpdatePanelID屬性，可以指定UpdateProgress控制項顯示哪一個UpdatePanel控制項。下面的這個例子中UpdateProgrss控制項將只顯示它所在的UpdatePanel更新資訊。

1．建立一個Web頁面並切換到設計檢視。

2．在工具箱的AJAX Extensions標籤下，雙擊ScriptManager控制項添加到頁面中。

3．雙擊UpdatePanel控制項兩次添加兩個UpdatePanel控制項到頁面中。

4．在每一個UpdatePanel中分別添加一個Label和Button。

5．分別設定兩個Label的Text屬性值為“Initial Page Rendered”。（官方網站這步有些問題）

6．雙擊每一個Button控制項添加Click事件。

7．在Buttond的Click事件處理中添加如下代碼，這裡人為的建立一個3秒鐘的延遲並顯示目前時間。

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.

    System.Threading.Thread.Sleep(3000);

    Label1.Text = "Page refreshed at " +

        DateTime.Now.ToString();
}

protected void Button2_Click(object sender, EventArgs e)

{
    // Introducing delay for demonstration.

    System.Threading.Thread.Sleep(3000);

    Label2.Text = "Page refreshed at " +

        DateTime.Now.ToString();
}

8．切換到設計檢視。

9．在第一個UpdatePanel中添加UpdateProgrss控制項，並添加文本Panel1 updating…

10．在第二個UpdatePanel中添加UpdateProgress控制項，Panel2 updating…

11．儲存並按Ctrl + F5運行

12．單擊第一個UpdatePanel中的Button按鈕，進度資訊只顯示在第一個UpdatePanel中。

13．單擊第二個UpdatePanel中的Button按鈕，進度資訊只顯示在第二個UpdatePanel中。