【Asp】利用Asp.Net回调机制实现进度条-Net-回调机制-进度条

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【利用Asp.Net回调机制实现进度条】，下面是详细的讲解！

利用Asp.Net回调机制实现进度条

其效果如下：

首先,在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();
}
}
这样,一个简易的进度条就实现了，运行即可得到如页首处的效果。

关于利用Asp.Net回调机制实现进度条的用户互动如下：

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细

　　相关问题：

　　答： >>详细