ASP.NET實(shí)現(xiàn)進(jìn)度條效果
我們先看下進(jìn)度條效果
我點(diǎn)擊了按鈕后他會(huì)顯示進(jìn)度頁(yè)面,進(jìn)度完成后,進(jìn)度條消失,其實(shí)也是比較簡(jiǎn)單的了。
我們需要一個(gè)進(jìn)度條代碼文件ProgressBar.htm(注意:是沒(méi)有head這些標(biāo)簽的)
<script language="javascript"> function SetPorgressBar(pos) { //設(shè)置進(jìn)度條居中 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"; //設(shè)置進(jìn)度條百分比 ProgressBar.style.width = pos + "%"; ProgressText.innerHTML = pos + "%"; } function SetMaxValue(maxValue) { ProgressBarSide.style.width = maxValue + "px"; } //完成后隱藏進(jìn)度條 function SetCompleted() { ProgressBarSide.style.display = "none"; } function SetTitle(title) { ProgressTitle.innerHTML = title; } </script> <div id="ProgressBarSide" style="position: absolute; height: 21px; width: 100px; color: Silver; border-width: 1px; border-style: Solid; display: block"> <div id="ProgressBar" style="position: absolute; height: 21px; width: 0%; background-color: #1475BB"> </div> <div id="ProgressText" style="position: absolute; height: 21px; width: 100%; text-align: center"> </div> <div id="ProgressTitle" style="position: absolute; height: 21px; top: 21px; width: 100%; text-align: center"> </div> </div>
然后需要一個(gè)進(jìn)度條類(lèi)ProgressBar.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; namespace ZhuoYueE.Dop.Web.UI { /// <summary> ///顯示進(jìn)度條 /// </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> /// 當(dāng)前值 /// </summary> private int ThisValue { get { if (ViewState["ThisValue"] == null) { return 0; } else { return Convert.ToInt32(ViewState["ThisValue"]); } } set { ViewState["ThisValue"] = value; } } /// <summary> /// 當(dāng)前頁(yè)面 /// </summary> System.Web.UI.Page m_page; /// <summary> /// 功能描述:構(gòu)造函數(shù) /// 作 者:huangzh /// 創(chuàng)建日期:2016-05-06 11:54:34 /// 任務(wù)編號(hào): /// </summary> /// <param name="page">當(dāng)前頁(yè)面</param> public ProgressBar(System.Web.UI.Page page) { m_page = page; } public void SetMaxValue(int intMaxValue) { MaxValue = intMaxValue; } /// <summary> /// 功能描述:初始化進(jìn)度條 /// 作 者:huangzh /// 創(chuàng)建日期:2016-05-06 11:55:26 /// 任務(wù)編號(hào): /// </summary> public void InitProgress() { //根據(jù)ProgressBar.htm顯示進(jìn)度條界面 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> /// 功能描述:設(shè)置標(biāo)題 /// 作 者:huangzh /// 創(chuàng)建日期:2016-05-06 11:55:36 /// 任務(wù)編號(hào): /// </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> /// 功能描述:設(shè)置進(jìn)度 /// 作 者:huangzh /// 創(chuàng)建日期:2016-05-06 11:55:45 /// 任務(wù)編號(hào): /// </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(); } } }
然后就是調(diào)用方法了,調(diào)用很簡(jiǎn)單,在頁(yè)面的按鈕事件或者其他什么地方加入代碼,如在按鈕事件里這么用
protected void btnImport_Click(object sender, EventArgs e) { ProgressBar pb = new ProgressBar(this); pb.SetMaxValue(110); pb.InitProgress(); pb.SetTitle("這是一個(gè)測(cè)試數(shù)據(jù)"); for (int i = 1; i <= 110; i++) { pb.AddProgress(1); //此處用線程休眠代替實(shí)際的操作,如加載數(shù)據(jù)等 System.Threading.Thread.Sleep(50); } pb.DisponseProgress(); }
怎么樣,是不是很簡(jiǎn)單呢。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Asp.net基于ajax和jquery-ui實(shí)現(xiàn)進(jìn)度條
- asp.net mvc 實(shí)現(xiàn)文件上傳帶進(jìn)度條的思路與方法
- asp.net文件上傳帶進(jìn)度條實(shí)現(xiàn)案例(多種風(fēng)格)
- asp.net單文件帶進(jìn)度條上傳的解決方案
- Asp.Net 無(wú)刷新文件上傳并顯示進(jìn)度條的實(shí)現(xiàn)方法及思路
- asp.net 生成靜態(tài)頁(yè)時(shí)的進(jìn)度條顯示
- 利用Asp.Net回調(diào)機(jī)制實(shí)現(xiàn)進(jìn)度條
- ASP.NET技巧:教你制做Web實(shí)時(shí)進(jìn)度條
- ASP.NET?MVC使用jQuery?ui的progressbar實(shí)現(xiàn)進(jìn)度條
相關(guān)文章
asp.net?core?MVC?全局過(guò)濾器之ExceptionFilter過(guò)濾器(1)
這篇文章主要為大家詳細(xì)介紹了asp.net?core?MVC?全局過(guò)濾器之ExceptionFilter過(guò)濾器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08GMap.Net開(kāi)發(fā)之自定義Marker使用方法
這篇文章主要介紹了GMap中Marker的使用方法,有需要的朋友可以參考一下2013-12-12Asp.Net中Cache操作類(lèi)實(shí)例詳解
這篇文章主要介紹了Asp.Net中Cache操作類(lèi)實(shí)例,需要的朋友可以參考下2014-07-07Asp.net(C#)讀取數(shù)據(jù)庫(kù)并生成JS文件制作首頁(yè)圖片切換效果(附demo源碼下載)
這篇文章主要介紹了Asp.net(C#)讀取數(shù)據(jù)庫(kù)并生成JS文件制作首頁(yè)圖片切換效果的方法,涉及asp.net數(shù)據(jù)庫(kù)操作及JavaScript幻燈片生成的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04關(guān)于vs2005、vs2008和vs2010項(xiàng)目互轉(zhuǎn)的總結(jié)
有做.net的程序員和朋友曾經(jīng)問(wèn)過(guò)我,關(guān)于vs2005和vs2008、vs2008和vs2010、vs2005和vs2010項(xiàng)目互轉(zhuǎn)的問(wèn)題,特整理下分享給大家2012-04-04Asp.net回調(diào)技術(shù)Callback學(xué)習(xí)筆記
這篇文章主要記錄了Asp.net回調(diào)技術(shù)Callback的一些知識(shí),感興趣的朋友可以參考下2014-08-08SQL注入中繞過(guò) 單引號(hào) 限制繼續(xù)注入
我想不少人都看過(guò)一些關(guān)于SQL Injection針對(duì)SQL Server攻擊的文章,都是因?yàn)樽兞窟^(guò)濾不足甚至沒(méi)有過(guò)濾而構(gòu)造畸形SQL語(yǔ)句注入的2009-06-06ASP.NET Core實(shí)現(xiàn)中間件的幾種方式
這篇文章介紹了ASP.NET Core實(shí)現(xiàn)中間件的幾種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08Asp.net MVC實(shí)現(xiàn)生成Excel并下載功能
這篇文章主要為大家詳細(xì)介紹了Asp.net MVC實(shí)現(xiàn)生成Excel并下載功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12