在 Asp.Net Web 应用程序中长时间装载页面时显示进度条(转)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在 Asp.Net Web 应用程序中长时间装载页面时显示进度条，虽然是假进度条，不能实时反映装载进度，但是可以告诉用户页面正在装载，以免用户误以为系统故障或死机。
新建一个 Web 项目，添加4个文件：Default.htm；Progressbar.aspx；Second.aspx；common.css。
Default.htm 页面有一个超链，点击之后先装载 Progressbar.aspx，装载完之后装载 Second.aspx，因为 Second.aspx 模拟大页面所以 Page_Load 中主线程挂起 10 秒钟，其间仍显示进度条页面 Progressbar.aspx。

代码如下：

Default.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Default</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
</head>
<body>
<a href="Progressbar.aspx?U=Second.aspx">进入</a>
</body>
</html>

Progressbar.aspx (HTML)
<%@ Page language="c#" Codebehind="Progressbar.aspx.cs" AutoEventWireup="false" Inherits="WebApp.Progressbar" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>进度条</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <link rel="stylesheet" type="text/css" href="common.css" />
  <% string strUrl=Request.Params["U"];%>
  <META http-equiv=Refresh content="0;URL= <%=strUrl%> ">
  <script language="javascript">
   var i = 0;

   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 = "数据读取已经完成";
   }

   function showBar()
   {
    setPgb('pgbMain',i);
    i++;
   }
  </script>
</HEAD>
<BODY onload="setInterval('showBar()',100)">
  <TABLE
   border="0">
   <TR height="400">
    <TD vAlign="middle" align="center">
     <DIV class="bi-loading-status" >
      <DIV class="text" ></DIV>
      <DIV class="progress-bar" >
       <DIV style="WIDTH: 10%"></DIV>
      </DIV>
     </DIV>
    </TD>
   </TR>
  </TABLE>
</BODY>
</HTML>

Second.aspx(code-behind)
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebApp
{
/// <summary>
/// Second 的摘要说明。
/// </summary>
public class Second : System.Web.UI.Page
{
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面

System.Threading.Thread.Sleep(10000);
}

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);

}

  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}

common.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;