?? 以下文章翻譯自http://www.beansoftware.com/ASP.NET-Tutorials/ProgressBar-User-Control.aspx。若有任何疑問,可以互相交流(goalbell@gmail.com)。

? 正文:

???? 在以用戶為中心的應(yīng)用程序,我們經(jīng)常努力使到應(yīng)用程序更具交互性和用戶體驗性。當每個用戶執(zhí)行任何重型和長編的操作(上傳和下載一個大型文件或者安裝)時,他或者她期望知道在正規(guī)的區(qū)間操作的進度。用戶應(yīng)該知道每步是否成功或失敗的狀態(tài)。我們不能讓用戶一直等待。用戶應(yīng)該知道任務(wù)完成的百份比。

???? 這編文章討論關(guān)于創(chuàng)建一個平滑,遞增的進度欄控件(定制的用戶控件)。這個是你可以包含任何ASP.NET web應(yīng)用程序的典型用戶控件。這個用戶控件是一個使用HTML TABLE建立的輕量級控件。

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ProgressBar.ascx.vb" Inherits="ProgressBar" %>
<asp:Table ID="tblProgressBar" runat="server"
??? BorderWidth="1px"
??? CellPadding="1"
??? CellSpacing="1"
??? Height="15px"
??? Width="200px">
</asp:Table>
?
<uc1:Progressbar ID="Progressbar1" runat="server" BGColor="Gray" Blocks="20" BorderColor="Black"
??????????? BorderSize="1" Cellpadding="1" CellSpacing="1" FillColor="Green" Height="20" Value="10"
??????????? Width="150" />

?

?

進度欄用戶控件屬性

????? 以上從HTML顯示來看,你能夠觀察到進度欄用戶控件暴露很多屬性。你能使用這些屬性來控制進度欄的行為。

BGColor:這個屬性決定進度欄用戶控件的背景顏色。BGColor缺省值為Gray。你可以配置使用這個屬性的進度欄的BGColor。

?????????????
Blocks:這是一個重要的屬性。Blocks將決定每一步顯示的垂直橫條數(shù)目。從以上HTML顯示來看,你可以觀察到Blocks的值為20。這個值作為一個基值。值的屬性以及Block屬性值使用以下給出的決定垂直橫條每一步填滿的數(shù)目的公式。

???????? Math.Ceiling((Me.Value * Me.Blocks/100))

我們能夠從以下表格的值顯示來看。這個表格以20作為block屬性的初始值為基準。因此,進度欄以每一步2垂直橫條填滿。

????????

Blocks Property(Base Values)	Value Property (percent completed)	Number of Vertical bars
20	10	2
20	20	4
20	30	6
20	40	8
20	50	10

從以上數(shù)字應(yīng)該給出進度欄如何每一步填滿的公平觀點。既然,我們使用20作為基值;你可以看出每一步,進度欄以兩步垂直橫條遞增。

Border Color:這個屬性決定進度欄邊框的顏色。

Border Size:決定進度欄邊框線的厚度。

Fill Color:決定垂直橫條的顏色。

Cell spacing:從技術(shù)上來講,進度欄是以表格單元格作為垂直橫條的簡單HTML TABLE。為了保持表格單元格兩者之間的空隙,我們使用這個屬性。

其余的屬性決定HTML TABLE元素的外觀。

現(xiàn)在我們明白用戶控件工作的原則。我們會增加這個用戶控件到我們以下顯示的頁面。

<div><uc1:Progressbar ID="Progressbar1" runat="server" BGColor="Gray" Blocks="20" BorderColor="Black"
??????????? BorderSize="1" Cellpadding="1" CellSpacing="1" FillColor="Green" Height="20" Value="10"
??????????? Width="150" />
??????? <br />
??????? <asp:Label ID="Label1" runat="server" Text="Percent Complete"></asp:Label>
??????? <asp:Label ID="Label2" runat="server" Text="Value"></asp:Label>
??????? <br />
??????? <asp:Button ID="Button1" runat="server" Text="Progress" /></div>

?

無論什么時候我們增加任何用戶控件到任何頁面都要謹慎,我們應(yīng)該按照以下顯示那樣注冊我們的頁面。

?

<%@ Register Src="Progressbar.ascx" TagName="Progressbar" TagPrefix="uc1" %>

?

我們增加了一些Labels來顯示在數(shù)值和可讀格式上的狀態(tài)。

?

?

從以上數(shù)字顯示來看,你可以看出當用戶單擊Progress按紐的時候,ProgressBar會按照用戶控件設(shè)置的屬性值遞增。

?

??????? If (ViewState.Item("PBValue") Is Nothing) Then
??????????? ViewState.Add("PBValue", 10)
??????? End If
??????? If (CInt(ViewState.Item("PBValue")) >= 100) Then
??????????? Progressbar1.Value = 100
??????????? Label2.Text = "The Progress is complete"
??????????? Return
??????? End If
?
??????? ViewState.Item("PBValue") = CInt(ViewState.Item("PBValue")) + 10
??????? Progressbar1.Value = CInt(ViewState.Item("PBValue"))
??????? Label2.Text = ViewState.Item("PBValue").ToString() + "%"

?

?

從以上代碼片段顯示來看,當每次單擊ProgressBar,ProgressBar用戶控件屬性值按照遞增值設(shè)置好。如果ProgressBar達到了它的門檻值,代碼片段也可以檢測得到。當ProgressBar達到了它的門檻值,你可以假設(shè)工作已經(jīng)完成了。你可以看出以下輸出顯示的結(jié)果。

?

?

那就是ProgressBar完成自己的工作。以及這也作為指導(dǎo):)。

?完整的C#代碼供大家互相學(xué)習(xí):ProgressBar.zip

轉(zhuǎn)載于:https://www.cnblogs.com/goalbell/archive/2007/07/14/ajax_Progressbar.html

總結(jié)

以上是生活随笔為你收集整理的创建一个进度条控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。