AJAX笔记之三:UpdateProgress

AJAX笔记之三:UpdateProgress

UpdateProgress 的使用方法非常简单, 但是却非常有用. 以下先演示它的用法:

<1>. 向页面添加一个updatePanel, 并在里面放一个label 和一个button .
<2>.添加一个UpdateProgress 控件, 并把它的AssociatedUpdatePanelID 属性设置为以上updatePanel的名称.
<3>.切换到"源" 视图, 编辑UpdateProgress 的ProgressTemplate 节点:

     < asp:UpdateProgress  AssociatedUpdatePanelID ="upInq"  ID ="upgCUser"  runat ="server"   >
         < ProgressTemplate >
             < img  id ="imgUpg"  alt =""  src ="resources/wait.gif"  runat ="server"   />< span  style ="COLOR: #ff0000" > 正在获取数据  </ span >
         </ ProgressTemplate >
     </ asp:UpdateProgress >

<4>设定button的点击事件代码:
system.threading.thread.sleep(4000);
<5>好啦, 运行项目, 点击按钮, 就会发现一个旋转的小图标(当然, 取决于你的图片), 和一串红色的字: 正在获取数据, 4秒后, 自动消失.

需要说明的是: 图片是不一定需要的, 也可以只有文字, 在ProgressTemplate 之间的内容是可以随意编辑的, 可以是任意的元素. 另外, 它的DisplayAfter 属性的默认值500 就是比较合适的值, 不建议修改. 这是以毫秒为单位的等待的时间, 当超过这个时间, 它就显示出来, 当updatePanel 更新完毕, 它就隐藏.  所以, 如果把这个时间设置得过短, 每次都会看到UpdateProgress 闪来闪去, 非常影响用户体验.

如果是局域网应用, 服务器总是会很快返回, 就没有必要使用这个控件.