asp.net进度条

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

建立一个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  =  " <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(); 
    } 
}

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

转载于:https://www.cnblogs.com/bluedy1229/articles/1623590.html