今天將介紹的是, 如果頁面需要在后台執行很長時間怎么辦, 通過 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="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 的第一個參數 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/, 建議全屏觀看.