程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> 教你制做Web實時進度條

教你制做Web實時進度條

編輯：.NET實例教程

網上已經有很多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 voidInitializeComponent()
        {
            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" Border 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(EventArg
s 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);