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如何实现进度条效果的实例讲解的详细内容，更多内容请关注技术你好其它相关文章！