Asp.Net应用程序中长时间装载页面时显示进度条-阿里云开发者社区

开发者社区> 灵动生活> 正文

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

简介: Asp.Net应用程序中长时间装载页面时显示进度条 在 Asp.Net Web 应用程序中长时间装载页面时显示进度条,虽然是假进度条,不能实时反映装载进度,但是可以告诉用户页面正在装载,以免用户误以为系统故障或死机。
+关注继续查看

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
ContractedBlock.gifExpandedBlockStart.gifCode
Progressbar.aspx (HTML)
ContractedBlock.gifExpandedBlockStart.gif

<%@ 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)
ContractedBlock.gifExpandedBlockStart.gif

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
ContractedBlock.gifExpandedBlockStart.gif

.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

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
04 入门 - ASP.NET MVC应用程序的结构
目录索引:《ASP.NET MVC 5 高级编程》学习笔记     用Visual Studio创建了一个新的ASP.NET MVC应用程序后,将自动向这个项目中添加一些文件和目录。   如图所示:      用Internet Application模板创建ASP.NET MVC项目后有8个顶级目录。
911 0
利用Perl开发Internet/Intranet应用之一
作者:未知 文章来源:WEB开发网 更新时间:2007-11-10 10:31:43百度i贴吧   新浪微博           Perl原来主要用于编写一些Unix系统上的管理和监控程序,由于Perl与Unix系统紧密相连,故后来很多人都喜欢采用Perl来编写CGI程序。
764 0
任务调度:时间轮算法经典案例解析及应用实现
平时大家的工作中应该会遇到较多需要在某个时间点执行某个任务,比如对运维来说,定时数据库的备份,日志和监控信息的抓取;比如业务系统,某个时间点给某个人群用户发放优惠券,甚至从操作系统角度,人机交互进程、视频播放的实时进程、批处理的后台进程等进程间的调度。。。 所以如何将这些任务高效、精准的调度?是任务调度系统中最重要的命题,当然在业务系统中一个完善的任务调度系统是很复杂的,需要具备能调度、可视化管理、过程可追溯、结果可分析、持久化、高可用等特性,这篇文章主要讨论任务调度逻辑,其余的内容我们后面文章探讨。
107 0
asp.net 生成静态页面的简单例子
Asp.net生成静态文件示例源码(两种途径) Asp.net生成静态文件(根据时间自动命名保持,默认扩展名是htm可以自行修改)。 通过收入内容替换模板或者url地址两种方式进行静态文件的生成 templete.
710 0
利用Perl开发Internet/Intranet应用之二
利用Perl开发Internet/Intranet应用之二 ----3 图形文件的处理 ----虽然client经常向服务器申请的都是text/html文件,但是服务器也可以回送GIF、JPG等图形文件,我们只需在数据的header中指明即可。
569 0
+关注
灵动生活
12年电商经验,8年IT项目管理经验,曾就职于中国第一家上市的B2C电商公司麦考林,擅长电商业务模式规划以及大型电商系统架构。创立闪酷&amp;酷客多小程序
203
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载