Asp.net 는 ajax 와 jquery-ui 를 기반 으로 진도 바 를 실현 합 니 다.

4678 단어 aspnetajaxjqueryui진도 표
프론트 데스크 톱 은 작업 이 끝 날 때 까지 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;
      }
    }
  }
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Spring Boot 에서 AOP 를 사용 하여 웹 층 이상 을 통일 적 으로 처리 하 는 방법
Spring Security 검증 프로 세 스 분석 및 사용자 정의 검증 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage