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

简介:

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)


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

}

 本文转自灵动生活博客园博客,原文链接:http://www.cnblogs.com/ywqu/archive/2008/09/26/1299876.html ,如需转载请自行联系原作者
相关文章
|
4月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
51 5
|
2月前
|
SQL XML 关系型数据库
入门指南:利用NHibernate简化.NET应用程序的数据访问
【10月更文挑战第13天】NHibernate是一个面向.NET的开源对象关系映射(ORM)工具,它提供了从数据库表到应用程序中的对象之间的映射。通过使用NHibernate,开发者可以专注于业务逻辑和领域模型的设计,而无需直接编写复杂的SQL语句来处理数据持久化问题。NHibernate支持多种数据库,并且具有高度的灵活性和可扩展性。
44 2
|
2月前
|
开发框架 .NET API
Windows Forms应用程序中集成一个ASP.NET API服务
Windows Forms应用程序中集成一个ASP.NET API服务
106 9
|
4月前
|
开发框架 监控 安全
.NET 应用程序安全背后究竟隐藏着多少秘密?从编码到部署全揭秘!
【8月更文挑战第28天】在数字化时代,.NET 应用程序的安全至关重要。从编码阶段到部署,需全面防护以保障系统稳定与用户数据安全。开发者应遵循安全编码规范,实施输入验证、权限管理和加密敏感信息等措施,并利用安全测试发现潜在漏洞。此外,部署时还需选择安全的服务器环境,配置 HTTPS 并实时监控应用状态,确保全方位防护。
59 3
|
4月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (3)第七天Blazor学生管理页面编写和接口对接
七天.NET 8操作SQLite入门到实战 - (3)第七天Blazor学生管理页面编写和接口对接
|
4月前
|
开发框架 缓存 .NET
【App Service】在Azure App Service中分析.NET应用程序的性能的好帮手(Review Stack Traces)
【App Service】在Azure App Service中分析.NET应用程序的性能的好帮手(Review Stack Traces)
|
4月前
|
开发框架 监控 .NET
【Azure 应用程序见解】在Docker中运行的ASP.NET Core应用如何开启Application Insights的Profiler Trace呢?
【Azure 应用程序见解】在Docker中运行的ASP.NET Core应用如何开启Application Insights的Profiler Trace呢?
|
6月前
|
开发框架 JSON .NET
学习ASP.NET 中的 默认应用程序配置源
默认主机配置源 使用命令行配置提供程序的命令行参数
43 2
|
5月前
|
C# 数据安全/隐私保护
推荐三款开源且实用的.NET代码混淆工具,保护你的.NET应用程序
推荐三款开源且实用的.NET代码混淆工具,保护你的.NET应用程序
657 0
|
6月前
|
开发框架 .NET Nacos
使用 Nacos 在 C# (.NET Core) 应用程序中实现高效配置管理和服务发现
使用 Nacos 在 C# (.NET Core) 应用程序中实现高效配置管理和服务发现
573 0