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

这篇文章主要为大家详细介绍了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();
    }

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