前台用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 }