ASP.NET
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

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

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Asp.net基于ajax和jquery-ui实现进度条，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

　　前台用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基于ajax和jquery-ui实现进度条全部内容，希望文章能够帮你解决Asp.net基于ajax和jquery-ui实现进度条所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：asp.net
猜你在找的ASP.NET相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ASP.NET教程
热门ASP.NET教程