asp.net利用ajax和jquery-ui实现进度条

　　前台用ajax不停进行查询，直到任务完成。进度条用的是jquery-ui。后台用一般处理程序处理相应，进度信息保存在HttpContext.Application中。

　　代码作为简单示例，实际应用时应对资源释放、防止多线程混乱等做进一步控制。

效果图：

代码：

前台：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="Scripts/jquery-2.1.4.min.js"></script>
 7     <script src="Scripts/jquery-ui-1.11.4.min.js"></script>
 8     <link href="Content/themes/base/all.css" rel="stylesheet" />
 9     <script type="text/javascript">
10         function GetProgress() {
11             $.ajax({
12                 url: "/Handler1.ashx",
13                 type: "POST",
14                 data: { "RequestType": "AjaxRequest", "Method": "GetProgress" },
15                 success: function (data) {
16                     if (data != -1) {
17                         //工作没有结束，继续查询进度
18                         setTimeout(GetProgress, 100);
19                         $("#progress").html(data);
20                         $("#progressbar").progressbar({ value: parseInt(data) });
21                     } else {
22                         //工作完成
23                         $("#progress").html("done");
24                         $("#progressbar").progressbar({ value: 100 });
25                         $("#btn1").attr("disabled", false);
26                     }
27                 }
28             });
29         }
30 
31         function DoWork() {
32             //禁用按钮
33             $("#btn1").attr("disabled", true);
34             $.ajax({
35                 url: "/Handler1.ashx",
36                 type: "POST",
37                 data: { "RequestType": "AjaxRequest", "Method": "DoWork" }
38             });
39             //开始查询进度
40             setTimeout(GetProgress, 500);
41         }
42     </script>
43 
44 </head>
45 <body>
46     <div>
47         <input type="button" id="btn1" value="开始" onclick="DoWork();" />
48         <label id="progress"></label>
49         <div id="progressbar"></div>
50     </div>
51 </body>
52 </html>

后台:

 1 // 2015年12月16日 09:53:11 
 2 // David Huang
 3 // 进度条示例
 4 namespace ProgressTest
 5 {
 6     using System;
 7     using System.Threading;
 8     using System.Web;
 9 
10     /// <summary>
11     /// Handler1 的摘要说明
12     /// </summary>
13     public class Handler1 : IHttpHandler
14     {
15         // context
16         private HttpContext context;
17 
18         public bool IsReusable
19         {
20             get
21             {
22                 return false;
23             }
24         }
25 
26         public void ProcessRequest(HttpContext context)
27         {
28             this.context = context;
29             if (context.Request["RequestType"] == "AjaxRequest")
30             {
31                 if (context.Request["Method"] == "GetProgress")
32                 {
33                     context.Response.Clear();
34                     context.Response.Write(this.GetProgress());
35                     context.Response.End();
36                 }
37                 else
38                 {
39                     this.DoWork();
40                 }
41             }
42         }
43 
44         /// <summary>
45         /// 开始工作
46         /// </summary>
47         private void DoWork()
48         {
49             for (int i = 0; i < 100; i++)
50             {
51                 // 记录进度
52                 // 实际应用中需要进一步控制（利用用户信息、cookies等），防止并发造成混乱
53                 this.context.Application["progress"] = i + 1;
54                 Random r = new Random();
55                 Thread.Sleep(r.Next(10, 100));
56             }
57             // 完成后释放资源
58             this.context.Application["progress"] = null;
59         }
60 
61         /// <summary>
62         /// 查询进度
63         /// </summary>
64         /// <returns>进度</returns>
65         private int GetProgress()
66         {
67             if (this.context.Application["progress"] != null)
68             {
69                 return (int)this.context.Application["progress"];
70             }
71             else
72             {
73                 return -1;
74             }
75         }
76     }
77 }