Asp.net基于ajax和jquery-ui实现进度条
这篇文章主要介绍了Asp.net基于ajax和jquery-ui实现进度条,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前台用ajax不停进行查询,直到任务完成。进度条用的是jquery-ui。后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中。
代码作为简单示例,实际应用时应对资源释放、防止多线程混乱等做进一步控制。
效果图:
代码:
前台:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title ></ title > < script src = "Scripts/jquery-2.1.4.min.js" ></ script > < script src = "Scripts/jquery-ui-1.11.4.min.js" ></ script > < link href = "Content/themes/base/all.css" rel = "external nofollow" rel = "stylesheet" /> < script type = "text/javascript" > function GetProgress() { $.ajax({ url: "/Handler1.ashx", type: "POST", data: { "RequestType": "AjaxRequest", "Method": "GetProgress" }, success: function (data) { if (data != -1) { //工作没有结束,继续查询进度 setTimeout(GetProgress, 100); $("#progress").html(data); $("#progressbar").progressbar({ value: parseInt(data) }); } else { //工作完成 $("#progress").html("done"); $("#progressbar").progressbar({ value: 100 }); $("#btn1").attr("disabled", false); } } }); } function DoWork() { //禁用按钮 $("#btn1").attr("disabled", true); $.ajax({ url: "/Handler1.ashx", type: "POST", data: { "RequestType": "AjaxRequest", "Method": "DoWork" } }); //开始查询进度 setTimeout(GetProgress, 500); } </ script > </ head > < body > < div > < input type = "button" id = "btn1" value = "开始" onclick = "DoWork();" /> < label id = "progress" ></ label > < div id = "progressbar" ></ div > </ div > </ body > </ html > |
后台:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | // 2015年12月16日 09:53:11 // David Huang // 进度条示例 namespace ProgressTest { using System; using System.Threading; using System.Web; /// <summary> /// Handler1 的摘要说明 /// < /summary > public class Handler1 : IHttpHandler { // context private HttpContext context; public bool IsReusable { get { return false ; } } public void ProcessRequest(HttpContext context) { this.context = context; if (context.Request[ "RequestType" ] == "AjaxRequest" ) { if (context.Request[ "Method" ] == "GetProgress" ) { context.Response.Clear(); context.Response.Write(this.GetProgress()); context.Response.End(); } else { this.DoWork(); } } } /// <summary> /// 开始工作 /// < /summary > private void DoWork() { for (int i = 0; i < 100; i++) { // 记录进度 // 实际应用中需要进一步控制(利用用户信息、cookies等),防止并发造成混乱 this.context.Application[ "progress" ] = i + 1; Random r = new Random(); Thread.Sleep(r.Next(10, 100)); } // 完成后释放资源 this.context.Application[ "progress" ] = null; } /// <summary> /// 查询进度 /// < /summary > /// <returns>进度< /returns > private int GetProgress() { if (this.context.Application[ "progress" ] != null) { return (int)this.context.Application[ "progress" ]; } else { return -1; } } } } |
以上就是本文的全部内容,希望对大家的学习有所帮助