在 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;
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);
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
2006-11-08 sql server2000中使用convert来取得datetime数据类型样式（全）