ASP.NET技巧:教你制做Web实时进度条

  网上已经有很多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");

  //需要IE5.5以上支持

  sbScript.Append("window.showModalDialog('Progress.aspx','','dialogHeight: 100px; dialogWidth: 350px; edge: Raised; center: Yes; help: No; resizable: No; status: No;scroll:No;');\n");

  //IE5.5以下使用window.open

  //sbScript.Append("window.open('Progress.aspx','', 'height=100, width=350, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');\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>");

  }

  }

  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.Load += new System.EventHandler(this.Page_Load);

  }

  #endregion

  }

  }