asp.net 生成静态页时的进度条显示
asp.net如何生成静态页，请参考下面的文章：
http://www.jb51.net/article/18175.htm
而我们用模拟的话，只需要让线程延迟执行就可以了。比如下面的代码：
代码如下:
for (int i = 0; i < 10; i++)
{
DateTime startTime = DateTime.Now;
Response.Write(i + "-------------执行时间：" + startTime.ToString()+"<br />");
Thread.Sleep(1000);
}
显示结果：
时间都不一样，如果没有让线程延迟，那么这里的时间都是一样的。而我们需要做的仅仅是：
代码如下:
Thread.Sleep(1000);
using System.Threading;
而且输出的时候是一次性就全部输出的，并不是每隔一秒就输出一行(是可以实现的，后面会讲到)。如果按那样写每隔一秒就输出一行该有多好啊。根据这个原理，如果只需要制作生成静态时表明正在生成的过程，而不需要进度显示，那么可以这样：
代码如下:
<asp:Button ID="btnOk" runat="server" onclick="btnOk_Click" Text="生成静态的进度条" OnClientClick="createload()" />
OnClientClick="createload()"
表明在按下按钮的同时触发客户端事件，而客户端就是创建一个等待中的div。效果如下：
creatload函数代码如下：
代码如下:
function createload(){
var loaddiv = document.createElement("div");
loaddiv.style.width = "200px";
loaddiv.style.height = "100px";
loaddiv.style.border = "1px solid #000000";
loaddiv.style.fontSize = "12px";
loaddiv.style.lineHeight = "100px";
loaddiv.style.backgroundColor = "#cccccc";
loaddiv.style.textAlign = "center";
loaddiv.innerHTML = "请稍候...";
document.body.appendChild(loaddiv);
}
执行完后这个div就自动消失了。
有了上面的铺垫，现在开始进入正题，我们肯定是要实现每隔一秒就输出一行的这种效果，而这其实很容易实现，只要让页面不缓冲就可以了再配合线程延迟就可以做到了。在Page中关闭缓冲区：
Buffer="false"
接下来，我们只要找一个进度条效果，再统计出需要生成静态页的文章总数，根据当前生成的文章为第几条记录，算出已经执行到总数的百分之几。再实时调用一次js函数实现进度块的变化，就OK了。
关于进度条，大家可以上网随便找一个，我用了这里的一个进度条效果，因为简单。http://www.jb51.net/article/18177.htm
当然，这个进度条并不适合我们现在的具体使用，关键部分的js需要修改如下：
代码如下:
//i为当前执行到的记录,count为总数
//比如总共需要生成的静态数为100，那么现在执行到5%，那么进度条块进到5%的地方
function loadBar(i,count){
var a = parseFloat(i*100/count);
$("bar").style.width = a + "%";
if($("bar").style.width == "100%"){
$("bar").innerHTML = "完成";
}else{
$("bar").innerHTML = a + "%";
}
}
以下则是关键的c#后台代码的关键，按照上面这个函数，我们主要根据执行到的记录，输出类似以下的代码：
代码如下:
< script>loadBar(1,10);</script><script>loadBar(2,10);</script><script>loadBar(3,10);</script><script>loadBar(4,10);</script><script>loadBar(5,10);</script><script>loadBar(6,10);</script><script>loadBar(7,10);</script><script>loadBar(8,10);</script><script>loadBar(9,10);</script><script>loadBar(10,10);</script>
按照这样的输出，输出这些字符必须在js,css,以及相关html代码之后才可以输出，否则在头部就输出的话，肯定不行。因为前面都没有这个函数，就执行到这个函数。(你想用Literal控件去控制其输出位置？你可以自己试下，有什么结果？)所以，索性我们把相关进度条的代码一次性输出，可以把其做成一个html文件，这个也是在网上看到一篇文章的时候的做法。名为bar.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">
<head runat="server">
<title>进度条</title>
<script language="javascript" type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
//i为当前执行到的记录,count为总数
//比如总共需要生成的静态数为100，那么现在执行到5%，那么进度条块进到5%的地方
function loadBar(i,count){
var a = parseFloat(i*100/count);
$("bar").style.width = a + "%";
if($("bar").style.width == "100%"){
$("bar").innerHTML = "完成";
}else{
$("bar").innerHTML = a + "%";
}
}
</script>
<style type="text/css">
body{
text-align:center;
font-size:12px;
}
.graph{
width:450px;
border:1px solid #F8B3D0;
height:25px;
margin:0 auto;
}
#bar{
display:block;
background:#FFE7F4;
float:left;
height:100%;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="graph">
<strong id="bar" style="width:1%;"></strong>
</div>
</div>
</form>
</body>
</html>
for (int i = 0; i < 10; i++)
{
if (i == 0)
{
string strFileName = FileObj.ReadFile(Server.MapPath("bar.htm"));
Response.Write(strFileName);
}
Response.Write("<script>loadBar(" + (i + 1) + ",10);</script>");
Thread.Sleep(1000);
}
FileObj.ReadFile是读取这个htm文件，这个函数及其相关文件操作类，大家可以在这篇文章中得到！http://www.jb51.net/article/15125.htm加上条件语句
代码如下:
i==0
是因为bar.htm在读取出来之后，只需要输出一次就可以了。最终效果如下：
但是其是动态的哦，而只需要把模拟的代码换成生成静态时的相关函数代码，当然也可以是其它。当然也可以采用ajax的方法，有空再谢谢这方面实现的文章。
相关推荐
-
Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和
-
ASP.NET实现用图片进度条显示投票结果
一个投票功能模块少不了查看投票结果,用进度条显示各个投票结果可以起到一目了然的效果.以下是我的方法,请大家不吝赐教: 1:做一张图片用于做进度条,只需要很小的一个图片就可以了,如高20px,宽1px. 2:在要显示进度条的单元格中插入image控件,其imageUrl设置为已做好的图片的位置. 3:用一个dataReader对象dr保存取出的各项票数,用一个int 型变量sum保存取出的总票数,各项分别再定义一个double型变量用来保存单项票数除以(/)总票数的结果(小数),再定义一个int
-
ASP.NET实现进度条效果
我们先看下进度条效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <script language="javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenWidth = document.body.offsetWidth; ProgressBarSide.style.wid
-
asp.net web大文件上传带进度条实例代码
复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Syste
-
asp.net单文件带进度条上传的解决方案
最近做项目中遇到很多问题,比如带进度条的文件上传,看了网上很多资料还没找到真正意义上的ASP.NET实现进度条上传(可能是我没找到),下面我来跟大家分享一下我实现的这个程序. 首先看下界面效果,当然你可以完全修改界面为你自己所用. 先解释一下这个程序,该程序采用了jquery框架,实现了小文件上传,不超过80Mb,可以在web.config文件中进行相应的配置,但是有个最大值,具体需要查看msdn.开发环境采用visual studio 2013 .net framework 4.5,运行的时候
-
asp.net文件上传带进度条实现案例（多种风格）
先饱饱眼福: 在之前的文章中也有类似带进度条文件传送的案例,大家可以翻阅之前的文章对知识点进行扩充. 部分代码: <%@ Page Language="C#" %> <%@ Register Assembly="MattBerseth.WebControls.AJAX" Namespace="MattBerseth.WebControls.AJAX.Progress" TagPrefix="mb" %>
-
asp.net 在客户端显示服务器端任务处理进度条的探讨
下面就是采用静态变量的方法实现的: 复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd"> <script runat="server"
-
asp.net mvc 实现文件上传带进度条的思路与方法
前言 文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则.最近参考网络资料,学习了ASP.NET MVC如何上传文件. 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧. 实现思路 ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度.保存进度我采用的是memc
-
利用Asp.Net回调机制实现进度条
其效果如下:首先,在HTML文档中加入如下代码:<div> <table class="statusTable"> <tr> <td id="progress1"> </td> <td id="progress2"> </td> <td id="progress3"> </td> <td id="prog
-
asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）
在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的