WEB应用程序中的进度条

2024-07-21 02:25:22

字体：大中小

来源：转载

供稿：网友

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，更改页面的进度条状态。

最大的网站源码资源下载站，

上一篇：Developing An Image Upload Web Service

下一篇：探讨一下分布式结构在网络应用中的种种好处