ASP.NET实现进度条

2024-07-10 13:06:06

字体：大中小

来源：转载

供稿：网友

商业源码热门下载www.html.org.cn

在网上查阅了很多相关资料，参照对比一番后自己整理了一下，做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比，完成进度后隐藏进度条。个人感觉还是有一定的参考价值，贴出来先。

建立一个web工程，添加新项->html页面，命名为progressbar.htm，内容如下：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="mainwindow">
<head>
    <title>无标题页</title>
    <script language="javascript">
        function setporgressbar(pos)
        {
            //设置进度条居中
            var screenheight = window["mainwindow"].offsetheight;
            var screenwidth = window["mainwindow"].offsetwidth;
            progressbarside.style.width = math.round(screenwidth / 2);
            progressbarside.style.left = math.round(screenwidth / 4);
            progressbarside.style.top = math.round(screenheight / 2);
            progressbarside.style.height = "21px";
            progressbarside.style.display = "";

            //设置进度条百分比
            progressbar.style.width = pos + "%";
            progresstext.innerhtml = pos + "%";
        }

        //完成后隐藏进度条
        function setcompleted()
        {
            progressbarside.style.display = "none";
        }
     </script>
</head>
    <body>
    <div id="progressbarside" >
        <div id="progressbar" ></div>
        <div id="progresstext" ></div>
    </div>
    </body>
</html>
后台代码，default.aspx.cs：

using system;
using system.data;
using system.configuration;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
using system.threading;
using system.io;

public partial class _default : system.web.ui.page
{
    private void beginprogress()
    {
        //根据progressbar.htm显示进度条界面
        string templatefilename = path.combine(server.mappath("."), "progressbar.htm");
        streamreader reader = new streamreader(@templatefilename,system.text.encoding.getencoding("gb2312"));
        string html = reader.readtoend();
        reader.close();
        response.write(html);
        response.flush();
    }

    private void setprogress(int percent)
    {
        string jsblock = "<script>setporgressbar('" + percent.tostring() + "'); </script>";
        response.write(jsblock);
        response.flush();
    }

    private void finishprogress()
    {
        string jsblock = "<script>setcompleted();</script>";
        response.write(jsblock);
        response.flush();
    }

    private void page_load(object sender, system.eventargs e)
    {
        beginprogress();

        for (int i = 1; i <= 100; i++)
        {
            setprogress(i);

            //此处用线程休眠代替实际的操作，如加载数据等
            system.threading.thread.sleep(50);
        }

finishprogress();
}
}
前台页面代码在此省略，可以放置任意控件。

上一篇：ASP.NET 2.0中的客户端回调

下一篇：ASP.NET2.0的写访问权限