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后的刷新动作较为贴切。