zoukankan      html  css  js  c++  java
  • ASP.NET技巧:教你制做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'> ");
                sbScript.Append("<!-- ");
                //需要IE5.5以上支持
                sbScript.Append("window.showModalDialog('Progress.aspx','','dialogHeight: 100px; dialogWidth: 350px; edge: Raised; center: Yes; help: No; resizable: No; status: No;scroll:No;'); ");
                //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'); ");
                sbScript.Append("// --> ");
                sbScript.Append("</script> ");

                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
        }
    }

  • 相关阅读:
    js optional chaining operator
    Linux Bash Script conditions
    Linux Bash Script loop
    js Nullish Coalescing Operator
    js sort tricks All In One
    React Portal All In One
    最小生成树&&次小生成树
    链式前向星实现以及它的遍历
    [2015.11.8|9图论]解题代码集合
    最短路算法及其延伸
  • 原文地址:https://www.cnblogs.com/shiningrise/p/4575365.html
Copyright © 2011-2022 走看看