ASP.NET技巧：教你製做Web即時進度條

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

網上已經有很多Web進度條的例子，但是很多都是估算時間，不能正真反應任務的真實進度。我自己結合多線程和ShowModalDialog製做了一個即時進度條，原理很簡單：使用線程開始長時間的任務，定義一個Session，當任務進行到不同的階段改變Session的值，線程開始的同時使用ShowModalDialog開啟一個進度條視窗，不斷重新整理這個視窗擷取Session值，反應出即時的進度。下面就來看看具體的代碼：（文章結尾處下載原始碼）

先建立一個Default.aspx頁面，
用戶端代碼：

<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<br>
<br>
<asp:Button id="Button1" runat="server" Text="Start Long Task!"></asp:Button>
</form>
</body>
伺服器端代碼：
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;
using System.Text;

namespace WebProgressBar
{
/**//// <summary>
/// Summary description for _Default.
/// </summary>
public class _Default : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
}

Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void LongTask()
{
//類比長時間任務
//每個迴圈類比任務進行到不同的階段
for(int i=0;i<11;i++)
{
System.Threading.Thread.Sleep(1000);
//設定每個階段的state值，用來顯示當前的進度
Session["State"] = i+1;
}
//任務結束
Session["State"] = 100;

}

public static void OpenProgressBar(System.Web.UI.Page Page)
{
StringBuilder sbScript = new StringBuilder();

sbScript.Append("<script language='JavaScript' type='text/javascript'>\n");
sbScript.Append("\n");
sbScript.Append("</script>\n");

Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString());
}

private void Button1_Click(object sender, System.EventArgs e)
{
System.Threading.Thread thread=new System.Threading.Thread(new System.Threading.ThreadStart(LongTask));
thread.Start();

Session["State"]=1;
OpenProgressBar(this.Page);
}
}
}

建立一個進度條頁面Progress.aspx
用戶端：
在head中加入<base target="_self">
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="lblMessages" runat="server"></asp:Label>
<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"
ForeColor="Silver">
<asp:Panel id="panelProgress" runat="server" Width="10px" BackColor="Green"></asp:Panel>
</asp:Panel>
<asp:Label id="lblPercent" runat="server" ForeColor="Blue"></asp:Label>
</form>
</body>
伺服器端：
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 WebProgressBar
{
/**//// <summary>
/// Summary description for Progress.
/// </summary>
public class Progress : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label lblMessages;
protected System.Web.UI.WebControls.Panel panelProgress;
protected System.Web.UI.WebControls.Panel panelBarSide;
protected System.Web.UI.WebControls.Label lblPercent;

private int state = 0;
private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(Session["State"]!=null)
{
state = Convert.ToInt32(Session["State"].ToString());
}
else
{
Session["State"]=0;
}
if(state>0&&state<=10)
{
this.lblMessages.Text = "Task undertaking!";
this.panelProgress.Width = state*30;
this.lblPercent.Text = state*10 + "%";
Page.RegisterStartupScript("","<script>window.setTimeout('window.Form1.submit()',100);</script>");
}
if(state==100)
{
this.panelProgress.Visible = false;
this.panelBarSide.Visible = false;
this.lblMessages.Text = "Task Completed!";
Page.RegisterStartupScript("","<script>window.close();</script>");
}
}

}
#endregion
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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