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

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

效果图:

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

代码:

前台:

<!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="/UploadFiles/2021-04-02/jquery-2.1.4.min.js">

后台:

// 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,进度条

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“Asp.net基于ajax和jquery-ui实现进度条”

暂无“Asp.net基于ajax和jquery-ui实现进度条”评论...