前台运用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 }
时间： 2024-12-26 23:41:26