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

时间: 2024-10-19 04:16:42

ASP.NET技巧:教你制做Web实时进度条的相关文章

数据导入与实时进度条实现

digiflow数据导入与实时进度条实现 本文档只是稍微解析下数据导入的流程,以及讲解实时进度条实现方法 [数据批量导入流程] 1.客户把.txt数据打包成.gz文件,发给我们. GZ文件格式,每个文件的第一行是唯一的数据,导入完成后要插入到ImportRecord表 名字格式:DigiFlow_南宁 - 平安出单中心_20100201_000100ECHW8P8708.txt 内容格式:以"||"为分割符 比如:00||000100ECHW8P8708||8||18:08:17 00

EXTJS+ASP.NET上传文件带实时进度条代码

一,文件夹 二,upLoad.cs是继承IHttpModule的类: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Text; using System.IO; using System.Reflection; using System.Globalization; using System.Web.Hosting; /// <summary>

Extjs+Asp.net实现上传大文件带实时进度条

主要是为了记录自己的学习过程,整理自己的思路以便以后的学习. 首先先说一下整体的思路. 我门都知道,asp自带的上传文件是先将上传的文件整个读取到内存然后在写入磁盘的.如果文件很大的话,上传时就会出现页面停滞,没有任何反映.用户根本不知道页面在做什么,也不知道是否在上传,上传了多少?这样的用户体验是很差的. 所以我门需要实现一个进度条来反映文件上传的进度,可以反映文件写入的进度.具体的思路是通过asp.net提供的HttpModule(Http模块)中的init方法内订阅各种应用程序事件(如Be

asp.net mvc 实现上传文件带进度条

思路:ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memcached缓存,因为项目其他地方也用了的,所以就直接用这个啦.注意:不能使用session来保存进度,因为session是线程安全的不能实时获取进度,可是试试httpcache或者memorycache,这两个我没有试过,请自行尝试. ps:使用websocket来实现也是不错的,不过我没有试过,有心的大神可以去试试. 下面贴一张效果图: 前端ajax上传文件,我使用了两种jq插件.一种是a

使用 Asp.Net Response.Write() 制作实时进度条

准备: 一个 StudyResponse.aspx 页面和 CodeBehind 文件. Web 页面中的内容如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudyResponse.aspx.cs" Inherits="WebApplication1.StudyResponse" %> Web 页面的 CodeBehind 中的代码如下

手把手教你实现一个 Vue 进度条组件!

最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手实现一下呗.  定义使用方式  想实现一个组件的前提,一定要想好你的需求是什么,还要自己去定义一个舒服的使用方法,这其中也是有原则的,对使用者来说,使用方式越简单越好.那么对应的代价就是写这个组件的复杂度会变高. 我想要的使用方式是这样的:可以在任意的地方去调用到这个方法,可以随时控制其状态.  看

ASP.NET Web实时消息后台服务器推送技术---GoEasy

越来越多的项目需要用到实时消息的推送与接收,怎样用ASP.NET现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等. 支持不同的开发语言:    GoEasy推送 提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过

ASP.NET Core环境Web Audio API+SingalR+微软语音服务实现web实时语音识别

处于项目需要,我研究了一下web端的语音识别实现.目前市场上语音服务已经非常成熟了,国内的科大讯飞或是国外的微软在这块都可以提供足够优质的服务,对于我们工程应用来说只需要花钱调用接口就行了,难点在于整体web应用的开发.最开始我实现了一个web端录好音然后上传服务端进行语音识别的简单demo,但是这种结构太过简单,对浏览器的负担太重,而且响应慢,交互差:后来经过调研,发现微软的语音服务接口是支持流输入的连续识别的,因此开发重点就在于实现前后端的流式传输.参考这位国外大牛写的博文Continuou

Python web实时消息服务器后台推送技术方案---GoEasy

Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等.支 持不同的开发语言:   GoEasy推送提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过RestfulAPI来实现后台实时推送.