在 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 id="Table1" style="WIDTH: 760px" cellSpacing="0" cellPadding="0" align="center" border="0"> <TR height="400"> <TD vAlign="middle" align="center"> <DIV class="bi-loading-status" id="proBar" style="LEFT: 425px; WIDTH: 300px; TOP: 278px; HEIGHT: 44px"> <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>
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;
}
.bi-loading-status .progress-bar {
border: 1px solid ThreeDShadow;
background: window;
height: 10px;
&nbs [1] [2] 下一页 |