ASP.NET如何实现进度条效果的实例讲解

我们先看下进度条效果

我点击了按钮后他会显示进度页面，进度完成后，进度条消失，其实也是比较简单的了。

我们需要一个进度条代码文件PRogressBar.htm（注意：是没有head这些标签的）

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>
    

然后需要一个进度条类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('" + strTitle + "');
     /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('" + 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();
    }
  }
}
    

然后就是调用方法了，调用很简单，在页面的按钮事件或者其他什么地方加入代码，如在按钮事件里这么用

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();
    }
    

怎么样，是不是很简单呢。

以上就是ASP.NET如何实现进度条效果的实例讲解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！