ASP.NET技巧：教你制做Web實時進度條

2024-07-10 13:10:16

字體：大中小

來源：轉載

供稿：網友

網上已經有很多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>");
            }
        }