快捷導(dǎo)航

asp.net 生成靜態(tài)頁(yè)時(shí)的進(jìn)度條顯示

更新時(shí)間：2009年05月17日 01:01:00 作者：

本文側(cè)重點(diǎn)在講解生成靜態(tài)頁(yè)的“進(jìn)度條”，所以將采用模擬的方法。生成靜態(tài)時(shí)需要生成的文章必須非常多，否則進(jìn)度條可能一閃而過(guò)，看不到效果。

asp.net如何生成靜態(tài)頁(yè)，請(qǐng)參考下面的文章：
http://www.dbjr.com.cn/article/18175.htm
而我們用模擬的話(huà)，只需要讓線(xiàn)程延遲執(zhí)行就可以了。比如下面的代碼：

復(fù)制代碼代碼如下:

for (int i = 0; i < 10; i++) 
{ 
DateTime startTime = DateTime.Now; 
Response.Write(i + "-------------執(zhí)行時(shí)間：" + startTime.ToString()+"<br />"); 
Thread.Sleep(1000); 
}

顯示結(jié)果：

時(shí)間都不一樣，如果沒(méi)有讓線(xiàn)程延遲，那么這里的時(shí)間都是一樣的。而我們需要做的僅僅是：

復(fù)制代碼代碼如下:

Thread.Sleep(1000);

別忘記了引入命名空間：

復(fù)制代碼代碼如下:

using System.Threading;

而且輸出的時(shí)候是一次性就全部輸出的，并不是每隔一秒就輸出一行(是可以實(shí)現(xiàn)的，后面會(huì)講到)。如果按那樣寫(xiě)每隔一秒就輸出一行該有多好啊。根據(jù)這個(gè)原理，如果只需要制作生成靜態(tài)時(shí)表明正在生成的過(guò)程，而不需要進(jìn)度顯示，那么可以這樣：

復(fù)制代碼代碼如下:

<asp:Button ID="btnOk" runat="server" onclick="btnOk_Click" Text="生成靜態(tài)的進(jìn)度條" OnClientClick="createload()" /> 

在Button按鈕的添加一個(gè)

復(fù)制代碼代碼如下:

OnClientClick="createload()"

表明在按下按鈕的同時(shí)觸發(fā)客戶(hù)端事件，而客戶(hù)端就是創(chuàng)建一個(gè)等待中的div。效果如下：

creatload函數(shù)代碼如下：

復(fù)制代碼代碼如下:

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 = "請(qǐng)稍候..."; 
document.body.appendChild(loaddiv); 
} 

執(zhí)行完后這個(gè)div就自動(dòng)消失了。
有了上面的鋪墊，現(xiàn)在開(kāi)始進(jìn)入正題，我們肯定是要實(shí)現(xiàn)每隔一秒就輸出一行的這種效果，而這其實(shí)很容易實(shí)現(xiàn)，只要讓頁(yè)面不緩沖就可以了再配合線(xiàn)程延遲就可以做到了。在Page中關(guān)閉緩沖區(qū)：
Buffer="false"
接下來(lái)，我們只要找一個(gè)進(jìn)度條效果，再統(tǒng)計(jì)出需要生成靜態(tài)頁(yè)的文章總數(shù)，根據(jù)當(dāng)前生成的文章為第幾條記錄，算出已經(jīng)執(zhí)行到總數(shù)的百分之幾。再實(shí)時(shí)調(diào)用一次js函數(shù)實(shí)現(xiàn)進(jìn)度塊的變化，就OK了。
關(guān)于進(jìn)度條，大家可以上網(wǎng)隨便找一個(gè)，我用了這里的一個(gè)進(jìn)度條效果，因?yàn)楹?jiǎn)單。http://www.dbjr.com.cn/article/18177.htm
當(dāng)然，這個(gè)進(jìn)度條并不適合我們現(xiàn)在的具體使用，關(guān)鍵部分的js需要修改如下：

復(fù)制代碼代碼如下:

//i為當(dāng)前執(zhí)行到的記錄,count為總數(shù) 
//比如總共需要生成的靜態(tài)數(shù)為100，那么現(xiàn)在執(zhí)行到5%，那么進(jìn)度條塊進(jìn)到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 + "%"; 
} 
} 

以下則是關(guān)鍵的c#后臺(tái)代碼的關(guān)鍵，按照上面這個(gè)函數(shù)，我們主要根據(jù)執(zhí)行到的記錄，輸出類(lèi)似以下的代碼：

復(fù)制代碼代碼如下:

< 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,以及相關(guān)html代碼之后才可以輸出，否則在頭部就輸出的話(huà)，肯定不行。因?yàn)榍懊娑紱](méi)有這個(gè)函數(shù)，就執(zhí)行到這個(gè)函數(shù)。(你想用Literal控件去控制其輸出位置？你可以自己試下，有什么結(jié)果？)所以，索性我們把相關(guān)進(jìn)度條的代碼一次性輸出，可以把其做成一個(gè)html文件，這個(gè)也是在網(wǎng)上看到一篇文章的時(shí)候的做法。名為bar.htm

復(fù)制代碼代碼如下:

<!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>進(jìn)度條</title> 
<script language="javascript" type="text/javascript"> 
function $(obj){ 
return document.getElementById(obj); 
} 
//i為當(dāng)前執(zhí)行到的記錄,count為總數(shù) 
//比如總共需要生成的靜態(tài)數(shù)為100，那么現(xiàn)在執(zhí)行到5%，那么進(jìn)度條塊進(jìn)到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> 

而我們用來(lái)模擬的代碼如下：

復(fù)制代碼代碼如下:

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是讀取這個(gè)htm文件，這個(gè)函數(shù)及其相關(guān)文件操作類(lèi)，大家可以在這篇文章中得到！http://www.dbjr.com.cn/article/15125.htm加上條件語(yǔ)句

復(fù)制代碼代碼如下:

i==0

是因?yàn)閎ar.htm在讀取出來(lái)之后，只需要輸出一次就可以了。最終效果如下：