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 闪来闪去, 非常影响用户体验.

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