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

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

  • 效果图:

  

  • 代码:

前台:

 <!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="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>

后台:

 // 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 = ; i < ; i++)
{
// 记录进度
// 实际应用中需要进一步控制(利用用户信息、cookies等),防止并发造成混乱
this.context.Application["progress"] = i + ;
Random r = new Random();
Thread.Sleep(r.Next(, ));
}
// 完成后释放资源
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 -;
}
}
}
}

asp.net利用ajax和jquery-ui实现进度条的更多相关文章

  1. asp.net利用Ajax和Jquery在前台向后台传参数并返回值

    1----------前台 首先需要 Jquer的包 <script src="js/jquery-1.9.1.js" type="text/javascript& ...

  2. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  3. ajax大数据排队导出+进度条

    描述 :我们现在有很多数据,分表存放,现在需要有精度条的导出.最后面有完整源码. 效果图:

  4. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  5. asp.net 后台多线程异步处理时的 进度条实现一(Ajax+Ashx实现以及封装成控件的实现)

    (更新:有的同学说源代码不想看,说明也不想看,只想要一个demo,这边提供一下:http://url.cn/LPT50k (密码:TPHU)) 工作好长时间了,这期间许多功能也写成了不少的控件来使用, ...

  6. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  7. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  8. jQuery 实现下载进度条

    //ajax异步上传 $.ajax({ url: "${pageContext.request.contextPath }/upload", type: "POST&qu ...

  9. Asp.net mvc 大文件上传 断点续传 进度条

    概述 项目中需要一个上传200M-500M的文件大小的功能,需要断点续传.上传性能稳定.突破asp.net上传限制.一开始看到51CTO上的这篇文章,此方法确实很不错,能够稳定的上传大文件,http: ...

随机推荐

  1. office web apps

    http://technet.microsoft.com/zh-cn/library/ff431687.aspx http://www.cnblogs.com/erucy/archive/2012/0 ...

  2. Linux iconv使用

    iconv [选项]文件 输入/输出格式规范:-f, --from-code=名称 原始文本编码-t, --to-code=名称 输出编码 信息:-l, --list 列举所有已知的字符集 输出控制: ...

  3. 14.5.5.3 How to Minimize and Handle Deadlocks 如何减少和处理死锁

    14.5.5.3 How to Minimize and Handle Deadlocks 如何减少和处理死锁 这个部分建立在概念信息关于deadlocks 在章节 14.5.5.2, "D ...

  4. apache 服务发布多个项目,只需要更改配置文件(需要设定虚拟主机)

    http://www.php186.com/content/article/apache/24609.html http://blog.sina.com.cn/s/blog_6b689d5901013 ...

  5. HDOJ/HDU 2550 百步穿杨(注意排序)

    Problem Description 时维九月,序属三秋,辽军大举进攻MCA山,战场上两军正交锋.辽军统帅是名噪一时的耶律-James,而MCA方则是派出了传统武将中草药123.双方经过协商,约定在 ...

  6. 4种字符串匹配算法:KMP(下)

    回顾:4种字符串匹配算法:BS朴素 Rabin-karp(上) 4种字符串匹配算法:有限自动机(中) 1.图解 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R ...

  7. C++之拷贝构造函数

    为什么要引入拷贝构造函数?(提出问题) 作用:创建一个对象的同时,使用一个已经存在的对象给另一个对象赋值 做比较:拷贝构造函数:对象被创建 +  用一个已经存在的对象 进行初始化 拷贝赋值函数:对象已 ...

  8. STL之set、multiset、functor&pair使用方法

    set是一个集合容器,其中包含的元素是唯一的,集合中的元素是按照一定的顺序排列的.元素插入过程是按照排序规则插入,所以不能使用指定位置插入. set采用红黑树变体的数据结构实现,红黑树属于平衡二叉树. ...

  9. SIP协议错误代码大全

    100 Trying 说明caller正在呼叫,但还没联系上callee. 180 Ringing 说明callee已经被联系上,callee的铃正在响.收到这个信息后,等待200 OK 181 Ca ...

  10. Google的一些功能和软件

    本博文的主要内容有 .Google的一些功能和软件 Google的一些功能和软件 1.  iGoogle 2.  Google Earth 3.  Google Talk http://www.goo ...