教你制做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
    }
}

源代码下载：
WebProgressBar.rar