WEB應(yīng)用程序中的進(jìn)度條
發(fā)表時(shí)間：2024-06-15 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]WEB應(yīng)用程序中的進(jìn)度條Julien Cheyssial 寫作于2003/10/01Joise.LI翻譯并修改于2004-4-2 寫在前面： 原文是我在需要使用進(jìn)度條時(shí)找到的一篇文章，講解詳細(xì)并附有實(shí)例。我在原文的基礎(chǔ)上加上了自己的修改：增加了線程處理并且將進(jìn)度條的使用放到了子線程中處...
WEB應(yīng)用程序中的進(jìn)度條
Julien Cheyssial 寫作于2003/10/01
Joise.LI翻譯并修改于2004-4-2
寫在前面：
原文是我在需要使用進(jìn)度條時(shí)找到的一篇文章，講解詳細(xì)并附有實(shí)例。我在原文的基礎(chǔ)上加上了自己的修改：增加了線程處理并且將進(jìn)度條的使用放到了子線程中處理。這是我第一次翻譯文章，敬請(qǐng)各位指正。原文見于http://www.myblogroll.com/Articles/progressbar/，請(qǐng)對(duì)照參考。
誰說在WEB應(yīng)用程序中不能使用進(jìn)度條？我認(rèn)為能。本文將介紹在服務(wù)端長時(shí)間的處理過程中通過使用進(jìn)度條提高WEB應(yīng)用程序的質(zhì)量和界面友好度。事實(shí)上，如果一個(gè)WEB應(yīng)用程序一直運(yùn)行在無狀態(tài)和無連接狀態(tài)下，用戶很容易認(rèn)為事情已經(jīng)結(jié)束了。但是本文介紹的不使用任何ActiveX控件和亂七八糟的Java Applets的進(jìn)度條將有助于改善這點(diǎn)。
在一個(gè)WEB應(yīng)用程序中能夠使用進(jìn)度條的關(guān)鍵是瀏覽器有能力在所有頁面加載完之前顯示頁面。我們將使用這點(diǎn)特性來有步驟的生成并且發(fā)送頁面給客戶端。首先，我們將使用HTML生成一個(gè)完美并且漂亮的進(jìn)度條，然后我們動(dòng)態(tài)的發(fā)送Javascript塊以更新進(jìn)度條。當(dāng)然，以上的所有內(nèi)容都是在斷開用戶請(qǐng)求之前實(shí)現(xiàn)的。在C#中，Response.Write允許我們加入自定義內(nèi)容到緩存區(qū)并且Response.Fluse()允許我們把所有緩存區(qū)中的內(nèi)容發(fā)送到用戶的瀏覽器上。
第一步：
第一步讓我們來建立一個(gè)進(jìn)度條頁面，我們使用progressbar.aspx。如上所述，我們逐步生成并發(fā)送頁面到客戶端。首先，我們將使用HTML生成一個(gè)完美并且漂亮的進(jìn)度條。所需要的HTML代碼我們可以從事先定義的progressbar.htm中獲取，所以，第一件事情是裝載它并且將數(shù)據(jù)流發(fā)送到客戶端的瀏覽器，在progressbar.aspx的Page_Load中加入如下幾行：
string strFileName = Path.Combine( Server.MapPath("./include"), "progressbar.htm" );
StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default );
string strHtml = sr.ReadToEnd();
Response.Write( strHtml );
sr.Close();
Response.Flush();
以下是progressbar.htm的HTML代碼，（譯注：作者把腳本函數(shù)放在了另外一個(gè)js文件中，但我嫌麻煩就也放在了這個(gè)靜態(tài)頁面中了）
<script language="javascript">
function setPgb(pgbID, pgbValue)
{
if ( pgbValue <= 100 )
{
if (lblObj = document.getElementById(pgbID+'_label'))
{
lblObj.innerHTML = pgbValue + '%'; // change the label value
}
if ( pgbObj = document.getElementById(pgbID) )
{
var divChild = pgbObj.children[0];
pgbObj.children[0].style.width = pgbValue + "%";
}
window.status = "數(shù)據(jù)讀取" + pgbValue + "%，請(qǐng)稍候...";
}
if ( pgbValue == 100 )
window.status = "數(shù)據(jù)讀取已經(jīng)完成";
}
</script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/common.css" />
</head>
<body bgColor="buttonface" topmargin="0" leftmargin="0">
<table width="100%" height="100%" ID="Table1">
<tr>
<td align="center" valign="middle">
<DIV class="bi-loading-status" id="proBar" style="DISPLAY: ; LEFT: 425px; TOP: 278px">
<DIV class="text" id="pgbMain_label" align="left"></DIV>
<DIV class="progress-bar" id="pgbMain" align="left">
<DIV STYLE="WIDTH:10%"></DIV>
</DIV>
</DIV>
</td>
</tr>
</body>
</html>
對(duì)應(yīng)的CSS定義如下：
.bi-loading-status {
/*position: absolute;*/
width: 150px;
padding: 1px;
overflow: hidden;
}
.bi-loading-status .text {
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
padding: 1px;
}
.bi-loading-status .progress-bar {
border: 1px solid ThreeDShadow;
background: window;
height: 10px;
width: 100%;
padding: 1px;
overflow: hidden;
}
.bi-loading-status .progress-bar div {
background: Highlight;
overflow: hidden;
height: 100%;
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
第二步：
現(xiàn)在我們可以開始更新進(jìn)度條了，這是十分重要的部分，因?yàn)檫@部分可以令你的進(jìn)度條活起來。（譯注，原來是使用隨機(jī)的增加15次直到加載完畢，本文僅使用從1-100的勻速增加，以下內(nèi)容非譯）
首先我們新開一個(gè)線程，在Page_Load 中加入以下代碼：
Thread thread = new Thread( new ThreadStart(ThreadProc) );
thread.Start();
thread.Join();
在類中增加以下函數(shù)：
private void ThreadProc()
{
string strScript = "<script>setPgb('pgbMain','{0}');</script>";
for ( int i = 0; i <= 100; i++ )
{
System.Threading.Thread.Sleep(10);
Response.Write( string.Format( strScript, i ) );
Response.Flush();
}
}
注意，在以上代碼中我們使用for循環(huán)，在i每增加一次的情況下往客戶端發(fā)送一段腳本<script>setPgb('pgbMain','{0}');</script>，其中的{0}會(huì)被相應(yīng)的i替換，而該段腳本會(huì)調(diào)用預(yù)先寫好的javascript函數(shù)setPgb，更改頁面的進(jìn)度條狀態(tài)。
