前台用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>
< html xmlns = "http://www.w3.org/1999/xhtml" >
< 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;
}
}
}
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://www.cnblogs.com/David-Huang/p/5050452.html