今天将介绍的是, 如果页面需要在后台执行很长时间怎么办, 通过 ResponseProgress

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

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

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

本文将说明如何使用 ResponseProgress

  * 准备

  * 一个简单的例子

  * 自定义模板

  * 自定义函数

element ui过渡 element ui progress_javascript

element ui过渡 element ui progress_ViewUI_02

准备

请确保已经在 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

调用 ResponseProgress 的 Set

最后, 可以通过 Hide 方法来隐藏已经显示的内容. 代码中, 还调用了 Thread 的 Sleep

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

自定义模板

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



<body>
<center>
<div id="__progress"
            style="width: 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="width: 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

最后, 将这 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/, 建议全屏观看.