WEB应用程序中的进度条
日期：2011-11-17 浏览次数：20619 次
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-overflo
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-overflo
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
