ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍

ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中。以下两篇关于UpdateProgress的文章基本翻译自ASP.NET AJAX官方网站。

 

主要内容

1UpdateProgress控件简单使用

2.使用多个UpdateProgress控件

 

一.UpdateProgress控件简单使用

1.创建一个Web页面并切换到设计视图。

2.在工具箱的AJAX Extensions标签下,双击ScriptManager控件添加到页面中。

3.双击UpdatePanel控件添加到页面中。

4.双击UpdateProgress控件添加到页面中。

5.在UpdateProgress控件中添加文本“Progress……”。

6.在UpdatePanel中添加一个Button和一个Label

7.设置LabelText属性值为“Initial Page Rendered”。

8.双击Button添加Click事件。

9.在ButtondClick事件处理中添加如下代码,这里人为的创建一个3秒钟的延迟并显示当前时间。

protected void Button1_Click(object sender, EventArgs e)

{
    
// Introducing delay for demonstration.

    System.Threading.Thread.Sleep(
3000);

    Label1.Text 
= "Page refreshed at " +

        DateTime.Now.ToString();

}

10.保存并按Ctrl + F5运行。

11.单击Button,界面如下:

二.使用多个UpdateProgress控件

默认情况下,UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息,在以前版本的UpdateProgress中,我们无法设置UpdateProgress只显示某一个UpdatePanel的更新,最新版本的UpdateProgress控件提供了AssociatedUpdatePanelID属性,可以指定UpdateProgress控件显示哪一个UpdatePanel控件。下面的这个例子中UpdateProgrss控件将只显示它所在的UpdatePanel更新信息。

1.创建一个Web页面并切换到设计视图。

2.在工具箱的AJAX Extensions标签下,双击ScriptManager控件添加到页面中。

3.双击UpdatePanel控件两次添加两个UpdatePanel控件到页面中。

4.在每一个UpdatePanel中分别添加一个LabelButton

5.分别设置两个LabelText属性值为“Initial Page Rendered”。(官方网站这步有些问题)

6.双击每一个Button控件添加Click事件。

7.在ButtondClick事件处理中添加如下代码,这里人为的创建一个3秒钟的延迟并显示当前时间。

protected void Button1_Click(object sender, EventArgs e)
{
    
// Introducing delay for demonstration.

    System.Threading.Thread.Sleep(
3000);

    Label1.Text 
= "Page refreshed at " +

        DateTime.Now.ToString();
}


protected void Button2_Click(object sender, EventArgs e)

{
    
// Introducing delay for demonstration.

    System.Threading.Thread.Sleep(
3000);

    Label2.Text 
= "Page refreshed at " +

        DateTime.Now.ToString();
}

8.切换到设计视图。

9.在第一个UpdatePanel中添加UpdateProgrss控件,并添加文本Panel1 updating…

10.在第二个UpdatePanel中添加UpdateProgress控件,Panel2 updating…

11.保存并按Ctrl + F5运行

12.单击第一个UpdatePanel中的Button按钮,进度信息只显示在第一个UpdatePanel中。

13.单击第二个UpdatePanel中的Button按钮,进度信息只显示在第二个UpdatePanel中。

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2006-11-12 15:57 TerryLee 阅读(14633) 评论(76)  编辑 收藏 所属分类: ASP.NETAJAX

  回复  引用    
#1楼 2006-11-12 20:29 | james.dong[匿名] [未注册用户]
简单易懂,好文章!

  回复  引用  查看    
#2楼 2006-11-12 21:57 | Hunts.C      
Initial Page Rendered 中的 ‘Rendered’怎么翻译?
  回复  引用    
#3楼 2006-11-12 22:31 | Jacky_xu[匿名] [未注册用户]
一直在学习大哥的系列。
先谢谢了
  回复  引用    
#4楼 2006-11-12 22:48 | King[匿名] [未注册用户]
Thanks!
  回复  引用  查看    
#5楼 [楼主]2006-11-12 23:03 | TerryLee      
@james.dong[匿名]
翻译自官方文档
  回复  引用  查看    
#6楼 [楼主]2006-11-12 23:04 | TerryLee      
@Jacky_xu[匿名]
@King[匿名]
客气:)
  回复  引用  查看    
#7楼 [楼主]2006-11-12 23:07 | TerryLee      
@Hunts.C
单独一个词拿出来不好翻译,不知道翻译成什么比较好
  回复  引用  查看    
#8楼 2006-11-13 10:58 | KiddLee      
我在试第一个例子的时候js报错:“'Sys'未定义”,所以也没有出现Ajax的效果
  回复  引用  查看    
#9楼 2006-11-13 11:25 | KiddLee      
好像装完Beta2版的,查看以前的程序都出问题了,都出现了“'Sys'未定义”的问题
  回复  引用    
#10楼 2006-11-13 16:36 | charming[匿名] [未注册用户]
签到~~
  回复  引用    
#11楼 2006-11-13 17:46 | 华剑香 [未注册用户]
不需要设置Triggers了吗?
  回复  引用  查看    
#13楼 2006-11-13 18:35 | 烈域      
救命啊,下面是个自定义控件,放在aspx页里面能显示数据,但ajax不起作用了,整个页面就刷新了。
在vs.net环境里,这个自定义控件出错信息为:呈现控件出错,值不能为空,参数名:child,我就没找到这个参数名啊。
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False" BorderStyle="Solid" GridLines="Horizontal" Width="100%" EmptyDataText="还未添加任何数据">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img border="0" src='<%=getPic%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<a class='<%=getNewsCss %>' href='news/<%# DataBinder.Eval(Container.DataItem, "url") %>'
title='<%# DataBinder.Eval(Container.DataItem, "fullTitle") %>' target=_blank><%# DataBinder.Eval(Container.DataItem, "title") %></a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ifNew" >
<ItemStyle CssClass='<%=getNewCss %>' />
</asp:BoundField>
<asp:BoundField DataField="addtime" DataFormatString="[{0:yyyy/M/d}]" HtmlEncode="False">
<ItemStyle CssClass='<%=getDateCss %>' />
</asp:BoundField>

</Columns>
</asp:GridView>

<cc1:PaginationBar ID="PaginationBar1" runat="server" OnChangePageIndex="PaginationBar1_ChangePageIndex" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PaginationBar1" EventName="ChangePageIndex" />
</Triggers>
</asp:UpdatePanel>


<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div style="background-color:Yellow; color:Red; font-size:smaller">数据更新中,请稍后......</div>
</ProgressTemplate>
</asp:UpdateProgress>
  回复  引用  查看    
#14楼 [楼主]2006-11-13 19:26 | TerryLee      
@烈域
你的自定义控件中PaginationBar 都有哪些控件?
  回复  引用  查看    
#15楼 2006-11-13 21:30 | 空空鱼      
@KiddLee
记得看过个说明,b2里ScriptManage用的异步加到js,在js最后加句
if(Sys&&Sys.Application)
{
Sys.Application.notifyScriptLoaded();
}
 
否则出个Sys.ScriptLoadFailedException。
 
PS:不确定是否是这样写的,原文找不到了......,希望对你有用
 

  回复  引用  查看    
#16楼 2006-11-14 08:28 | KiddLee      
@空空鱼
谢谢你,我再试试,不过现在好像因为装插件装的VS2005的项目模板又没了
  回复  引用    
#17楼 2006-11-14 09:30 | minghui227 [未注册用户]
为什么我的AJAX Extensions 里没有UpdateProgress谁能告诉我下???
  回复  引用  查看    
#18楼 2006-11-14 10:10 | 烈域      
就是个分页控件了,以前用atlas都可以的啊。

换了个版本就不行了。AJAX Extensions
  回复  引用  查看    
#19楼 2006-11-14 10:15 | 烈域      
@minghui227
工具栏里添加这个控件项。
  回复  引用  查看    
#20楼 2006-11-14 12:11 | 烈域      
发现了 ,我的也是sys报错。
  回复  引用  查看    
#21楼 [楼主]2006-11-15 12:51 | TerryLee      
@minghui227
下载Beta2里面有
  回复  引用    
#22楼 2006-11-15 15:48 | arthur[匿名] [未注册用户]
TerryLee, 我装了Beta2,还是没找到UpdateProgress,不知道什么地方没操作对
  回复  引用  查看    
#23楼 [楼主]2006-11-15 20:06 | TerryLee      
@arthur[匿名]
好像没什么了吧,直接安装就可以了,不需要做什么设置啊
  回复  引用  查看    
#24楼 2006-11-15 21:01 | KiddLee      
@arthur[匿名]
这个问题我也遇到过,手动添加控件就可以了
  回复  引用    
#25楼 2006-11-16 20:38 | hm [未注册用户]
上面的例子我run了一下,显示的着么有点不一样,我周围没有边框的也
  回复  引用  查看    
#26楼 2006-11-17 12:39 | KiddLee      
找到不能解释js中的Sys的问题所在了,在建立项目的时候要建立一个ASP.NET Ajax-Enable Web Site。我原来建立了一个普通的ASP.NET Web Site就出问题了
  回复  引用  查看    
#27楼 [楼主]2006-11-18 18:05 | TerryLee      
@KiddLee
-_-
新建ASP.NET Web Site也可以,只是需要对Web.config进行配置
  回复  引用    
#28楼 2006-11-19 09:49 | p [未注册用户]
TerryLee
我怎么找不到UpdateProgress控件在哪里呢?

  回复  引用    
#29楼 2006-11-19 11:05 | p [未注册用户]
找不到的UpdateProgress的兄弟,你添加下面这个dll进工具箱就有了。我刚刚才添加。
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\Microsoft.Web.Extensions.dll
  回复  引用  查看    
#30楼 [楼主]2006-11-19 21:42 | TerryLee      
@p
一般情况下安装后,ToolBox中就有了

如果没有的话只好自行添加
  回复  引用    
#31楼 2006-11-20 14:08 | 云出岫 [未注册用户]
可是我已经添加了C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\下的所有dll 文件,结果在使用updateprogress时仍然说找不到,很是奇怪,我的工具箱中有这个的阿。
  回复  引用  查看    
#32楼 2006-11-20 14:40 | ColdDog      
@TerryLee
上面例子中,怎么没设置UpdateProgress控件的AssociatedUpdatePanelID属性呢,呵呵...另外,是不是把UpdateProgress控件放在一个UpdatePanel控件中,就可以直接指定UpdateProgress控件只更新它所在的UpdatePanel控件阿?
  回复  引用  查看    
#33楼 2006-11-22 11:36 | 烈域      
我想在打开页面加载数据的时候就使用UpdateProgress,请问如何实现?
  回复  引用    
#34楼 2006-11-30 17:43 | 冰[匿名] [未注册用户]
把UpdateProgress放到各自的UpdatePanel里
如果不设AssociatedUpdatePanelID,则click后,两个UpdateProgress都出来
如果up1设置的AssociatedUpdatePanelID,而up2没设置
则,点button1则除两个UpdateProgress,点button2,则只出up2自己的
正好反了。
  回复  引用    
#35楼 2006-11-30 17:47 | 冰[匿名] [未注册用户]
不好意思,上面说错了
  回复  引用    
#36楼 2006-11-30 17:59 | 冰[匿名] [未注册用户]
UP1,BTN1,LBL1,UpdateProgress1
UP2,BTN2,LBL2,UpdateProgress2
UP3,BTN3,LBL3,UpdateProgress3
-----------
UpdateProgress2设置AssociatedUpdatePanelID为UP2
其他up设置。
--------
点击BTN1,或者BTN3,结果是相同的,UP1,UP3的UpdateProgress都出现
点击BTN2,三个UpdateProgress都出现。
======================
如果是
UpdateProgress1设置AssociatedUpdatePanelID为UP1
UpdateProgress2设置AssociatedUpdatePanelID为UP2
UpdateProgress3未设置
-------------
点击BTN1,结果是UpdateProgress1和UpdateProgress3出现
点击BTN2,结果是UpdateProgress2和UpdateProgress3出现
点击BTN3,结果是只有UpdateProgress3出现
=========
不知道该怎么解释了,总好是一个都不漏设置了。
  回复  引用    
#37楼 2006-12-13 09:09 | deria [未注册用户]
@TerryLee

-_-
新建ASP.NET Web Site也可以,只是需要对Web.config进行配置

如何设置啊?



  回复  引用    
#38楼 2006-12-13 16:00 | lihaojie [未注册用户]
各位大哥:请帮忙啊!
我双击
UpdateProgress控件到页面时,提示

"无法创建控件,因为visual studio 无法在控件程序集中找到该控件的类型."

请问是怎么一回事啊???
  回复  引用  查看    
#39楼 [楼主]2006-12-13 20:11 | TerryLee      
@lihaojie
下载最新的ASP.NET AJAX Beta2版本安装一下
  回复  引用    
#40楼 2006-12-14 14:16 | lihaojie [未注册用户]
多谢TerryLee 老大,问题重新安装后已经解决了
  回复  引用  查看    
#41楼 [楼主]2006-12-15 00:00 | TerryLee      
@lihaojie
:)
  回复  引用  查看    
#42楼 2006-12-24 10:53 | 丹心猪(Dansinge)      
学习到这
  回复  引用  查看    
#43楼 [楼主]2006-12-24 15:52 | TerryLee      
@丹心猪(Dansinge)
呵呵,坚持哦
  回复  引用    
#44楼 2006-12-29 10:04 | 助燃 [未注册用户]
我最近卸载了beta2版本,重新安装了rc版本,创建控件的时候也提示"无法创建控件,因为visual studio 无法在控件程序集中找到该控件的类型." 请问该如何解决?
  回复  引用    
#45楼 2006-12-29 15:44 | lihaojie [未注册用户]
TerryLee 老大,什么时候继续讲这一系列的课程的啊?好期待啊!近来是不是太忙了?没有办法继续讲课了啊?
  回复  引用  查看    
#46楼 2007-01-17 17:30 | 孤叶(学习.net框架)      
要是能讲点原理,那就BF了
  回复  引用  查看    
#47楼 2007-02-05 19:35 | 吴杰      
很有帮助
  回复  引用    
#48楼 2007-03-07 13:31 | lonelyghost [未注册用户]
ScriptManager1

UpdatePanel1

UpdateProgress1


我有个问题 (数据显示用gridview)
页面一加载的时候出现---数据正在加载........---加载完成后显示数据;
也就是只显示这几个字,(不显示gridview控件)

页面上我还有一个button控件,我要重新加载数据,就点button控件,这个时候我要隐藏gridview控件,只显示---数据正在加载....-----这几个字

要如何写代码啊

Email: luowenziliao@yahoo.com.cn
  回复  引用    
#49楼 2007-04-22 06:00 | df [未注册用户]
@hm
我也发现这个情况。老大们,谁给解解闷儿?
  回复  引用    
#50楼 2007-04-22 06:01 | df [未注册用户]
@hm
# re: ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍 2006-11-16 20:38 hm
上面的例子我run了一下,显示的着么有点不一样,我周围没有边框的也
--------------------------
我也是啊。怎么回事啊。
  回复  引用  查看    
#51楼 2007-04-24 22:40 | 逄瑞锋      
学习了
  回复  引用    
#52楼 2007-04-29 17:49 | UJ [未注册用户]
具体内容见网络:http://www.sznfss.com

url=http://www.asiaciw.com]南风盛世品牌设计公司商标设计[/url][url=http://www.asiaciw.com/index.htm]企业商标设计[/url][url=http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com]深圳广告公司[/url][url=http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com/index.htm]深圳广告公司[/url][/url][url=http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com]深圳广告公司[/url][url=http://www.szggch.com]深圳广告公司[/url][url=http://www.szccbo.com]南风盛世品牌设计公司[/url][url=http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com/index.htm]企业标志设计[/url][url=http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com">http://www.ad9989.com]深圳广告设计公司[/url]




  回复  引用    
#53楼 2007-06-29 10:42 | aaa [未注册用户]
我安装了ASPAJAXExtSetup.msi,
当从工具栏往页面拖曳时提示"无法创建控件,因为visual studio 无法在控件程序集中找到该控件的类型." 请问该如何解决?
  回复  引用    
#54楼 2007-07-24 16:47 | netboy [未注册用户]
老大,为什么我的多个updatepanel时两个UpdateProgress同时显示了啊
  回复  引用    
#55楼 2007-07-24 16:48 | netboy [未注册用户]
老大,为什么我实验两个updatepanel时两个UpdateProgress同时显示了啊
  回复  引用  查看    
#56楼 2007-08-22 22:23 | 淡泊江湖      
@netboy
呵呵,我也发现了!可能是LZ忘记嘱咐这里了:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
//加上AssociatedUpdatePanelID="UpdatePanel1"

<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
//加上AssociatedUpdatePanelID="UpdatePanel2"
  回复  引用    
#57楼 2007-10-18 14:19 | xuejun [未注册用户]
真好,很受用,谢谢!
  回复  引用    
#58楼 2007-10-20 10:16 | testtest [未注册用户]
不知道TerryLee页面中UpdaePanel周围的圆角边框是怎么做出来的。我照着文中的步骤作,并没有边框阿
  回复  引用    
#59楼 2007-12-08 14:21 | UCI [未注册用户]
请欣赏:
www.nfyxtime.com
www.szarts.com
www.civisi.com
www.chinalhcz.com
www.sz4a.cn
www.chinauci.cn
  回复  引用    
#60楼 2007-12-10 08:26 | hangeltao [未注册用户]
sys报错或是AJAX无效的朋友们,是不是没有通过模板
Ajax_Enabled WebSite来建立网站?
我们学校机房也出现过这种情况,安装完成Ajax Extensions 之后,没有出现Ajax Enabled WebSite,但工具箱中出现Ajax Extensions,重新定主模板目录,再用模板建立网站,运行无错。。。。。。

本人也是学习中,呵呵。。。。。。
  回复  引用    
#61楼 2008-02-25 10:01 | 顺z [未注册用户]
--引用--------------------------------------------------
KiddLee: 我在试第一个例子的时候js报错:“'Sys'未定义”,所以也没有出现Ajax的效果
--------------------------------------------------------
我以前也是这样。但是我重装后。重启IIS后就没了。。

  回复  引用    
#62楼 2008-06-19 13:31 | jazz [未注册用户]
李大哥,你好,我看到这里就做不下去了,因为我的控件上没有这个控件“UpdateProgress”,还要装什么东西吗?请指教。
  回复  引用    
#63楼 2008-07-01 15:23 | 卧龙 [未注册用户]
太好了,这个博客真的是太好了,支持一下,呵呵
  回复  引用  查看    
#64楼 2008-07-07 14:51 | 雪涛      
good.