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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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();
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();
    }