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

 

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

在此感谢Clark's Life 的博主,我在做考试编排系统的过程中使用了他的这个进度条效果,感觉很棒,特转帖于此,并表示衷心的感谢!版权归原作者所有