ASP.NET实现进度条-CSDN博客

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

建立一个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" 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：

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 = " " + percent.ToString() + " '); " ;
        Response.Write(jsBlock);
        Response.Flush();
    }

     private void finishProgress()
    {
         string jsBlock = " " ;
        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();
    }
}

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

转自：http://blog.csdn.net/reonlyrun/archive/2006/12/27/1464372.aspx

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/12639172/viewspace-620522/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/12639172/viewspace-620522/