前台用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. [BZOJ 1218] [HNOI2003] 激光炸弹 【n logn 做法 - 扫描线 + 线段树】

    题目链接:BZOJ - 1218 题目分析 可以覆盖一个边长为 R 的正方形,但是不能包括边界,所以等价于一个边长为 R - 1 的正方形. 坐标范围 <= 5000 ,直接 n^2 的二维前缀 ...

  2. matlab在图片上画框

    matlab在图片上画框 之前写过一个MATLAB在图片上画框的代码, http://blog.csdn.net/carson2005/article/details/17262811 最近使用后发现 ...

  3. Android 通过开源框架AsyncHttpClient进行get和post请求

    使用时无需将这些代码放入子线程去执行,因为其内部已经封装到一个线程中运行了! public void asyncHttpClientGet(View view) { AsyncHttpClient c ...

  4. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  5. Delphi中禁止WebBrowser右键的方法

    uses MSHtml; //在控件标签additional中找到TApplicationEvents控件,拖到窗体上．在TApplicationEvents的OnMessage事件中加入以下代码: ...

  6. 【JS】(+﹏+)~

    1 var o = new Object() var o = new Object // 如果没有参数,括号可以省略 2 this.init.apply(this, arguments) ??? // ...

  7. HDU 5922 Minimum’s Revenge 【模拟】 (2016CCPC东北地区大学生程序设计竞赛)

    Minimum's Revenge Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  8. App被拒绝的原因收录

    转自:dApps开发者 » APP被苹果App Store拒绝的79个原因(未完待续) 1.程序有重大bug,程序不能启动,或者中途退出.2.绕过苹果的付费渠道,我们之前游戏里的用兑换码兑换金币.3. ...

  9. 找出数组中出现次数超过一半的数，现在有一个数组，已知一个数出现的次数超过了一半，请用O(n)的复杂度的算法找出这个数

    找出数组中出现次数超过一半的数,现在有一个数组,已知一个数出现的次数超过了一半,请用O(n)的复杂度的算法找出这个数 #include<iostream>using namespace s ...

  10. Segments - POJ 3304 (判断直线与线段是否相交)

    题目大意:给出一些线段,然后判断这些线段的投影是否有可能存在一个公共点.   分析:如果这些线段的投影存在一个公共点,那么过这个公共点作垂线一定与所有的直线都想交,于是题目转化成是否存在一个直线可以经 ...