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

阅读更多

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

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

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

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

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

<scriptrunat="server">
protected
voidButton1_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(
3000);
Label1.Text
=DateTime.Now.ToString();
}
script>

<html>
<headrunat="server">
<title>UpdateProgressTutorialtitle>
<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="Button2"runat="server"OnClick="Button1_Click"Text="refresh"/>
ContentTemplate>
asp:UpdatePanel>

div>
<asp:UpdateProgressID="UpdateProgress1"runat="server">
<ProgressTemplate>
Processing
<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">
protected
voidButton1_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(
3000);
Label1.Text
=DateTime.Now.ToString();
}
protected
voidPanel1Trigger_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(
3000);
Label1.Text
=DateTime.Now.ToString()+"-trigger";
}
script>

<html>
<headid="Head1"runat="server">
<title>UpdateProgressTutorialtitle>
<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>

你可能感兴趣的:([转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程)