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

本文将利用Asp.Net的回调机制使用Js实现一个简易进度条，其效果如下：

首先,在HTML文档中加入如下代码：

1. <div>
2. <tableclass="statusTable">
3. <tr>
4. <tdid="progress1">
5. </td>
6. <tdid="progress2">
7. </td>
8. <tdid="progress3">
9. </td>
10. <tdid="progress4">
11. </td>
12. <tdid="progress5">
13. </td>
14. <tdid="progress6">
15. </td>
16. <tdid="progress7">
17. </td>
18. <tdid="progress8">
19. </td>
20. <tdid="progress9">
21. </td>
22. <tdid="progress10">
23. </td>
24. </tr>
25. </table>
26. <asp:LabelID="Label1"runat="server"ForeColor="Red"Text="0"></asp:Label>
27. </div>
28. <div>
29. <inputid="btnRequest"type="button"value="请求"onclick="Request()"/>
30. <inputid="btnStop"type="button"value="停止"disabled="disabled"onclick="Stop()"/>
31. </div>

Js部分加入如下Js代码：

1. <scriptlanguage="javascript"type="text/javascript">
2. varidx=0;
3. varprogressTimer;
4. varprogressInterval=1000;
5. functionRequest()
6. {
7. document.getElementById("btnStop").disabled="";
8. document.getElementById("btnRequest").disabled="disabled";
9. if(idx>=10)
10. {
11. Clear();
12. return;
13. }
14. vararg=idx;
15. <%=ClientScript.GetCallbackEventReference(this,"arg","GetMsgBack",null)%>;
16. idx++;
17. progressTimer=setTimeout('Request()',progressInterval);
18. }
20. functionGetMsgBack(result)
21. {
22. document.getElementById('progress'+idx).style.backgroundColor='blue';
23. varstatus=Number(result)*10;
24. document.getElementById("Label1").innerHTML=status+"%";
25. }
27. functionStop()
28. {
29. clearTimeout(progressTimer);
30. Clear();
31. }
33. functionClear()
34. {
35. idx=0;
36. document.getElementById("btnStop").disabled="disabled";
37. document.getElementById("btnRequest").disabled="";
38. document.getElementById("Label1").innerHTML="0";
39. for(vari=1;i<=10;i++)
40. document.getElementById('progress'+i).style.backgroundColor='transparent';
42. }
43. </script>

css样式文件中加入如下代码：

1. .statusTable
2. {
3. width:100px;
4. border:solid1px#000000;
5. padding-bottom:0px;
6. margin-bottom:0px;
7. }
9. .statusTabletd
10. {
11. height:20px;
12. }

Asp.Net服务端实现回调代码如下：

1. publicpartialclassDigitStatus:System.Web.UI.Page,ICallbackEventHandler
2. {
3. privatestringAspEventArgs;
4. protectedvoidPage_Load(objectsender,EventArgse)
5. {
7. }
9. publicvoidRaiseCallbackEvent(stringEventArgs)
10. {
11. AspEventArgs=EventArgs;
12. }
14. publicstringGetCallbackResult()
15. {
16. inti=Convert.ToInt32(AspEventArgs);
17. i++;
18. returni.ToString();
19. }
20. }

这样,一个简易的进度条就实现了，运行即可得到如页首处的效果。