第5章第5章ASP.NET**控件第4章介绍的ASP.NET控件基本上都能在传统HTML控件中找到其原型,但是将大部分处理操作都转移到了服务器端进行,这样可以得到更强的控制能力和编程方便。除第4章介绍的控件之外,ASP.NET还提供了大量功能更完整、更有针对性的控件,本书称为**控件。**控件一般都跟具体的功能有关,使用一个**控件就能够完成一项任务的核心功能,这样就可以较大地减少编程工作量。
本章仅选择性地介绍Calendar控件、FileUpload控件、Wizard控件、PlaceHolder控件、AdRotator控件和验证控件等。
5.1Calendar控件
使用Calendar控件可以显示和选择日期,并可在日历网格中显示与特定日期关联的如日程、约会等其他信息。
5.1.1Calendar控件基本概念
以前开发基于浏览器的应用程序时,有关日期型数据的操作,如输入、选择等,因为涉及格式、初值、校验等多方面的内容,程序员往往需要花费大量的精力对其进行处理。为了解决这个问题,许多天才程序员开发了封装良好的脚本控件提供给大家,但这些控件外观、接口、功能各异,继承、定制都很困难。ASP.NET提供了Calendar控件,很好地解决了这个问题,使与时间有关的编程不再困难。
Calendar控件是一个功能丰富的控件,很多与日期有关的功能都可以以该控件为基础创建。Calendar控件本身的功能主要包括:
显示一个日历,包括一个月的详细日历和其他一些相关信息。
允许用户选择**、一周或一个月。
允许用户移到下一个月或上一个月。
以编程方式控制选定日期的显示。
创建一个名为Calendar的网站及其默认主页。〖1〗〖3〗Web网络应用程序开发第5章ASP.NET**控件〖3〗〖3〗从工具箱中拖一个Calendar控件到页面上,页面上会增加如下代码:<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
图51Calendar控件的执行效果(一)
执行该页面,效果如图51所示。
这个界面已经很专业了,而我们除了一次拖动之外还没有修改任何代码。
Calendar控件可以通过属性和事件来进行定制。从表51可以看出,Calendar控件提供了丰富的属性和事件处理,使编程人员可以控制Calendar控件的几乎所有细节。表51Calendar控件常用的属性和事件
属 性 名 称说明Caption日历标题CaptionAlign日历标题的对齐方式CellPadding单元格的内容和单元格的边框之间的间隔,以像素为单位DayHeaderStyle显示一周中某天的部分的样式属性DayNameFormat一周中各天的名称格式DayStyle本月日期的样式FirstDayOfWeek**列显示一周中的哪天NextMonthText“下一月”导航元素的文本NextPrevFormat标题部分中,“下一月”和“上一月”导航元素的格式NextPrevStyle“下一月”和“上一月”导航元素的样式OtherMonthDayStyle非本月日期的样式PrevMonthText“上一月”导航元素的文本SelectedDate选定的日期SelectedDatesSystem.DateTime对象的集合,这些对象表示Calendar控件上的选定日期SelectedDayStyle选定日期的样式SelectionMode日期选择模式,该模式指定用户可以选择单日、一周还是整月SelectMonthText选择器列中,月份选择元素的文本SelectorStyle周和月选择器列的样式SelectWeekText选择器列中,周选择元素的文本ShowDayHeader是否显示一周中各天的标头ShowGridLines是否用网格线分隔Calendar控件上的日期续表
属 性 名 称说明ShowNextPrevMonth是否在标题部分显示“下一月”和“上一月”导航元素ShowTitle是否显示标题部分TitleFormat标题部分的格式TitleStyle标题部分的样式TodayDayStyle“今天”日期的样式TodaysDate今天的日期值VisibleDate要在Calendar控件上显示的月份WeekendDayStyle**日期的样式事 件 名 称说明DayRender当为Calendar控件在控件层次结构中创建每**时发生SelectionChanged当用户单击日期选择器选择了**、一周或整月时发生VisibleMonthChanged当用户单击标题部分的“下一月”或“上一月”导航元素时发生5.1.2改变Calendar控件的外观
可以通过简单地改变Calendar控件的属性来得到丰富的外观表现形式。
在页面上再增加一个Calendar控件,可参照下面实例代码直接修改页面代码,也可以在设计视图中逐项修改属性值。实例代码如下。<asp:Calendar ID="Calendar2" runat="server" BackColor="#C0FFFF"
BorderColor="#00C0C0" BorderWidth="1px" Font-Names="Verdana"
Font-Size="9pt" ForeColor="Black" Height="100px"
NextPrevFormat="FullMonth" Width="300px" FirstDayOfWeek="Monday"
SelectionMode="DayWeekMonth" SelectMonthText="月>"
SelectWeekText="周>" ShowGridLines="True">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt"
ForeColor="#333333" VerticalAlign="Bottom" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px"
Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
</asp:Calendar>
在上面的实例中配置了很多属性,在此仅详细介绍一下SelectionMode属性的相关内容。通过改变SelectionMode属性,可以控制日历的选择模式,该属性的可选值如下。
Day(默认值): 允许选择单个日期。
DayWeek: 允许选择单个日期或整周。
DayWeekMonth: 允许选择单个日期、整周或整月。
None: 不允许选择日期,只能导航。
图52Calendar控件的执行效果(二)
在本例中将SelectionMode属性设为了DayWeekMonth,并设置SelectMonthText="月>" SelectWeekText="周>",用户就可以通过日历左部的“月>”超链选择整月,或通过“周>”超链选择整周了。
页面执行效果如图52所示。
这仅仅是改变外观的一个例子,Calendar控件上还有很多发挥空间。