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>

<div id="ProgressBarSide" style="position: absolute; height: 21px; width: 100px;

  color: Silver; border-width: 1px; border-style: Solid; display: block">

  <div id="ProgressBar" style="position: absolute; height: 21px; width: 0%; background-color: #1475BB">

  </div>

  <div id="ProgressText" style="position: absolute; height: 21px; width: 100%; text-align: center">

  </div>

  <div id="ProgressTitle" style="position: absolute; height: 21px; top: 21px; width: 100%;

    text-align: center">

  </div>

</div>







然后需要一个进度条类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();

    }





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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。