使用 JQueryElement ResponseProgress 显示页面执行进度

今天将介绍的是, 如果页面需要在后台执行很长时间怎么办, 通过 ResponseProgress 你可以向用户显示后台页面的执行进度..

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/ResponseProgress

请到 Download 下载资源的 JQueryElement 示例下载一节下载示例代码, 目录 /responseprogress/Default.aspx.

本文将说明如何使用 ResponseProgress 类来显示页面的加载进度:

* 准备

* 一个简单的例子

* 自定义模板

* 自定义函数

准备

请确保已经在 Download 下载资源中下载 JQueryElement 最新的版本.

请在代码中引用如下的命名空间:

using zoyobar.shared.panzer.web;

一个简单的例子

在页面的 Page_Load 方法中, 可以创建 ResponseProgress 类并调用 Register, Set, Hide 方法来显示页面载入进度:

using System.Threading;
using zoyobar.shared.panzer.web;

public partial class ResponseProgress_DefaultTemplate : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        ResponseProgress progress = new ResponseProgress ( this.Response );

        progress.Register ( );

        progress.Set ( 1, "欢迎来到这里" );
        Thread.Sleep ( 2000 );

        progress.Set ( 100, "页面载入完成" );
        Thread.Sleep ( 2000 );
        progress.Hide ( );
    }

}

在上面的示例中, 为 ResponseProgress 传递了一个 HttpResponse 对象作为参数.

在 ResponseProgress 对象创建之后, 需要首先调用 Register 方法来将一些 html 和 javascript 函数注册到当前页面中. Register 方法会设置 HttpResponse 对象的 BufferOutput 属性为 false.

调用 ResponseProgress 的 Set 方法来设置需要显示给用户的内容, 参数 percent 表示载入的进度, 如果小于 0 则不显示进度, 参数 message 表示提示消息, 如果为 null 则不显示.

最后, 可以通过 Hide 方法来隐藏已经显示的内容. 代码中, 还调用了 Thread 的 Sleep 方法, 这可以确保在测试时看到进度消息.

以上提到的 3 个方法, 都会在结束时调用 HttpResponse 对象的 Flush 和 ClearContent 方法.

自定义模板

可以定义自己的模板, 请看下面的 CustomTemplate.htm 文件:

<body>
    <center>
        <div id="__progress"
            style=" 400px; padding: 10px">
            <div id="__message"
                style="font-size: x-large; color: Green; text-align: left">
                ...
            </div>
            <div
                style="font-size: xx-small; color: Blue; text-align: right;">
                <span id="__percent"></span>
            </div>
        </div>
    </center>
</body>

如果没有自定义函数, 那么需要在模板中包含 id 为 __progress, __message 和 __percent 的 3 个元素, 其中 id 为 __message 的元素用于显示消息, id 为 __percent 的元素用于显示百分比. 而整个的模板需要一个 body 元素.

在创建 ResponseProgress类时, 需要传递自定义模板的路径:

ResponseProgress progress =
    new ResponseProgress ( this.Response,
    @"~/responseprogress/CustomTemplate.htm"
    );

自定义函数

除了自定义模板, 也可以自定义函数:

<body>
    <center>
        <div id="bar"
            style=" 500px; padding: 10px">
            <div id="msg"
                style="font-size: x-large; color: Red; text-align: left">
                ...
            </div>
            <div
                style="font-size: xx-small; color: Gray; text-align: right;">
                <span id="per"></span>
            </div>
        </div>
    </center>
</body>
<script type="text/javascript">
    function showBar(data) {
        document.getElementById('msg').innerText =
            (null == data.message ? '没有消息' :
                (data.message + ' ' + data.message.length.toString() + ' 个字符'));

        document.getElementById('per').innerText =
            (null == data.percent ? '没有百分比' : data.percent.toString() + ' per');
    }
    function hideBar() {
        document.getElementById('bar').style.display = 'none';
    }
</script>

一旦定义了自己的函数, 那么不需要再定义 id 为 __progress, __message 和 __percent 的元素. 而函数名称也不是固定的, 上面的模板中, 函数 showBar 用来显示进度信息, 函数 hideBar 用来隐藏进度信息.

函数 hideBar 比较简单, 隐藏了 id 为 bar 的 div 元素. 函数 showBar 的第一个参数 data 包含了进度信息, data 的 message 属性表示提示消息, percent 属性表示百分比.

最后, 将这 2 个函数的名字传递给 ResponseProgress即可:

ResponseProgress progress =
    new ResponseProgress ( this.Response,
    @"~/responseprogress/CustomTemplate.htm",
    "showBar", "hideBar"
    );

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/J3KX4SDMOjk/, 建议全屏观看.