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

[copy to clipboard]

CODE:

<%@ Page language="c#" Codebehind="Progressbar.aspx.cs" AutoEventWireup="false" Inherits="WebApp.Progressbar" %>

进度条

<% string strUrl=Request.Params["U"];%>

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++;
}

border="0">

Second.aspx(code-behind)

[copy to clipboard]

CODE:

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

/// Second 的摘要说明。
///

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

///

/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
///

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}

common.css

[copy to clipboard]

CODE:

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

}

ITPub博客

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

最新文章