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>");
            }
        }