创建一个进度条控件
?? 以下文章翻譯自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é)
- 上一篇: 5个提供flickr高级图片搜索的网站
- 下一篇: 大型网站架构:Flickr网站体系结构分