網(wǎng)上已經(jīng)有很多web進(jìn)度條的例子，但是很多都是估算時(shí)間，不能正真反應(yīng)任務(wù)的真實(shí)進(jìn)度。我自己結(jié)合多線程和showmodaldialog制做了一個(gè)實(shí)時(shí)進(jìn)度條，原理很簡(jiǎn)單：使用線程開(kāi)始長(zhǎng)時(shí)間的任務(wù)，定義一個(gè)session，當(dāng)任務(wù)進(jìn)行到不同的階段改變session的值，線程開(kāi)始的同時(shí)使用showmodaldialog打開(kāi)一個(gè)進(jìn)度條窗口，不斷刷新這個(gè)窗口獲取session值，反應(yīng)出實(shí)時(shí)的進(jìn)度。下面就來(lái)看看具體的代碼：（文章結(jié)尾處下載源代碼）
先新建一個(gè)default.aspx頁(yè)面，
客戶端代碼：
<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>
服務(wù)器端代碼：
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()
{
//模擬長(zhǎng)時(shí)間任務(wù)
//每個(gè)循環(huán)模擬任務(wù)進(jìn)行到不同的階段
for(int i=0;i<11;i++)
{
system.threading.thread.sleep(1000);
//設(shè)置每個(gè)階段的state值，用來(lái)顯示當(dāng)前的進(jìn)度
session["state"] = i+1;
}
//任務(wù)結(jié)束
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("http:// -->＼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);
}
}
}
新建一個(gè)進(jìn)度條頁(yè)面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>
服務(wù)器端：
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
}
}
聯(lián)系客服
