WEB應用程式中的進度條

來源:互聯網
上載者:User
web|程式 WEB應用程式中的進度條

Julien Cheyssial 寫作於2003/10/01

Joise.LI翻譯並修改於2004-4-2



寫在前面:

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





誰說在WEB應用程式中不能使用進度條?我認為能。本文將介紹在服務端長時間的處理過程中通過使用進度條提高WEB應用程式的品質和介面友好度。事實上,如果一個WEB應用程式一直運行在無狀態和無串連狀態下,使用者很容易認為事情已經結束了。但是本文介紹的不使用任何ActiveX控制項和亂七八糟的Java Applets的進度條將有助於改善這點。



在一個WEB應用程式中能夠使用進度條的關鍵是瀏覽器有能力在所有頁面載入完之前顯示頁面。我們將使用這點特性來有步驟的產生並且發送頁面給用戶端。首先,我們將使用HTML產生一個完美並且漂亮的進度條,然後我們動態發送Javascript塊以更新進度條。當然,以上的所有內容都是在斷開使用者請求之前實現的。在C#中,Response.Write允許我們加入自訂內容到緩衝區並且Response.Fluse()允許我們把所有緩衝區中的內容發送到使用者的瀏覽器上。



第一步:

第一步讓我們來建立一個進度條頁面,我們使用progressbar.aspx。如上所述,我們逐步產生並發送頁面到用戶端。首先,我們將使用HTML產生一個完美並且漂亮的進度條。所需要的HTML代碼我們可以從事先定義的progressbar.htm中擷取,所以,第一件事情是裝載它並且將資料流發送到用戶端的瀏覽器,在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檔案中,但我嫌麻煩就也放在了這個靜態頁面中了)

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

</table>

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

}

第二步:

現在我們可以開始更新進度條了,這是十分重要的部分,因為這部分可以令你的進度條活起來。(譯註,原來是使用隨機的增加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迴圈,在i每增加一次的情況下往用戶端發送一段指令碼<script>setPgb('pgbMain','{0}');</script>,其中的{0}會被相應的i替換,而該段指令碼會調用預先寫好的javascript函數setPgb,更改頁面的進度條狀態。





相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。