欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET实现进度条效果

程序员文章站 2024-01-04 15:07:22
我们先看下进度条效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了。 我们需要一个进度条代码文件progressbar.htm(注意...

我们先看下进度条效果

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

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

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

上一篇:

下一篇: