在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中。以下两篇关于UpdateProgress的文章基本翻译自ASP.NET AJAX官方网站。
protected
void
Button1_Click(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
// Introducing delay for demonstration.
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
System.Threading.Thread.Sleep(3000);
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
Label1.Text = "Page refreshed at " +
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
DateTime.Now.ToString();
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
}
protected
void
Button1_Click(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
// Introducing delay for demonstration.
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
System.Threading.Thread.Sleep(3000);
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
Label1.Text = "Page refreshed at " +
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
DateTime.Now.ToString();
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
protected
void
Button2_Click(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
// Introducing delay for demonstration.
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
System.Threading.Thread.Sleep(3000);
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
Label2.Text = "Page refreshed at " +
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
DateTime.Now.ToString();
}
主要内容
1
.UpdateProgress控件简单使用
2
.使用多个UpdateProgress控件
一.UpdateProgress控件简单使用
1
.创建一个Web页面并切换到设计视图。
2
.在工具箱的AJAX Extensions标签下,双击ScriptManager控件添加到页面中。
3
.双击UpdatePanel控件添加到页面中。
![](https://i-blog.csdnimg.cn/blog_migrate/71e634f1c83b3e5f5a58622bb22a1719.jpeg)
4
.双击UpdateProgress控件添加到页面中。
5
.在UpdateProgress控件中添加文本“Progress……”。
![](https://i-blog.csdnimg.cn/blog_migrate/7ad3aff5351c9465faa525ea3f6f36a8.jpeg)
6
.在UpdatePanel中添加一个Button和一个Label。
7
.设置Label的Text属性值为“Initial Page Rendered”。
![](https://i-blog.csdnimg.cn/blog_migrate/39ca73856abb045ef72e62e352035052.jpeg)
8
.双击Button添加Click事件。
9
.在Buttond的Click事件处理中添加如下代码,这里人为的创建一个3秒钟的延迟并显示当前时间。
.保存并按Ctrl + F5运行。
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
10
11
.单击Button,界面如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ef75b2bed30c8f00f16a4042297bacf3.gif)
二.使用多个UpdateProgress控件
默认情况下,UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息,在以前版本的UpdateProgress中,我们无法设置UpdateProgress只显示某一个UpdatePanel的更新,最新版本的UpdateProgress控件提供了AssociatedUpdatePanelID属性,可以指定UpdateProgress控件显示哪一个UpdatePanel控件。下面的这个例子中UpdateProgrss控件将只显示它所在的UpdatePanel更新信息。
1
.创建一个Web页面并切换到设计视图。
2
.在工具箱的AJAX Extensions标签下,双击ScriptManager控件添加到页面中。
3
.双击UpdatePanel控件两次添加两个UpdatePanel控件到页面中。
![](https://i-blog.csdnimg.cn/blog_migrate/8e4c6545cd251d7802ca30b0ccea5bcc.jpeg)
4
.在每一个UpdatePanel中分别添加一个Label和Button。
5
.分别设置两个Label的Text属性值为“Initial Page Rendered”。(官方网站这步有些问题)
![](https://i-blog.csdnimg.cn/blog_migrate/5e4931822b523bfdd711c561cabaa6f6.jpeg)
6
.双击每一个Button控件添加Click事件。
7
.在Buttond的Click事件处理中添加如下代码,这里人为的创建一个3秒钟的延迟并显示当前时间。
.切换到设计视图。
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
8
9
.在第一个UpdatePanel中添加UpdateProgrss控件,并添加文本Panel1 updating…
![](https://i-blog.csdnimg.cn/blog_migrate/c284e5aca60c3fa4ee0889f4c9f191e2.jpeg)
10
.在第二个UpdatePanel中添加UpdateProgress控件,Panel2 updating…
![](https://i-blog.csdnimg.cn/blog_migrate/2c2f194a5895cc9935caf90b8515e479.jpeg)
11
.保存并按Ctrl + F5运行
12
.单击第一个UpdatePanel中的Button按钮,进度信息只显示在第一个UpdatePanel中。
![](https://i-blog.csdnimg.cn/blog_migrate/49fdb2c6d54f1077875895898cbf1fb8.gif)
13
.单击第二个UpdatePanel中的Button按钮,进度信息只显示在第二个UpdatePanel中。
![](https://i-blog.csdnimg.cn/blog_migrate/541cc2f94af473de9f3d53f0bb3ce37c.gif)