Asp.net to achieve progress bar effect

Time:2021-9-4

Let’s look at the progress bar effect first

After I click the button, he will display the progress page. After the progress is completed, the progress bar will disappear. In fact, it is relatively simple.

We need a progress bar code file progressbar.htm (Note: there are no head tags)

<script language="javascript">
  function SetPorgressBar(pos) {
    //Center progress bar

    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";

    //Set progress bar percentage 
    ProgressBar.style.width = pos + "%";
    ProgressText.innerHTML = pos + "%";
  }

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

  //Hide progress bar when finished
  function SetCompleted() {
    ProgressBarSide.style.display = "none";
  }

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

Then you need a progress bar class, progressbar.cs

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

namespace ZhuoYueE.Dop.Web.UI
{
  /// <summary>
  ///Show progress bar
  /// </summary>
  public class ProgressBar : System.Web.UI.Page
  {
    /// <summary>
    ///Maximum
    /// </summary>
    private int MaxValue
    {
      get
      {
        if (ViewState["MaxValue"] == null)
        {
          return 0;
        }
        else
        {
          return Convert.ToInt32(ViewState["MaxValue"]);
        }
      }
      set
      {
        ViewState["MaxValue"] = value;
      }
    }
    /// <summary>
    ///Current value
    /// </summary>
    private int ThisValue
    {
      get
      {
        if (ViewState["ThisValue"] == null)
        {
          return 0;
        }
        else
        {
          return Convert.ToInt32(ViewState["ThisValue"]);
        }
      }
      set
      {
        ViewState["ThisValue"] = value;
      }
    }
    /// <summary>
    ///Current page
    /// </summary>
    System.Web.UI.Page m_page;
    /// <summary>
    ///Function Description: constructor
    ///Author: Huang zh
    ///Created on: 2016-05-06 11:54:34
    ///Task No.:
    /// </summary>
    ///< param name = "page" > current page < / param >
    public ProgressBar(System.Web.UI.Page page)
    {
      m_page = page;
    }

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

    /// <summary>
    ///Function Description: initialize progress bar
    ///Author: Huang zh
    ///Created on: 2016-05-06 11:55:26
    ///Task No.:
    /// </summary>
    public void InitProgress()
    {
      //Display the progress bar interface according to 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>
    ///Function Description: set title
    ///Author: Huang zh
    ///Created on: 2016-05-06 11:55:36
    ///Task No.:
    /// </summary>
    /// <param name="strTitle">strTitle</param>
    public void SetTitle(string strTitle)
    {
      string strjsBlock = "<script>SetTitle('" + strTitle + "'); </script>";

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

    /// <summary>
    ///Function Description: setting progress
    ///Author: Huang zh
    ///Created on: 2016-05-06 11:55:45
    ///Task No.:
    /// </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('" + dblstep.ToString("0.00") + "'); </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();
    }
  }
}

Then call the method. The call is very simple. Add code to the button event or other places on the page, such as in the button event

protected void btnImport_Click(object sender, EventArgs e)
    {
      ProgressBar pb = new ProgressBar(this);
      pb.SetMaxValue(110);
      pb.InitProgress();
      Pb. Settitle ("this is a test data");
      for (int i = 1; i <= 110; i++)
      {
        pb.AddProgress(1);
        //Here, thread hibernation is used instead of actual operations, such as loading data
        System.Threading.Thread.Sleep(50);
      }
      pb.DisponseProgress();
    }

Well, isn’t it very simple.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.

Recommended Today

Beautify your code VB (VBS) code formatting implementation code

However, vb.net does have many new functions that VB6 does not have. The automatic typesetting of code is one, which is the function we want to realize today – VB code formatting.Let’s look at the effect: Before formatting: Copy codeThe code is as follows: For i = 0 To WebBrowser1.Document.All.length – 1 If WebBrowser1.Document.All(i).tagName = […]