ASP.NET实现进度条

原创 2011年08月08日 21:45:11
在网上查阅了很多相关资料,参照对比一番后自己整理了一下,做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比,完成进度后隐藏进度条。个人感觉还是有一定的参考价值,贴出来先。

建立一个WEB工程,添加新项->HTML页面,命名为ProgressBar.htm,内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">
<head>
    <title>无标题页</title>
    <script language="javascript" type="text/javascript">
        function SetPorgressBar(pos)
        {
            //设置进度条居中
            var screenHeight =  document.body.offsetHeight;
            var screenWidth = document.body.offsetWidth;
            document.getElementById("ProgressBarSide").style.width = Math.round(screenWidth / 2);
            document.getElementById("ProgressBarSide").style.left = Math.round(screenWidth / 4);
            document.getElementById("ProgressBarSide").style.top = Math.round(screenHeight / 2);
            document.getElementById("ProgressBarSide").style.height = "21px";
            document.getElementById("ProgressBarSide").style.display = "";
             
            //设置进度条百分比                       
            document.getElementById("ProgressBar").style.width = pos + "%";
            document.getElementById("ProgressText").innerHTML = pos + "%";
        }

        //完成后隐藏进度条
        function SetCompleted()
        {       
            document.getElementById("ProgressBarSide").style.display = "none";
        }
     </script>  
</head>
    <body>
    <div id="ProgressBarSide" style="position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
        <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
        <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
    </div>
    </body>
</html>


后台代码,Default.aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{
    private void beginProgress()
    {
        //根据ProgressBar.htm显示进度条界面
        string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
        StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
        string html = reader.ReadToEnd();
        reader.Close();
        Response.Write(html);
        Response.Flush();
    }

    private void setProgress(int percent)
    {
        string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
        Response.Write(jsBlock);
        Response.Flush();
    }

    private void finishProgress()
    {
        string jsBlock = "<script>SetCompleted();</script>";
        Response.Write(jsBlock);
        Response.Flush();
    }

    private void Page_Load(object sender, System.EventArgs e) 
    {
        beginProgress();

        for (int i = 1; i <= 100; i++)
        {
            setProgress(i);

            //此处用线程休眠代替实际的操作,如加载数据等
            System.Threading.Thread.Sleep(50);
        }

        finishProgress(); 
    } 
}



简单实现asp.net进度条

程序中为了让更直观的反映命令执行的进度,考虑使用进度条,但是asp.net中没有专门的进度条控件,在网上搜了一下,实现方法都很复杂,就自己动手做了一个,实现起来其实也很简单。效果如图:前台代码 用两层...
  • zhichao2001
  • zhichao2001
  • 2011年07月17日 23:24
  • 10185

asp.net 实现进度条 用来显示加载进度或程序处理进度

private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for...
  • smartsmile2012
  • smartsmile2012
  • 2012年11月09日 16:29
  • 8775

C# asp.net与jquery做ajax简单进度条

一直以为response.Flush() 可以实现。。。。发现不行的 最后还是采用了全局参数保存到 cahe 来做了 setCahe.ashx 模拟操作的事件进度 public voi...
  • livelymoon
  • livelymoon
  • 2015年08月28日 11:47
  • 807

MVC实现有关时间的进度条,使用jQuery ui的progressbar

在电商网站中,有时候通过进度条来直观地显示用户是否到期以及用户当前的状态。   设计这样的一个Model。 public class User { ...
  • make1828
  • make1828
  • 2014年08月26日 16:44
  • 2148

使用IHttpAsyncHandler实现带进度条的文件上传

asp.net中实现带进度显示的文件上传功能有很多选择,比如:Html5 XMLHttpRequest2、第三方控件、flash插件等等。本文介绍使用IHttpAsyncHandler对象实现进度显示...
  • taoerchun
  • taoerchun
  • 2016年04月05日 18:27
  • 1399

asp.net多线程,执行真实时间与百分比的进度条

asp.net利用多线程执行长时间的任务,客户端显示任务执行的真实时间与百分比。 在asp.net中执行一个长时间的操作,有的时候需要在在客户端有一个反馈能了解到任务的执行进度,大致看了一下有这么几种...
  • lovegonghui
  • lovegonghui
  • 2015年11月11日 09:22
  • 1313

ASP.NET实现进度条(收集)

建立一个WEB工程,添加新项->HTML页面,命名为ProgressBar.htm,内容如下:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition...
  • 2004v2004
  • 2004v2004
  • 2008年02月19日 15:01
  • 3592

asp.net单文件带进度条上传

asp.net单文件带进度条上传,不属于任务控件,也不是flash类型的上传,完全是asp.net、js、css实现上传。源码为开发测试版,需要使用的亲需要注意修改配置文件。...
  • qin_zhangyongheng
  • qin_zhangyongheng
  • 2015年06月28日 22:10
  • 963

在ASP.NET中将Excel文件中数据导入数据库并显示进度条

在ASP.NET中经常会遇到Excel文件导入数据库的问题,遇到数据量比较大的时候,最好显示进度条。进度条设计是参考网上某牛人提供的代码,利用JS实现的,谢谢这个大牛了(忘记了当时记录下他的大名了,:...
  • jasonwu_bj
  • jasonwu_bj
  • 2011年01月02日 11:36
  • 2765

在ASP.NET中显示进度条

 
  • hejishan
  • hejishan
  • 2008年03月11日 12:08
  • 253
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET实现进度条
举报原因:
原因补充:

(最多只允许输入30个字)