Asp.net基于ajax和jquery-ui实现进度条

 更新时间:2020-12-09 21:00:55   作者:佚名   我要评论(0)

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

  前台用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="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>

后台:

// 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;
      }
    }
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • ASP.NET实现进度条效果
  • asp.net mvc 实现文件上传带进度条的思路与方法
  • asp.net文件上传带进度条实现案例(多种风格)
  • asp.net单文件带进度条上传的解决方案
  • Asp.Net 无刷新文件上传并显示进度条的实现方法及思路
  • asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)
  • asp.net 在客户端显示服务器端任务处理进度条的探讨
  • asp.net 生成静态页时的进度条显示

相关文章

  • Asp.net基于ajax和jquery-ui实现进度条

    Asp.net基于ajax和jquery-ui实现进度条

      前台用ajax不停进行查询,直到任务完成。进度条用的是jquery-ui。后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中。   代码作为简单示
    2020-12-09
  • TreeNodeCheckChanged事件触发方法代码实例

    TreeNodeCheckChanged事件触发方法代码实例

    这个事件不会主动postback,需要手动写javascript触发。对网上找到的方法做了些改进,增加UpdatePanel,以免页面不停的刷。这里就不考虑性能神马的了,因为既然项目
    2020-12-09
  • asp.net core 使用 TestServer 来做集成测试的方法

    asp.net core 使用 TestServer 来做集成测试的方法

    Intro 之前我的项目里的集成测试是随机一个端口,每次都真实的启动一个 WebServer,之前也有看到过微软文档上 TestServer 的介绍,当时没仔细看过以为差不多就没用,
    2020-12-09
  • Excel自定义关闭按钮实现代码

    Excel自定义关闭按钮实现代码

    遇到过这样一个需求,是在excel关闭的时候,不要excel本身的保存窗口,只用自定义的. 这个的需要第一,是点击关闭时候触发, 第二;触发后,不能还是弹出那个窗口 第
    2020-12-09
  • Asp.net Core 3.1基于AspectCore实现AOP实现事务、缓存拦截器功能

    Asp.net Core 3.1基于AspectCore实现AOP实现事务、缓存拦截器功能

    最近想给我的框架加一种功能,就是比如给一个方法加一个事务的特性Attribute,那这个方法就会启用事务处理。给一个方法加一个缓存特性,那这个方法就会进行缓存。 这
    2020-12-09
  • .net core中的Authorization过滤器使用

    .net core中的Authorization过滤器使用

    前言 咱们上篇说到,过滤的简单介绍,但是未介绍如何使用,接下来几篇,我来给大家讲讲如何使用,今天第一篇是Authorization。认证过滤器, 开发环境介绍 开发工具
    2020-12-09
  • Asp.Net Core实现Excel导出功能的实现方法

    Asp.Net Core实现Excel导出功能的实现方法

    在web应用程序开发时,或许你会遇到这样的需求,如何在 Asp.Net Core 中实现 excel 或者 word 的导入导出,在 NuGet 上有大量的工具包可以实现这样的功能,本篇就讨
    2020-12-09
  • C++可变参数函数的实现方法示例

    C++可变参数函数的实现方法示例

    C++编程中实现可变参数函数有多种途径,本文介绍一种最常见的实现途径,即可变参数宏方法:形参生命为省略符,函数实现时用参数列表宏访问参数。 1. 可变参数宏实现
    2020-12-06
  • python中二分查找法的实现方法

    python中二分查找法的实现方法

    如果想要在有序数据中进行查找想要的数据,二分查找法就个好方法,它可以大大缩短了搜索时间,是一种常见的查找方法。二分查找很好写,却很难写对,下面,小编就简单
    2020-12-06
  • C++类型转换的深入总结

    C++类型转换的深入总结

    C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是: TYPE b = (TYPE)a。 C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用。 const_
    2020-12-06

最新评论