`

利用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. }
  19. functionGetMsgBack(result)
  20. {
  21. document.getElementById('progress'+idx).style.backgroundColor='blue';
  22. varstatus=Number(result)*10;
  23. document.getElementById("Label1").innerHTML=status+"%";
  24. }
  25. functionStop()
  26. {
  27. clearTimeout(progressTimer);
  28. Clear();
  29. }
  30. functionClear()
  31. {
  32. idx=0;
  33. document.getElementById("btnStop").disabled="disabled";
  34. document.getElementById("btnRequest").disabled="";
  35. document.getElementById("Label1").innerHTML="0";
  36. for(vari=1;i<=10;i++)
  37. document.getElementById('progress'+i).style.backgroundColor='transparent';
  38. }
  39. </script>
css样式文件中加入如下代码:
  1. .statusTable
  2. {
  3. width:100px;
  4. border:solid1px#000000;
  5. padding-bottom:0px;
  6. margin-bottom:0px;
  7. }
  8. .statusTabletd
  9. {
  10. height:20px;
  11. }
Asp.Net服务端实现回调代码如下:
  1. publicpartialclassDigitStatus:System.Web.UI.Page,ICallbackEventHandler
  2. {
  3. privatestringAspEventArgs;
  4. protectedvoidPage_Load(objectsender,EventArgse)
  5. {
  6. }
  7. publicvoidRaiseCallbackEvent(stringEventArgs)
  8. {
  9. AspEventArgs=EventArgs;
  10. }
  11. publicstringGetCallbackResult()
  12. {
  13. inti=Convert.ToInt32(AspEventArgs);
  14. i++;
  15. returni.ToString();
  16. }
  17. }
这样,一个简易的进度条就实现了,运行即可得到如页首处的效果。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics