Teilen Sie ein anschauliches Beispiel für die Implementierung eines Fortschrittsbalkens in ASP.NET

Dieser Artikel stellt hauptsächlich die ASP.NET-Implementierung eines einfachen Fortschrittsbalkens vor. Er hat einen gewissen Referenzwert kann darauf verweisen

Werfen wir zunächst einen Blick auf die Wirkung des Fortschrittsbalkens

Nachdem ich auf die Schaltfläche geklickt habe, wird die Fortschrittsseite angezeigt. Nachdem der Fortschritt abgeschlossen ist, ist das Verschwinden des Fortschrittsbalkens eigentlich relativ einfach.

Wir benötigen eine Fortschrittsbalkencodedatei ProgressBar.htm (Hinweis: Es gibt keine head-Tags)

<script language="javascript">
  function SetPorgressBar(pos) {
    //设置进度条居中

    var screenWidth = document.body.offsetWidth;
    ProgressBarSide.style.width = Math.round(screenWidth / 2) + "px";
    ProgressBarSide.style.left = Math.round(screenWidth / 4) + "px";
    ProgressBarSide.style.top = "50px";
    ProgressBarSide.style.height = "21px";
    ProgressBarSide.style.display = "block";

    //设置进度条百分比 
    ProgressBar.style.width = pos + "%";
    ProgressText.innerHTML = pos + "%";
  }

  function SetMaxValue(maxValue) {
    ProgressBarSide.style.width = maxValue + "px";
  }

  //完成后隐藏进度条
  function SetCompleted() {
    ProgressBarSide.style.display = "none";
  }

  function SetTitle(title) {
    ProgressTitle.innerHTML = title;
  }
</script>
<p id="ProgressBarSide" style="position: absolute; height: 21px; width: 100px;
  color: Silver; border-width: 1px; border-style: Solid; display: block">
  <p id="ProgressBar" style="position: absolute; height: 21px; width: 0%; background-color: #1475BB">
  </p>
  <p id="ProgressText" style="position: absolute; height: 21px; width: 100%; text-align: center">
  </p>
  <p id="ProgressTitle" style="position: absolute; height: 21px; top: 21px; width: 100%;
    text-align: center">
  </p>
</p>

Dann benötigen wir eine Fortschrittsbalkenklasse ProgressBar.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace ZhuoYueE.Dop.Web.UI
{
  /// <summary>
  ///显示进度条
  /// </summary>
  public class ProgressBar : System.Web.UI.Page
  {
    /// <summary>
    /// 最大值
    /// </summary>
    private int MaxValue
    {
      get
      {
        if (ViewState["MaxValue"] == null)
        {
          return 0;
        }
        else
        {
          return Convert.ToInt32(ViewState["MaxValue"]);
        }
      }
      set
      {
        ViewState["MaxValue"] = value;
      }
    }
    /// <summary>
    /// 当前值
    /// </summary>
    private int ThisValue
    {
      get
      {
        if (ViewState["ThisValue"] == null)
        {
          return 0;
        }
        else
        {
          return Convert.ToInt32(ViewState["ThisValue"]);
        }
      }
      set
      {
        ViewState["ThisValue"] = value;
      }
    }
    /// <summary>
    /// 当前页面
    /// </summary>
    System.Web.UI.Page m_page;
    /// <summary>
    /// 功能描述:构造函数
    /// 作　　者:huangzh
    /// 创建日期:2016-05-06 11:54:34
    /// 任务编号:
    /// </summary>
    /// <param name="page">当前页面</param>
    public ProgressBar(System.Web.UI.Page page)
    {
      m_page = page;
    }

    public void SetMaxValue(int intMaxValue)
    {
      MaxValue = intMaxValue;
    }

    /// <summary>
    /// 功能描述:初始化进度条
    /// 作　　者:huangzh
    /// 创建日期:2016-05-06 11:55:26
    /// 任务编号:
    /// </summary>
    public void InitProgress()
    {
      //根据ProgressBar.htm显示进度条界面
      string templateFileName = AppDomain.CurrentDomain.BaseDirectory + "ProgressBar.htm";
      StreamReader reader = new StreamReader(@templateFileName, System.Text.Encoding.GetEncoding("GB2312"));
      string strhtml = reader.ReadToEnd();
      reader.Close();
      m_page.Response.Write(strhtml);
      m_page.Response.Flush();
    }

    /// <summary>
    /// 功能描述:设置标题
    /// 作　　者:huangzh
    /// 创建日期:2016-05-06 11:55:36
    /// 任务编号:
    /// </summary>
    /// <param name="strTitle">strTitle</param>
    public void SetTitle(string strTitle)
    {
      string strjsBlock = "<script>SetTitle(&#39;" + strTitle + "&#39;); </script>";

      m_page.Response.Write(strjsBlock);
      m_page.Response.Flush();
    }

    /// <summary>
    /// 功能描述:设置进度
    /// 作　　者:huangzh
    /// 创建日期:2016-05-06 11:55:45
    /// 任务编号:
    /// </summary>
    /// <param name="percent">percent</param>
    public void AddProgress(int intpercent)
    {
      ThisValue = ThisValue + intpercent;
      double dblstep = ((double)ThisValue / (double)MaxValue) * 100;

      string strjsBlock = "<script>SetPorgressBar(&#39;" + dblstep.ToString("0.00") + "&#39;); </script>";

      m_page.Response.Write(strjsBlock);
      m_page.Response.Flush();
    }


    public void DisponseProgress()
    {
      string strjsBlock = "<script>SetCompleted();</script>";
      m_page.Response.Write(strjsBlock);
      m_page.Response.Flush();
    }
  }
}

Dann ist es Zeit, die Methode aufzurufen. Der Aufruf ist ganz einfach. Fügen Sie einfach Code zum Schaltflächenereignis auf der Seite oder an einer anderen Stelle hinzu in einem Button-Event

protected void btnImport_Click(object sender, EventArgs e)
    {
      ProgressBar pb = new ProgressBar(this);
      pb.SetMaxValue(110);
      pb.InitProgress();
      pb.SetTitle("这是一个测试数据");
      for (int i = 1; i <= 110; i++)
      {
        pb.AddProgress(1);
        //此处用线程休眠代替实际的操作，如加载数据等
        System.Threading.Thread.Sleep(50);
      }
      pb.DisponseProgress();
    }

Das obige ist der detaillierte Inhalt vonTeilen Sie ein anschauliches Beispiel für die Implementierung eines Fortschrittsbalkens in ASP.NET. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!