[转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程

最新推荐文章于 2025-09-09 10:04:17 发布

iteye_20105

最新推荐文章于 2025-09-09 10:04:17 发布

阅读量90

点赞数

文章标签： c# xhtml javascript ViewUI

本文介绍如何使用ASP.NET AJAX UpdateProgress控件与JavaScript扩展客户端行为，实现异步回发取消功能及自定义显示进度提示。

本文转自： http://msdn.microsoft.com/zh-cn/library/bb386518.aspx

在本教程中，将通过编写 ECMAScript (JavaScript) 代码来扩展具有客户端行为的 UpdateProgress 控件。
您的代码将使用属于 Microsoft AJAX Library 的一部分的 PageRequestManager 类。
在 UpdateProgress 控件中，您将添加一个使用户能够取消异步回发的按钮。
作为此任务的一部分，您将使用客户端脚本来显示或隐藏进度消息。

在客户端脚本中取消异步回发
最终代码1：

<inputid="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()"/>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>

使用客户端脚本显示更新进度
在下列方案中，将不会自动显示 UpdateProgress 控件：
UpdateProgress 控件与某个特定的更新面板相关联，但异步回发是从一个未位于该更新面板内的控件引发的。

UpdateProgress 控件不与任何 UpdatePanel 控件相关联，
并且异步回发不是从一个既不位于 UpdatePanel 内部也不是一个触发器的控件引发。
例如，使用代码执行更新。

下面的过程演示如何在异步回发并非来自关联的 UpdatePanel 控件内部时显示 UpdateProgress 控件。
此过程假定您已完成本教程的第一部分。

最终代码2：

Code
<%@PageLanguage="C#"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<scriptrunat="server">
protectedvoidButton1_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(3000);
Label1.Text=DateTime.Now.ToString();
}
protectedvoidPanel1Trigger_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(3000);
Label1.Text=DateTime.Now.ToString()+"-trigger";
}
</script>

<html>
<headid="Head1"runat="server">
<title>UpdateProgressTutorial</title>
<styletype="text/css">
#UpdatePanel1{
width:200px;height:100px;
border:1pxsolidgray;
}
#UpdateProgress1{
width:200px;background-color:#FFC080;
bottom:0%;left:0px;position:absolute;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<scriptlanguage="javascript"type="text/javascript">

</script>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="Panelrendered."></asp:Label><br/>
<asp:ButtonID="Button1"runat="server"Text="refresh"OnClick="Button1_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="Panel1Trigger"/>
</Triggers>
</asp:UpdatePanel>
<asp:ButtonID="Panel1Trigger"runat="server"Text="Trigger"OnClick="Panel1Trigger_Click"/>
<asp:UpdateProgressID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Processing

<inputid="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()"/>
</ProgressTemplate>
</asp:UpdateProgress>

</div>
</form>
</body>
</html>