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

准备:

  一个 StudyResponse.aspx 页面和 CodeBehind 文件。

Web 页面中的内容如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudyResponse.aspx.cs" Inherits="WebApplication1.StudyResponse" %>

Web 页面的 CodeBehind 中的代码如下:

namespace WebApplication1
{
    public partial class StudyResponse : System.Web.UI.Page
    {
        private readonly StringBuilder _builder = new StringBuilder();

        protected void Page_Load( object sender, EventArgs e )
        {
            for (var i = 1; i <= 50; i++)
            {
                Thread.Sleep(50);
                _builder.Clear();

                if (i == 1)
                {
                    _builder.Append("<html><head></head>  <body>");
                    _builder.Append("<script src=‘FileUpload.js‘ type=‘text/javascript‘></script>");

                    _builder.AppendLine("<div style=‘width: 202px; height: 22px; border: 1px solid #0094ff;‘>");
                    _builder.AppendLine("<div id=‘progress‘ style=‘width: 0; height: 20px; background-color: #ccc; margin: 1px;‘></div>");
                    _builder.AppendLine("</div>");

                    _builder.AppendLine("<script type=‘text/javascript‘>");
                    _builder.AppendLine("_setProgress(" + i * 4 + ");");
                    _builder.AppendLine("</script>");
                    _builder.Append("</body></html>");
                }
                else
                {
                    _builder.AppendLine( "<script type=‘text/javascript‘>" );
                    _builder.AppendLine( "_setProgress(" + i * 4 + ");" );
                    _builder.AppendLine( "</script>" );
                }

                this.Response.Write(_builder.ToString());
                this.Response.Flush();
            }
        }
    }
}

效果预览:

参考:http://www.cnblogs.com/isun/p/4178942.html

时间: 2024-11-09 01:01:27

使用 Asp.Net Response.Write() 制作实时进度条的相关文章

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

网上已经有很多Web进度条的例子,但是很多都是估算时间,不能正真反应任务的真实进度.我自己结合多线程和ShowModalDialog制做了 一个实时进度条,原理很简单:使用线程开始长时间的任务,定义一个Session,当任务进行到不同的阶段改变Session的值,线程开始的同时使用 ShowModalDialog打开一个进度条窗口,不断刷新这个窗口获取Session值,反应出实时的进度.下面就来看看具体的代码:(文章结尾处下 载源代码) 先新建一个Default.aspx页面,客户端代码: <b

应用Response.Write实现带有进度条的多文件上传

前几天,写过一篇随笔“使用RESPONSE.WRITE实现在页面的生命周期中前后台的交互”.说是交互,实际上也主要是在ASP.NET的页面周期中 从后台利用RESPONSE.WRITE向前台即时的推送内容. 该篇随笔算是对上一篇文章的实际应用,利用RESPONSE.WRITE的这个特性实现上传文件时实时进度的显示.如对 RESPONSE.WRITE/RESPONSE.FLUSH不甚了解,请先移步这里. 先附上示例代码MultiUploadProgressClassic. 提前声明一点,HTML发

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

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

CocoStudio使用笔记2:cocos2dx3.9使用CocoStudio制作的进度条LoadingBar

作为菜鸟曾一直使用手写cocos2dx界面,最近一直在研究cocostudio这个工具.尝试着使用工具来快速的开发游戏,折腾了一个多星期了,每天不停的搜索资料. 记录下本人试用cocostudio制作的启动界面所遇到的问题和经验,方便以后查阅. 首先设置编辑器的分辨率为480*800安卓分辨率的大小. 添加一个sprite精灵使用大小为480*800的图片(background.png)作为背景,然后添加sprite精灵作为游戏logo(logo.png),继续添加sprite作为进度条的背景(

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

纯CSS3制作圆形进度条所遇到的问题

近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高相等的子盒子,左侧的子盒子左上角和左下角以及右侧子盒子的右上角和右下角利用border-radius:半径,这样两个矩形便组成了一个完整的圆形. 我们让左侧的子盒子绕着右边的中点旋转180°,这样左侧的半圆就隐藏了,右侧半圆同理.这个地方设置旋转中心是用的transform-origin属性,第一个

进阶教程(8)- 制作载入进度条

载入进度动画条与启动画面一样,有着安抚用户急不可耐的小心脏的重要作用.如果没有一个百分比或者进度条的显示,遇到网络比较慢的情况,可能用户会马上关闭了这个全景链接.尤其是在这个讲求快感的时代,让用户知道还有多久能够看到清晰的全景,你就能多留住更多的客户. 默认的cofu皮肤只有一个"loading"的文字提示,当载入一个新的场景时,只出现一个文字提示是不够的.在官方的安装包的路径 examples\xml-usage\progress 如果直接双击html文件,就能看到下图的进度条动画,

用HTML、CSS、JS制作圆形进度条(无动画效果)

逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大圆就可以出进度条效果了 代码: <style>     /*支持IE9及以上*/    .circle-bar {margin: 20px; font-size:200px; width: 1em; height: 1em; position: relative;  background-color: