教你制做Web实时进度条

时间:2020-12-26 08:04:59

网上已经有很多Web进度条的例子,但是很多都是估算时间,不能正真反应任务的真实进度。我自己结合多线程和ShowModalDialog制做了一个实时进度条,原理很简单:使用线程开始长时间的任务,定义一个Session,当任务进行到不同的阶段改变Session的值,线程开始的同时使用ShowModalDialog打开一个进度条窗口,不断刷新这个窗口获取Session值,反应出实时的进度。下面就来看看具体的代码:(文章结尾处下载源代码)

先新建一个Default.aspx页面,
客户端代码:

教你制做Web实时进度条< body MS_POSITIONING = " GridLayout " >
教你制做Web实时进度条    
< form id = " Form1 "  method = " post "  runat = " server " >
教你制做Web实时进度条            
< br >
教你制做Web实时进度条            
< br >
教你制做Web实时进度条            
< asp:Button id = " Button1 "  runat = " server "  Text = " Start Long Task! " ></ asp:Button >
教你制做Web实时进度条    
</ form >
教你制做Web实时进度条
</ body >

服务器端代码:
教你制做Web实时进度条using  System;
教你制做Web实时进度条
using  System.Collections;
教你制做Web实时进度条
using  System.ComponentModel;
教你制做Web实时进度条
using  System.Data;
教你制做Web实时进度条
using  System.Drawing;
教你制做Web实时进度条
using  System.Web;
教你制做Web实时进度条
using  System.Web.SessionState;
教你制做Web实时进度条
using  System.Web.UI;
教你制做Web实时进度条
using  System.Web.UI.WebControls;
教你制做Web实时进度条
using  System.Web.UI.HtmlControls;
教你制做Web实时进度条
using  System.Text;
教你制做Web实时进度条
教你制做Web实时进度条
namespace  WebProgressBar
教你制做Web实时进度条教你制做Web实时进度条
{
教你制做Web实时进度条教你制做Web实时进度条    
/// <summary>
教你制做Web实时进度条    
/// Summary description for _Default.
教你制做Web实时进度条    
/// </summary>

教你制做Web实时进度条    public class _Default : System.Web.UI.Page
教你制做Web实时进度条教你制做Web实时进度条    
{
教你制做Web实时进度条        
protected System.Web.UI.WebControls.Button Button1;
教你制做Web实时进度条    
教你制做Web实时进度条        
private void Page_Load(object sender, System.EventArgs e)
教你制做Web实时进度条教你制做Web实时进度条        
{
教你制做Web实时进度条            
// Put user code to initialize the page here
教你制做Web实时进度条
        }

教你制做Web实时进度条
教你制做Web实时进度条教你制做Web实时进度条        
Web Form Designer generated code
教你制做Web实时进度条
教你制做Web实时进度条        
private void LongTask()
教你制做Web实时进度条教你制做Web实时进度条        
{
教你制做Web实时进度条            
//模拟长时间任务
教你制做Web实时进度条            
//每个循环模拟任务进行到不同的阶段
教你制做Web实时进度条
            for(int i=0;i<11;i++)
教你制做Web实时进度条教你制做Web实时进度条            
{
教你制做Web实时进度条                System.Threading.Thread.Sleep(
1000);
教你制做Web实时进度条                
//设置每个阶段的state值,用来显示当前的进度
教你制做Web实时进度条
                Session["State"= i+1;
教你制做Web实时进度条            }

教你制做Web实时进度条            
//任务结束
教你制做Web实时进度条
            Session["State"= 100;
教你制做Web实时进度条
教你制做Web实时进度条        }

教你制做Web实时进度条
教你制做Web实时进度条        
public static void OpenProgressBar(System.Web.UI.Page Page)
教你制做Web实时进度条教你制做Web实时进度条        
{
教你制做Web实时进度条            StringBuilder sbScript 
= new StringBuilder();
教你制做Web实时进度条
教你制做Web实时进度条            sbScript.Append(
"<script language='JavaScript' type='text/javascript'>/n");
教你制做Web实时进度条            sbScript.Append(
"<!--/n");
教你制做Web实时进度条            
//需要IE5.5以上支持
教你制做Web实时进度条
            sbScript.Append("window.showModalDialog('Progress.aspx','','dialogHeight: 100px; dialogWidth: 350px; edge: Raised; center: Yes; help: No; resizable: No; status: No;scroll:No;');/n");
教你制做Web实时进度条            
//IE5.5以下使用window.open
教你制做Web实时进度条            
//sbScript.Append("window.open('Progress.aspx','', 'height=100, width=350, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');/n");
教你制做Web实时进度条
            sbScript.Append("// -->/n");
教你制做Web实时进度条            sbScript.Append(
"</script>/n");
教你制做Web实时进度条
教你制做Web实时进度条            Page.RegisterClientScriptBlock(
"OpenProgressBar", sbScript.ToString());
教你制做Web实时进度条        }

教你制做Web实时进度条
教你制做Web实时进度条        
private void Button1_Click(object sender, System.EventArgs e)
教你制做Web实时进度条教你制做Web实时进度条        
{
教你制做Web实时进度条            System.Threading.Thread thread
=new System.Threading.Thread(new System.Threading.ThreadStart(LongTask));
教你制做Web实时进度条            thread.Start();
教你制做Web实时进度条
教你制做Web实时进度条            Session[
"State"]=1;
教你制做Web实时进度条            OpenProgressBar(
this.Page);
教你制做Web实时进度条        }

教你制做Web实时进度条    }

教你制做Web实时进度条}

教你制做Web实时进度条


新建一个进度条页面Progress.aspx
客户端:
在head中加入<base target="_self">
教你制做Web实时进度条< body MS_POSITIONING = " GridLayout " >
教你制做Web实时进度条        
< form id = " Form1 "  method = " post "  runat = " server " >
教你制做Web实时进度条            
< asp:Label id = " lblMessages "  runat = " server " ></ asp:Label >
教你制做Web实时进度条            
< asp:Panel id = " panelBarSide "  runat = " server "  Width = " 300px "  BorderStyle = " Solid "  BorderWidth = " 1px "
教你制做Web实时进度条                ForeColor
= " Silver " >
教你制做Web实时进度条                
< asp:Panel id = " panelProgress "  runat = " server "  Width = " 10px "  BackColor = " Green " ></ asp:Panel >
教你制做Web实时进度条            
</ asp:Panel >
教你制做Web实时进度条            
< asp:Label id = " lblPercent "  runat = " server "  ForeColor = " Blue " ></ asp:Label >
教你制做Web实时进度条        
</ form >
教你制做Web实时进度条
</ body >

服务器端:
教你制做Web实时进度条using  System;
教你制做Web实时进度条
using  System.Collections;
教你制做Web实时进度条
using  System.ComponentModel;
教你制做Web实时进度条
using  System.Data;
教你制做Web实时进度条
using  System.Drawing;
教你制做Web实时进度条
using  System.Web;
教你制做Web实时进度条
using  System.Web.SessionState;
教你制做Web实时进度条
using  System.Web.UI;
教你制做Web实时进度条
using  System.Web.UI.WebControls;
教你制做Web实时进度条
using  System.Web.UI.HtmlControls;
教你制做Web实时进度条
教你制做Web实时进度条
namespace  WebProgressBar
教你制做Web实时进度条教你制做Web实时进度条
{
教你制做Web实时进度条教你制做Web实时进度条    
/// <summary>
教你制做Web实时进度条    
/// Summary description for Progress.
教你制做Web实时进度条    
/// </summary>

教你制做Web实时进度条    public class Progress : System.Web.UI.Page
教你制做Web实时进度条教你制做Web实时进度条    
{
教你制做Web实时进度条        
protected System.Web.UI.WebControls.Label lblMessages;
教你制做Web实时进度条        
protected System.Web.UI.WebControls.Panel panelProgress;
教你制做Web实时进度条        
protected System.Web.UI.WebControls.Panel panelBarSide;
教你制做Web实时进度条        
protected System.Web.UI.WebControls.Label lblPercent;
教你制做Web实时进度条    
教你制做Web实时进度条        
private int state = 0;
教你制做Web实时进度条        
private void Page_Load(object sender, System.EventArgs e)
教你制做Web实时进度条教你制做Web实时进度条        
{
教你制做Web实时进度条            
// Put user code to initialize the page here
教你制做Web实时进度条
            if(Session["State"]!=null)
教你制做Web实时进度条教你制做Web实时进度条            
{
教你制做Web实时进度条                state 
= Convert.ToInt32(Session["State"].ToString());
教你制做Web实时进度条            }

教你制做Web实时进度条            
else
教你制做Web实时进度条教你制做Web实时进度条            
{
教你制做Web实时进度条                Session[
"State"]=0;
教你制做Web实时进度条            }

教你制做Web实时进度条            
if(state>0&&state<=10)
教你制做Web实时进度条教你制做Web实时进度条            
{
教你制做Web实时进度条                
this.lblMessages.Text = "Task undertaking!";
教你制做Web实时进度条                
this.panelProgress.Width = state*30;
教你制做Web实时进度条                
this.lblPercent.Text = state*10 + "%";
教你制做Web实时进度条                Page.RegisterStartupScript(
"","<script>window.setTimeout('window.Form1.submit()',100);</script>");
教你制做Web实时进度条            }

教你制做Web实时进度条            
if(state==100)
教你制做Web实时进度条教你制做Web实时进度条            
{
教你制做Web实时进度条                
this.panelProgress.Visible = false;
教你制做Web实时进度条                
this.panelBarSide.Visible = false;
教你制做Web实时进度条                
this.lblMessages.Text = "Task Completed!";
教你制做Web实时进度条                Page.RegisterStartupScript(
"","<script>window.close();</script>");
教你制做Web实时进度条            }

教你制做Web实时进度条        }

教你制做Web实时进度条
教你制做Web实时进度条教你制做Web实时进度条        
Web Form Designer generated code
教你制做Web实时进度条    }

教你制做Web实时进度条}

教你制做Web实时进度条

源代码下载: WebProgressBar.rar