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

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

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

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

Js部分加入如下Js代码：

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

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

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

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

1. public partial class DigitStatus : System.Web.UI.Page, ICallbackEventHandler
2. {
3.     private string AspEventArgs;
4.     protected void Page_Load(object sender, EventArgs e)
5.     {
7.     }
8.     
9.     public void RaiseCallbackEvent(string EventArgs)
10.     {
11.         AspEventArgs = EventArgs;
12.     }
14.     public string GetCallbackResult()
15.     {
16.         int i = Convert.ToInt32(AspEventArgs);
17.         i++;    
18.         return i.ToString();
19.     }
20. }

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