3.2 UpdateProgress控件
當使用者點擊了UpdatePanel控件中會觸發Async-Postback動作的控件，或者點擊Triggers中所設定的控件而導致UpdatePanel控件刷新時，若整個刷新動作需耗費較長時間，整個網頁會呈現停滯狀態，使用者雖然仍可操作網頁上的其他控件，但感覺上總是不太對，尤其是這極可能會引發前面所提及的，遺失前次Async-Postback刷新動作的問題。這時設計師可利用ASP.NET AJAX所提供的UpdateProgress控件，提供一個進度行或信息，提醒用戶目前的狀態是正在處理要求中。使用UpdateProgress控件的步驟很簡單，請照著下列步驟做。
1. 創建一個新網頁，命名為UpdateProgressTest.aspx。
2. 在頁面中放入ScriptManager控件。
3. 放入UpdatePanel控件，命名為UpdatePanel1。
4. 將UpdatePanel1控件的UpdateMode設為Conditional。
5. 在UpdatePanel1控件中放入一個Button控件，命名為Button1。
6. 在Button1控件的Click事件中鍵入程序3-5的代碼。
7. 放一個UpdateProgress控件至網頁中（請放在UpdatePanel外面），命名為Update-Progress1，設定AssociatedUpdatePanelID屬性為UpdatePanel1。
8. 在UpdateProgress1控件中放入一個Label控件，命名為Label1，Text屬性設為“Updating...”。
9. 整體UI界面應如圖3-4所示。
圖3-4
程序3-5
Samples\3\AjaxDemo1\UpdateProgressTest.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Button1.Text = DateTime.Now.ToString();
System.Threading.Thread.Sleep(5000);
}
程序3-5的意思是，當Button按鈕被點擊時，等待5000ms（5秒）后才完成Async-Postback動作，對使用者來說，在點擊Button按鈕后網頁就會呈現停滯狀態，本例以此來模擬當Async-Postback動作需較長時間來完成的情況。完成后運行程序，點擊Button按鈕后，便可看到Updating...信息的顯示，如圖3-5所示。
圖3-5
在Async-Postback動作完成后，這個信息就會自動消失，這便是UpdateProgress控件的簡單用法。
加入Cacnel功能
視需求而定，使用者也許會有在Async-Postback期間取消整個動作的需求，此時除了利用UpdateProgress控件來顯示信息外，同時也必須提供取消動作的按鈕，ASP.NET AJAX并未提供簡便的方法來達到此需求，這得與ASP.NET AJAX提供的AJAX Client Framework合作方能達成，請照著下列步驟做。
1. 創建一個新網頁，命名為UpdateProgressWithCancel.aspx。
2. 在頁面中放入ScriptManager控件。
3. 放入UpdatePanel控件，命名為UpdatePanel1。
4. 將UpdatePanel1控件的UpdateMode設為Conditional。
5. 在UpdatePanel1控件中放入一個Button控件，命名為Button1。
6. 在Button1控件的Click事件中鍵入程序3-6的代碼。
7. 放一個UpdateProgress控件至網頁中（請放在UpdatePanel控件外面），命名為UpdateProgress1，設定AssociatedUpdatePanelID屬性為UpdatePanel1。
8. 在UpdateProgress1控件中放入一個Label控件，命名為Label1，Text屬性設為“Updating...”。
9. 切換到網頁源碼頁面，鍵入程序3-7 中粗體字的JavaScript程序代碼，放入一個HTML Button控件至UpdateProgress控件內。
程序3-6
Samples\3\AjaxDemo1\UpdateProgressWithCancel.aspx.cs
protected void Button1_Click(object sender, EventArgs e)
{
Button1.Text = DateTime.Now.ToString();
System.Threading.Thread.Sleep(5000);
}
程序3-7
Samples\3\AjaxDemo1\UpdateProgressWithCancel.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile=
"UpdateProgressWithCancel.aspx.cs" Inherits="UpdateProgressWithCancel" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script language=javascript>
//取得PageRequestManager對象,每一個ASP.NET AJAX頁面中會有唯一一個這種對象
//負責處理所有的Async-Postback要求
var prm = Sys.WebForms.PageRequestManager.getInstance();
//新增事件處理至PageRequestManger的initializeRequest事件,
//當Async-Postback發生時,此事件會被觸發,我們的InitRequest函數便會被運行.
prm.add_initializeRequest(InitRequest);
//新增事件處理至PageRquestManager的endRequest事件,
//當Async-Postback完成時,此事件會被處發,我們的EndRequest函數便會被運行.
prm.add_endRequest(EndRequest);
function InitRequest(sender,args)
{
//顯示出UpdateProgress1控件
document.getElementById("UpdateProgress1").style.display="block";
}
function EndRequest(sender,args)
{
//隱藏UpdateProgress1控件
document.getElementById("UpdateProgress1").style.display="none";
}
//用于取消Async-Postback動作
function CancelClick()
{
//當處于Async-Postback動作時,get_IsInAsyncPostback函數會回傳true,
//此時調用abortPostback函數便會取消Async-Postback動作.
if (prm.get_isInAsyncPostback()) {
prm.abortPostback();
}
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=
"Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick=
"Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Label ID="Label1" runat="server" Text="Updating...."></asp:Label>
<input type=button name="btnCancel" value="Cacnel" onclick="CancelClick()"/>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
運行此程序并點擊Button按鈕后，會發現“Updating...”信息已經顯示，旁邊還有個Cancel按鈕，點擊后便可取消這整個Async-Postback動作，如圖3-6所示。
圖3-6
請注意，具體來說，調用abortPostback函數的用意是放棄Async-Postback時的刷新UpdatePanel控件動作，對于Server端來說，整個Async-Postback動作還是會運行完，所以用取消這個字眼其實并不太正確，應該說是放棄Async-Postback后的刷新動作較為貼切。