ASP.NET技巧:教你制做Web实时进度条
网上已经有很多web进度条的例子,但是很多都是估算时间,不能正真反应任务的真实进度。我自己结合多线程和showmodaldialog制做了一个实时进度条,原理很简单:使用线程开始长时间的任务,定义一个session,当任务进行到不同的阶段改变session的值,线程开始的同时使用showmodaldialog打开一个进度条窗口,不断刷新这个窗口获取session值,反应出实时的进度。下面就来看看具体的代码:(文章结尾处下载源代码)
先新建一个default.aspx页面,
客户端代码:
<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>
服务器端代码:
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()
{
//模拟长时间任务
//每个循环模拟任务进行到不同的阶段
for(int i=0;i<11;i++)
{
system.threading.thread.sleep(1000);
//设置每个阶段的state值,用来显示当前的进度
session["state"] = i+1;
}
//任务结束
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("// -->\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);
}
}
}
新建一个进度条页面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>
服务器端:
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
}
}
上一篇: win7下mysql5.7.17安装配置方法图文教程
下一篇: 详解Mysql主从同步配置实战