首頁 > 開發者 > ASP

Asp.Net應用程式中長時間裝載頁面時顯示進度條

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • 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)

[copy to clipboard]

CODE:

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

[copy to clipboard]

CODE:

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 Form設計器產生的程式碼
  override protected void OnInit(EventArgs e)
  {
  //
  // CODEGEN: 該調用是 ASP.NET Web Form設計器所必需的。
  //
  InitializeComponent();
  base.OnInit(e);
  }
 
  /// <summary>
  /// 設計器支援所需的方法 - 不要使用代碼編輯器修改
  /// 此方法的內容。
  /// </summary>
  private void InitializeComponent()
  {   
  this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
}
}

common.css

[copy to clipboard]

CODE:

.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);

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
ASP學習總結：錯誤碼
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More