繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 利用Asp.Net回调机制实现进度条
- ASP.NET
- 如何使用vb6.0来实现中文实名搜索
- C#实现Window管道技术
- 记录下一些关于测试工具NUNIT的链接资料，有兴趣的朋友也可以跳过去看看
- 编写与.NET属性窗口交互的RAD组件（自序）
- asp.net 关于form认证的一般设置：
- 编写与.NET属性窗口交互的RAD组件（一）
- ActiveX控件的打包发布[无证书发布](一)
- Visual SourceSafe 6.0 的问题思考
- VB报表输出的问题，恳请不吝赐教
- 证书和签名--试用微软提供的证书测试工具系列
- [dotNET]如何利用ConfigurationSettings.AppSettings.GetValues读取配置文件中多个...
- 使用C#编写DES加密程序的framework
- 令你的网页速度大大提高
- 怎样得到一个系统盘的全名，不是字符，是全名，如：本地磁盘(C:)？
- r在richtextbox中插入动画/控件
- Code: Writing Text to a File (Visual Basic)
- 算法讨论:哲学家就餐问题
- 我们所要关注的是什么？
- firebird 连接嵌入式版本
- 从Csharp走到VB.Net(一):MyClass保留字
ASP.NET 中的 利用Asp.Net回调机制实现进度条
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-11 浏览: 101 ::
收藏到网摘: n/a
本文将利用Asp.Net的回调机制使用Js实现一个简易进度条 其效果如下：
首先,在HTML文档中加入如下代码：
<div>
<table class="statusTable">
<tr>
<td id="progress1">
</td>
<td id="progress2">
</td>
<td id="progress3">
</td>
<td id="progress4">
</td>
<td id="progress5">
</td>
<td id="progress6">
</td>
<td id="progress7">
</td>
<td id="progress8">
</td>
<td id="progress9">
</td>
<td id="progress10">
</td>
</tr>
</table>
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="0"></asp:Label>
</div>
<div>
<input id="btnRequest" type="button" value="请求" onclick="Request()" />
<input id="btnStop" type="button" value="停止" disabled="disabled" onclick="Stop()" />
</div>
Js部分加入如下Js代码：
<script language="javascript" type="text/javascript">
var idx = 0;
var progressTimer;
var progressInterval = 1000;
function Request()
{
document.getElementById("btnStop").disabled = "";
document.getElementById("btnRequest").disabled = "disabled";
if(idx >= 10)
{
Clear();
return;
}
var arg = idx;
<%= ClientScript.GetCallbackEventReference(this, "arg", "GetMsgBack",null) %>;
idx++;
progressTimer = setTimeout('Request()',progressInterval);
}
function GetMsgBack(result)
{
document.getElementById('progress'+idx).style.backgroundColor = 'blue';
var status = Number(result) * 10;
document.getElementById("Label1").innerHTML = status + "%";
}
function Stop()
{
clearTimeout(progressTimer);
Clear();
}
function Clear()
{
idx = 0;
document.getElementById("btnStop").disabled = "disabled";
document.getElementById("btnRequest").disabled = "";
document.getElementById("Label1").innerHTML = "0";
for (var i = 1; i <= 10; i++)
document.getElementById('progress' + i).style.backgroundColor = 'transparent';
}
</script>
css样式文件中加入如下代码：
.statusTable
{
width:100px;
border:solid 1px #000000;
padding-bottom:0px;
margin-bottom:0px;
}
.statusTable td
{
height:20px;
}
Asp.Net服务端实现回调代码如下：
public partial class DigitStatus : System.Web.UI.Page, ICallbackEventHandler
{
private string AspEventArgs;
protected void Page_Load(object sender, EventArgs e)
{
}
public void RaiseCallbackEvent(string EventArgs)
{
AspEventArgs = EventArgs;
}
public string GetCallbackResult()
{
int i = Convert.ToInt32(AspEventArgs);
i++;
return i.ToString();
}
}
这样,一个简易的进度条就实现了，运行即可得到如页首处的效果。
评论 (0) All
