Asp.Net應用程式中長時間裝載頁面時顯示進度條

在 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

Code

Progressbar.aspx (HTML)

<a href="http://www.pin5i.com/showtopic-13168.html#%23%23">[copy to clipboard]</a>

CODE:

&lt;%@ Page language="c#" Codebehind="Progressbar.aspx.cs" AutoEventWireup="false" Inherits="WebApp.Progressbar" %&gt;

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt;

&lt;HTML&gt;

&lt;HEAD&gt;

  &lt;title&gt;進度條&lt;/title&gt;

  &lt;meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"&gt;

  &lt;meta name="CODE_LANGUAGE" Content="C#"&gt;

  &lt;meta name="vs_defaultClientScript" content="JavaScript"&gt;

  &lt;meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5";&gt;

  &lt;link rel="stylesheet" type="text/css" href="common.css" /&gt;

  &lt;% string strUrl=Request.Params["U"];%&gt;

  &lt;META http-equiv=Refresh content="0;URL= &lt;%=strUrl%&gt; "&gt;

  &lt;script language="javascript"&gt;

  var i = 0;

  function setPgb(pgbID, pgbValue) 

  {

    if ( pgbValue &lt;= 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++;

  &lt;/script&gt;

&lt;/HEAD&gt;

&lt;BODY onload="setInterval('showBar()',100)"&gt;

  &lt;TABLE id="Table1" style="WIDTH: 760px" cellSpacing="0" cellPadding="0" align="center"

  border="0"&gt;

  &lt;TR height="400"&gt;

    &lt;TD vAlign="middle" align="center"&gt;

    &lt;DIV class="bi-loading-status" id="proBar" style="LEFT: 425px; WIDTH: 300px; TOP: 278px; HEIGHT: 44px"&gt;

      &lt;DIV class="text" id="pgbMain_label" align="left"&gt;&lt;/DIV&gt;

      &lt;DIV class="progress-bar" id="pgbMain" align="left"&gt;

      &lt;DIV style="WIDTH: 10%"&gt;&lt;/DIV&gt;

      &lt;/DIV&gt;

    &lt;/DIV&gt;

    &lt;/TD&gt;

  &lt;/TR&gt;

  &lt;/TABLE&gt;

&lt;/BODY&gt;

&lt;/HTML&gt;

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

{

/// &lt;summary&gt;

/// Second 的摘要說明。

/// &lt;/summary&gt;

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

  /// &lt;summary&gt;

  /// 設計器支援所需的方法 - 不要使用代碼編輯器修改

  /// 此方法的内容。

  /// &lt;/summary&gt;

  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; 

.bi-loading-status .progress-bar {

  border:      1px solid ThreeDShadow;

  background:  window;

  height:      10px;

  width:        100%;

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

 本文轉自靈動生活部落格園部落格，原文連結：http://www.cnblogs.com/ywqu/archive/2008/09/26/1299876.html，如需轉載請自行聯系原作者