在 Asp.Net Web 應(yīng)用程序中長(zhǎng)時(shí)間裝載頁(yè)面時(shí)顯示進(jìn)度條,雖然是假進(jìn)度條,不能實(shí)時(shí)反映裝載進(jìn)度,但是可以告訴用戶頁(yè)面正在裝載,以免用戶誤以為系統(tǒng)故障或死機(jī)。
新建一個(gè) Web 項(xiàng)目,添加4個(gè)文件:Default.htm;Progressbar.aspx;Second.aspx;common.css。 Default.htm 頁(yè)面有一個(gè)超鏈,點(diǎn)擊之后先裝載 Progressbar.aspx,裝載完之后裝載 Second.aspx,因?yàn)?Second.aspx 模擬大頁(yè)面所以 Page_Load 中主線程掛起 10 秒鐘,其間仍顯示進(jìn)度條頁(yè)面 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">進(jìn)入</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>進(jìn)度條</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 = "數(shù)據(jù)讀取" + pgbValue + "%,請(qǐng)稍候..."; } if ( pgbValue == 100 ) window.status = "數(shù)據(jù)讀取已經(jīng)完成"; } 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 System.Threading.Thread.Sleep(10000); #region Web 窗體設(shè)計(jì)器生成的代碼 } /*position: absolute;*/ |
|