分享一篇ASP.NET實現進度條的圖文執行個體

來源:互聯網
上載者:User
這篇文章主要為大家詳細介紹了ASP.NET實現簡單的進度條效果,具有一定的參考價值,感興趣的小夥伴們可以參考一下

我們先看下進度條效果

我點擊了按鈕後他會顯示進度頁面,進度完成後,進度條消失,其實也是比較簡單的了。

我們需要一個進度條代碼檔案ProgressBar.htm(注意:是沒有head這些標籤的)

<script language="javascript">  function SetPorgressBar(pos) {    //設定進度條置中    var screenWidth = document.body.offsetWidth;    ProgressBarSide.style.width = Math.round(screenWidth / 2) + "px";    ProgressBarSide.style.left = Math.round(screenWidth / 4) + "px";    ProgressBarSide.style.top = "50px";    ProgressBarSide.style.height = "21px";    ProgressBarSide.style.display = "block";    //設定進度條百分比     ProgressBar.style.width = pos + "%";    ProgressText.innerHTML = pos + "%";  }  function SetMaxValue(maxValue) {    ProgressBarSide.style.width = maxValue + "px";  }  //完成後隱藏進度條  function SetCompleted() {    ProgressBarSide.style.display = "none";  }  function SetTitle(title) {    ProgressTitle.innerHTML = title;  }</script><p id="ProgressBarSide" style="position: absolute; height: 21px; width: 100px;  color: Silver; border-width: 1px; border-style: Solid; display: block">  <p id="ProgressBar" style="position: absolute; height: 21px; width: 0%; background-color: #1475BB">  </p>  <p id="ProgressText" style="position: absolute; height: 21px; width: 100%; text-align: center">  </p>  <p id="ProgressTitle" style="position: absolute; height: 21px; top: 21px; width: 100%;    text-align: center">  </p></p>

然後需要一個進度條類ProgressBar.cs


using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;namespace ZhuoYueE.Dop.Web.UI{  /// <summary>  ///顯示進度條  /// </summary>  public class ProgressBar : System.Web.UI.Page  {    /// <summary>    /// 最大值    /// </summary>    private int MaxValue    {      get      {        if (ViewState["MaxValue"] == null)        {          return 0;        }        else        {          return Convert.ToInt32(ViewState["MaxValue"]);        }      }      set      {        ViewState["MaxValue"] = value;      }    }    /// <summary>    /// 當前值    /// </summary>    private int ThisValue    {      get      {        if (ViewState["ThisValue"] == null)        {          return 0;        }        else        {          return Convert.ToInt32(ViewState["ThisValue"]);        }      }      set      {        ViewState["ThisValue"] = value;      }    }    /// <summary>    /// 當前頁面    /// </summary>    System.Web.UI.Page m_page;    /// <summary>    /// 功能描述:建構函式    /// 作  者:huangzh    /// 建立日期:2016-05-06 11:54:34    /// 任務編號:    /// </summary>    /// <param name="page">當前頁面</param>    public ProgressBar(System.Web.UI.Page page)    {      m_page = page;    }    public void SetMaxValue(int intMaxValue)    {      MaxValue = intMaxValue;    }    /// <summary>    /// 功能描述:初始化進度條    /// 作  者:huangzh    /// 建立日期:2016-05-06 11:55:26    /// 任務編號:    /// </summary>    public void InitProgress()    {      //根據ProgressBar.htm顯示進度條介面      string templateFileName = AppDomain.CurrentDomain.BaseDirectory + "ProgressBar.htm";      StreamReader reader = new StreamReader(@templateFileName, System.Text.Encoding.GetEncoding("GB2312"));      string strhtml = reader.ReadToEnd();      reader.Close();      m_page.Response.Write(strhtml);      m_page.Response.Flush();    }    /// <summary>    /// 功能描述:設定標題    /// 作  者:huangzh    /// 建立日期:2016-05-06 11:55:36    /// 任務編號:    /// </summary>    /// <param name="strTitle">strTitle</param>    public void SetTitle(string strTitle)    {      string strjsBlock = "<script>SetTitle('" + strTitle + "'); </script>";      m_page.Response.Write(strjsBlock);      m_page.Response.Flush();    }    /// <summary>    /// 功能描述:設定進度    /// 作  者:huangzh    /// 建立日期:2016-05-06 11:55:45    /// 任務編號:    /// </summary>    /// <param name="percent">percent</param>    public void AddProgress(int intpercent)    {      ThisValue = ThisValue + intpercent;      double dblstep = ((double)ThisValue / (double)MaxValue) * 100;      string strjsBlock = "<script>SetPorgressBar('" + dblstep.ToString("0.00") + "'); </script>";      m_page.Response.Write(strjsBlock);      m_page.Response.Flush();    }    public void DisponseProgress()    {      string strjsBlock = "<script>SetCompleted();</script>";      m_page.Response.Write(strjsBlock);      m_page.Response.Flush();    }  }}

然後就是調用方法了,調用很簡單,在頁面的按鈕事件或者其他什麼地方加入代碼,如在按鈕事件裡這麼用

protected void btnImport_Click(object sender, EventArgs e)    {      ProgressBar pb = new ProgressBar(this);      pb.SetMaxValue(110);      pb.InitProgress();      pb.SetTitle("這是一個測試資料");      for (int i = 1; i <= 110; i++)      {        pb.AddProgress(1);        //此處用線程休眠代替實際的操作,如載入資料等        System.Threading.Thread.Sleep(50);      }      pb.DisponseProgress();    }
相關文章

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.