ASP.NET實現進度條

來源:互聯網
上載者:User
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();
    }
}
前台頁面代碼在此省略,可以放置任意控制項。


 



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。