小菜鸟的温暖小窝
0%

asp.net 的一个简单进度条功能

发表于 更新于
本文字数： 4.7k 阅读时长 ≈ 4 分钟

我们先看下效果

img

我点击了按钮后他会显示进度页面，进度完成后，进度条消失，其实也是比较简单的了。

我们需要一个进度条代码文件ProgressBar.htm（注意：是没有head这些标签的）

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
	<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%;  padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
    </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

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
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>
        /// 功能描述:构造函数
        /// </summary>
        /// <param name="page">当前页面</param>
        public ProgressBar(System.Web.UI.Page page)
        {
            m_page = page;
        }

        public void SetMaxValue(int intMaxValue)
        {
            MaxValue = intMaxValue;
        }

        /// <summary>
        /// 功能描述:初始化进度条
        /// </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>
        /// 功能描述:设置标题
        /// </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>
        /// 功能描述:设置进度
        /// </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();
        }

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

转自：https://www.cnblogs.com/zoujinhua/p/12767184.html