本文将利用Asp.Net的回调机制使用Js实现一个简易进度条,其效果如下:
首先,在HTML文档中加入如下代码:
-
<div>
-
<tableclass="statusTable">
-
<tr>
-
<tdid="progress1">
-
</td>
-
<tdid="progress2">
-
</td>
-
<tdid="progress3">
-
</td>
-
<tdid="progress4">
-
</td>
-
<tdid="progress5">
-
</td>
-
<tdid="progress6">
-
</td>
-
<tdid="progress7">
-
</td>
-
<tdid="progress8">
-
</td>
-
<tdid="progress9">
-
</td>
-
<tdid="progress10">
-
</td>
-
</tr>
-
</table>
-
<asp:LabelID="Label1"runat="server"ForeColor="Red"Text="0"></asp:Label>
-
</div>
-
<div>
-
<inputid="btnRequest"type="button"value="请求"onclick="Request()"/>
-
<inputid="btnStop"type="button"value="停止"disabled="disabled"onclick="Stop()"/>
-
</div>
Js部分加入如下Js代码:
-
<scriptlanguage="javascript"type="text/javascript">
-
varidx=0;
-
varprogressTimer;
-
varprogressInterval=1000;
-
functionRequest()
- {
-
document.getElementById("btnStop").disabled="";
-
document.getElementById("btnRequest").disabled="disabled";
-
if(idx>=10)
- {
- Clear();
-
return;
- }
-
vararg=idx;
-
<%=ClientScript.GetCallbackEventReference(this,"arg","GetMsgBack",null)%>;
- idx++;
-
progressTimer=setTimeout('Request()',progressInterval);
- }
-
functionGetMsgBack(result)
- {
-
document.getElementById('progress'+idx).style.backgroundColor='blue';
-
varstatus=Number(result)*10;
-
document.getElementById("Label1").innerHTML=status+"%";
- }
-
functionStop()
- {
- clearTimeout(progressTimer);
- Clear();
- }
-
functionClear()
- {
- idx=0;
-
document.getElementById("btnStop").disabled="disabled";
-
document.getElementById("btnRequest").disabled="";
-
document.getElementById("Label1").innerHTML="0";
-
for(vari=1;i<=10;i++)
-
document.getElementById('progress'+i).style.backgroundColor='transparent';
- }
- </script>
css样式文件中加入如下代码:
- .statusTable
- {
-
width:100px;
-
border:solid1px#000000;
-
padding-bottom:0px;
-
margin-bottom:0px;
- }
- .statusTabletd
- {
-
height:20px;
- }
Asp.Net服务端实现回调代码如下:
-
publicpartialclassDigitStatus:System.Web.UI.Page,ICallbackEventHandler
- {
-
privatestringAspEventArgs;
-
protectedvoidPage_Load(objectsender,EventArgse)
- {
- }
-
publicvoidRaiseCallbackEvent(stringEventArgs)
- {
- AspEventArgs=EventArgs;
- }
-
publicstringGetCallbackResult()
- {
-
inti=Convert.ToInt32(AspEventArgs);
- i++;
-
returni.ToString();
- }
- }
这样,一个简易的进度条就实现了,运行即可得到如页首处的效果。
分享到:
相关推荐
ASP.NET实现EXCEL数据导入进度条ajax。有已经实现的工程源代码。有进度条和百分比统计,已导入数量和总数统计。
asp.net前台显示后台处理进度条,代码简单清晰,文章参考http://nongfuit.com/html/70/201201/8383.html有效果图
asp.net中一段显示下载进度条的下载文件代码
asp.net进度条控件,asp.net进度条[asp.net2.0] 本控件使用XMLHTTP组件在浏览器端异步请求进度条实时数据,同时由特定的Http Module进行快速响应,不会因为用户的高负载操作而轻易失去响应,或者阻塞。可以根据不同...
asp.net上传图片带进度条
一个基于C#+ ASP.NET 2.0 实现的带进度条上传控件源码。
目前的几个项目中上传图片都一直用的一个Jquery上传插件,能完整的显示上传列表,上传进度条。可在一个页面设置多个上传控件。上传的为asp.net demo,直接下载解压即可运行。运行环境:VS2008。
觉得不错,但是有个不足的地方,就是当我上传一个文件时把页面关闭的时候 这个文件其实还在上传着!
Asp.net回调函数源码,实现页面无刷新调用服务器端函数并返回结果,简单易懂,希望能给朋友们提高帮助!
ASP.NET 回调测试程序,例子简单实用,对初学者有参考意义
asp.net页面加载前进度条 .net 滚动条 C# .net页面状态
asp.net 批量上传文件,进度条显示 ajax extjs 源码实例
ASP.NET文件上传,带进度条以及上传文件大小控制。
ExtJS ASP.NET实现真实的进度条显示服务器端长时间操作
C#写的ASP.NET上传到FTP上,文件,文件夹都可以。 首先,选择本地文件或者文件夹,然后点击上传按钮以后,有一个压缩过程,该过程也有一个实时更新的进度条,并可以显示压缩所需的实时更新的剩余时间,压缩完成以后...
asp.net上传大文件带进度条 多种风格供选择,非常好哈
asp.net单文件带进度条上传,不属于任务控件,也不是flash类型的上传,完全是asp.net、js、css实现上传。源码为开发测试版,需要使用的亲需要注意修改配置文件。详见配套博客:...
【ASP.NET编程知识】asp.net单文件带进度条上传的解决方案.docx