以下文章翻译自http://www.beansoftware.com/ASP.NET-Tutorials/ProgressBar-User-Control.aspx。若有任何疑问,可以互相交流(goalbell@gmail.com)。
正文:
在以用户为中心的应用程序,我们经常努力使到应用程序更具交互性和用户体验性。当每个用户执行任何重型和长编的操作(上传和下载一个大型文件或者安装)时,他或者她期望知道在正规的区间操作的进度。用户应该知道每步是否成功或失败的状态。我们不能让用户一直等待。用户应该知道任务完成的百份比。
这编文章讨论关于创建一个平滑,递增的进度栏控件(定制的用户控件)。这个是你可以包含任何ASP.NET web应用程序的典型用户控件。这个用户控件是一个使用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将决定每一步显示的垂直横条数目
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
从以上数字应该给出进度栏如何每一步填满的公平观点。既然,我们使用20作为基值;你可以看出每一步,进度栏以两步垂直横条递增。
Border Color:这个属性决定进度栏边框的颜色。
Border Size:决定进度栏边框线的厚度。
Fill Color:决定垂直横条的颜色。
Cell spacing:从技术上来讲,进度栏是以表格单元格作为垂直横条的简单HTML TABLE。为了保持表格单元格两者之间的空隙,我们使用这个属性。
其余的属性决定HTML TABLE元素的外观。
现在我们明白用户控件工作的原则。我们会增加这个用户控件到我们以下显示的页面。
<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>
<%@ Register Src="Progressbar.ascx" TagName="Progressbar" TagPrefix="uc1" %>
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用户控件属性值按照递增值设置好
评论