欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET技巧:教你制做Web实时进度条

程序员文章站 2023-11-30 08:52:40
网上已经有很多web进度条的例子,但是很多都是估算时间,不能正真反应任务的真实进度。我自己结合多线程和showmodaldialog制做了一个实时进度条,原理很简单:使用线...

网上已经有很多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
    }
}