本文转自： http://msdn.microsoft.com/zh-cn/library/bb386518.aspx
在本教程中，将通过编写 ECMAScript (JavaScript) 代码来扩展具有客户端行为的 UpdateProgress 控件。
您的代码将使用属于 Microsoft AJAX Library 的一部分的 PageRequestManager 类。
在 UpdateProgress 控件中，您将添加一个使用户能够取消异步回发的按钮。
作为此任务的一部分，您将使用客户端脚本来显示或隐藏进度消息。
在客户端脚本中取消异步回发
最终代码1：
Code<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
</script>
<html >
<head runat="server">
<title>UpdateProgress Tutorial</title>
<style type="text/css">
#UpdatePanel1 {
width:200px; height:100px;
border: 1px solid gray;
}
#UpdateProgress1 {
width:200px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
// -->
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="refresh" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Processing
<input id="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
使用客户端脚本显示更新进度
在下列方案中，将不会自动显示 UpdateProgress 控件：
UpdateProgress 控件与某个特定的更新面板相关联，但异步回发是从一个未位于该更新面板内的控件引发的。
UpdateProgress 控件不与任何 UpdatePanel 控件相关联，
并且异步回发不是从一个既不位于 UpdatePanel 内部也不是一个触发器的控件引发。
例如，使用代码执行更新。
下面的过程演示如何在异步回发并非来自关联的 UpdatePanel 控件内部时显示 UpdateProgress 控件。
此过程假定您已完成本教程的第一部分。
最终代码2：
Code<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
protected void Panel1Trigger_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString() + " - trigger";
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdateProgress Tutorial</title>
<style type="text/css">
#UpdatePanel1 {
width:200px; height:100px;
border: 1px solid gray;
}
#UpdateProgress1 {
width:200px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'block';
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'none';
}
}
// -->
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="refresh" OnClick="Button1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Panel1Trigger" runat="server" Text="Trigger" OnClick="Panel1Trigger_Click" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Processing
<input id="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>