ASP.NET實現進度條

iDotNetSpace發表於2009-11-25
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 = "";
        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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章