Asp.net基于ajax和jquery-ui實現(xiàn)進度條

更新時間：2020年12月03日 11:11:15 作者：David Huang

這篇文章主要介紹了Asp.net基于ajax和jquery-ui實現(xiàn)進度條,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

　　前臺用ajax不停進行查詢，直到任務(wù)完成。進度條用的是jquery-ui。后臺用一般處理程序處理相應(yīng)，進度信息保存在HttpContext.Application中。

　　代碼作為簡單示例，實際應(yīng)用時應(yīng)對資源釋放、防止多線程混亂等做進一步控制。

效果圖：

代碼：

前臺：

<!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) {
            //工作沒有結(jié)束，繼續(xù)查詢進度
            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++)
      {
        // 記錄進度
        // 實際應(yīng)用中需要進一步控制（利用用戶信息、cookies等），防止并發(fā)造成混亂
        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;
      }
    }
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: