asp.net 实现进度条

最新推荐文章于 2011-07-17 23:24:03 发布

aishalv8524

最新推荐文章于 2011-07-17 23:24:03 发布

阅读量142

点赞数

文章标签： ui xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/fora/archive/2009/10/14/1583512.html

版权

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

Code
<!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" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
        <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
        <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
    </div>
    </body>
</html>

后台代码，Default.aspx.cs：

Code

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