ASP.NET实现进度条效果
程序员文章站
2024-01-04 15:07:22
我们先看下进度条效果
我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了。
我们需要一个进度条代码文件progressbar.htm(注意...
我们先看下进度条效果
我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了。
我们需要一个进度条代码文件progressbar.htm(注意:是没有head这些标签的)
<script language="javascript"> function setporgressbar(pos) { //设置进度条居中 var screenwidth = document.body.offsetwidth; progressbarside.style.width = math.round(screenwidth / 2) + "px"; progressbarside.style.left = math.round(screenwidth / 4) + "px"; progressbarside.style.top = "50px"; progressbarside.style.height = "21px"; progressbarside.style.display = "block"; //设置进度条百分比 progressbar.style.width = pos + "%"; progresstext.innerhtml = pos + "%"; } function setmaxvalue(maxvalue) { progressbarside.style.width = maxvalue + "px"; } //完成后隐藏进度条 function setcompleted() { progressbarside.style.display = "none"; } function settitle(title) { progresstitle.innerhtml = title; } </script> <div id="progressbarside" style="position: absolute; height: 21px; width: 100px; color: silver; border-width: 1px; border-style: solid; display: block"> <div id="progressbar" style="position: absolute; height: 21px; width: 0%; background-color: #1475bb"> </div> <div id="progresstext" style="position: absolute; height: 21px; width: 100%; text-align: center"> </div> <div id="progresstitle" style="position: absolute; height: 21px; top: 21px; width: 100%; text-align: center"> </div> </div>
然后需要一个进度条类progressbar.cs
using system; using system.collections.generic; using system.linq; using system.web; using system.io; namespace zhuoyuee.dop.web.ui { /// <summary> ///显示进度条 /// </summary> public class progressbar : system.web.ui.page { /// <summary> /// 最大值 /// </summary> private int maxvalue { get { if (viewstate["maxvalue"] == null) { return 0; } else { return convert.toint32(viewstate["maxvalue"]); } } set { viewstate["maxvalue"] = value; } } /// <summary> /// 当前值 /// </summary> private int thisvalue { get { if (viewstate["thisvalue"] == null) { return 0; } else { return convert.toint32(viewstate["thisvalue"]); } } set { viewstate["thisvalue"] = value; } } /// <summary> /// 当前页面 /// </summary> system.web.ui.page m_page; /// <summary> /// 功能描述:构造函数 /// 作 者:huangzh /// 创建日期:2016-05-06 11:54:34 /// 任务编号: /// </summary> /// <param name="page">当前页面</param> public progressbar(system.web.ui.page page) { m_page = page; } public void setmaxvalue(int intmaxvalue) { maxvalue = intmaxvalue; } /// <summary> /// 功能描述:初始化进度条 /// 作 者:huangzh /// 创建日期:2016-05-06 11:55:26 /// 任务编号: /// </summary> public void initprogress() { //根据progressbar.htm显示进度条界面 string templatefilename = appdomain.currentdomain.basedirectory + "progressbar.htm"; streamreader reader = new streamreader(@templatefilename, system.text.encoding.getencoding("gb2312")); string strhtml = reader.readtoend(); reader.close(); m_page.response.write(strhtml); m_page.response.flush(); } /// <summary> /// 功能描述:设置标题 /// 作 者:huangzh /// 创建日期:2016-05-06 11:55:36 /// 任务编号: /// </summary> /// <param name="strtitle">strtitle</param> public void settitle(string strtitle) { string strjsblock = "<script>settitle('" + strtitle + "'); </script>"; m_page.response.write(strjsblock); m_page.response.flush(); } /// <summary> /// 功能描述:设置进度 /// 作 者:huangzh /// 创建日期:2016-05-06 11:55:45 /// 任务编号: /// </summary> /// <param name="percent">percent</param> public void addprogress(int intpercent) { thisvalue = thisvalue + intpercent; double dblstep = ((double)thisvalue / (double)maxvalue) * 100; string strjsblock = "<script>setporgressbar('" + dblstep.tostring("0.00") + "'); </script>"; m_page.response.write(strjsblock); m_page.response.flush(); } public void disponseprogress() { string strjsblock = "<script>setcompleted();</script>"; m_page.response.write(strjsblock); m_page.response.flush(); } } }
然后就是调用方法了,调用很简单,在页面的按钮事件或者其他什么地方加入代码,如在按钮事件里这么用
protected void btnimport_click(object sender, eventargs e) { progressbar pb = new progressbar(this); pb.setmaxvalue(110); pb.initprogress(); pb.settitle("这是一个测试数据"); for (int i = 1; i <= 110; i++) { pb.addprogress(1); //此处用线程休眠代替实际的操作,如加载数据等 system.threading.thread.sleep(50); } pb.disponseprogress(); }
怎么样,是不是很简单呢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。