明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

WEB應用程序中的進度條

發(fā)表時間：2024-02-16 來源：明輝站整理相關軟件相關文章人氣：

[摘要]WEB應用程序中的進度條Julien Cheyssial 寫作于2003/10/01Joise.LI翻譯并修改于2004-4-2 寫在前面： 原文是我在需要使用進度條時找到的一篇文章，講解詳細并附有實例。我在原文的基礎上加上了自己的修改：增加了線程處理并且將進度條的使用放到了子線程中處...
WEB應用程序中的進度條

Julien Cheyssial 寫作于2003/10/01

Joise.LI翻譯并修改于2004-4-2



寫在前面：

原文是我在需要使用進度條時找到的一篇文章，講解詳細并附有實例。我在原文的基礎上加上了自己的修改：增加了線程處理并且將進度條的使用放到了子線程中處理。這是我第一次翻譯文章，敬請各位指正。原文見于http://www.myblogroll.com/Articles/progressbar/，請對照參考。





誰說在WEB應用程序中不能使用進度條？我認為能。本文將介紹在服務端長時間的處理過程中通過使用進度條提高WEB應用程序的質量和界面友好度。事實上，如果一個WEB應用程序一直運行在無狀態(tài)和無連接狀態(tài)下，用戶很容易認為事情已經結束了。但是本文介紹的不使用任何ActiveX控件和亂七八糟的Java Applets的進度條將有助于改善這點。



在一個WEB應用程序中能夠使用進度條的關鍵是瀏覽器有能力在所有頁面加載完之前顯示頁面。我們將使用這點特性來有步驟的生成并且發(fā)送頁面給客戶端。首先，我們將使用HTML生成一個完美并且漂亮的進度條，然后我們動態(tài)的發(fā)送Javascript塊以更新進度條。當然，以上的所有內容都是在斷開用戶請求之前實現(xiàn)的。在C#中，Response.Write允許我們加入自定義內容到緩存區(qū)并且Response.Fluse()允許我們把所有緩存區(qū)中的內容發(fā)送到用戶的瀏覽器上。



第一步：

第一步讓我們來建立一個進度條頁面，我們使用progressbar.aspx。如上所述，我們逐步生成并發(fā)送頁面到客戶端。首先，我們將使用HTML生成一個完美并且漂亮的進度條。所需要的HTML代碼我們可以從事先定義的progressbar.htm中獲取，所以，第一件事情是裝載它并且將數據流發(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代碼，（譯注：作者把腳本函數放在了另外一個js文件中，但我嫌麻煩就也放在了這個靜態(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 = "數據讀取" + pgbValue + "%，請稍候...";

}



if ( pgbValue == 100 )

window.status = "數據讀取已經完成";



}

</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>

對應的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)在我們可以開始更新進度條了，這是十分重要的部分，因為這部分可以令你的進度條活起來。（譯注，原來是使用隨機的增加15次直到加載完畢，本文僅使用從1-100的勻速增加，以下內容非譯）

首先我們新開一個線程，在Page_Load 中加入以下代碼：

Thread thread = new Thread( new ThreadStart(ThreadProc) );

thread.Start();

thread.Join();

在類中增加以下函數：

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}會被相應的i替換，而該段腳本會調用預先寫好的javascript函數setPgb，更改頁面的進度條狀態(tài)。