本章学习目标
. 熟练掌握ASP.NET中视图区域控件的使用方法
. 熟练掌握ASP.NET中文件上传控件的使用方法
. 熟练掌握ASP.NET中日历控件的使用方法
. 了解ASP.NET中广告控件的使用方法
. 了解ASP.NET中向导控件的使用方法
本章首先介绍ASP.NET服务器部分高级控件应用,对ASP.NET 中的视图区域控件
进行详细讲解,然后通过应用讲解文件上传控件、日历控件和向导控件,最后添加.xml广告
文件,并在广告控件中进行应用。
3.1 简介视图区域控件 
视图区域控件是页面分组、布局、外观设置常使用的控件,通过该控件可以将部分控件
作为一个单元进行管理,也可以为其他控件提供容器,或者为页面上特定区域设置独特外
观。视图区域控件主要包含面板控件(Panel)、占位符控件(PlaceHolder)、视图控件(View) 
和多视图控件(MultiView)等,本节将对这几种控件进行详细讲解。
3.1.1 面板控件Panel 
Panel控件又称面板控件,在工具箱中图标为“ ”,封装在System.Web.UI. 
Control.WebControl命名空间的Panel类中。可以在其内部动态地向该控件添加其他子控
件和标签,也可以使用该控件将页面拆分为独立排版显示的若干部分。Panel控件的常用
属性如表3.1所示。
扫一扫

52 
表3.1 Panel控件的常用属性
属 性 名说 明
BackImageUrl 获取或设置面板控件的背景图像URL 
DefaultButton 获取或设置面板控件的默认按钮
GroupingText 获取或设置面板控件中包含的控件组的标题
Controls 获取面板控件中包含的子控件集合 
说明: 
(1)默认按钮属性是指焦点在面板控件内按下Enter键时或鼠标“单击”时处理。
(2)Controls属性中包含Add()方法,通过该方法可以动态地向面板控件中添加新的
图3.1 Panel控件应用页面布局
子控件。
【示例3-1】 在E盘的ASP.NET项目代码目录
中创建chapter3子目录,将其作为网站根目录,创建
名为example3-1的页面,添加面板按钮及其他控件, 
实现动态添加控件以及隐藏Panel功能。
(1)在页面example3-1中添加相应控件,具体如
图3.1所示。
(2)设置控件的相关属性,如下列源代码。 
<form id="form1" runat="server"> 
在Panel 控件中添加元素<br/> 
添加<asp:DropDownList ID="ddlLbl" runat="server"> 
<asp:ListItem>0</asp:ListItem> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
<asp:ListItem>4</asp:ListItem> 
</asp:DropDownList> 
个标签控件<br/> 
添加<asp:DropDownList ID="ddlTxt" runat="server"> 
<asp:ListItem>0</asp:ListItem> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
<asp:ListItem>4</asp:ListItem> 
</asp:DropDownList> 
个文本框控件<br/> 
<asp:Button ID="btnAdd" runat="server" Text="动态添加控件" OnClick=" 
btnAdd_Click"/> 
<asp:CheckBox ID="chkShow" runat="server" AutoPostBack="True" Text="显
示Panel" OnCheckedChanged="chkShow_CheckedChanged"/> 
<asp:Panel ID="Panel1" runat="server" GroupingText="动态添加的控件"> 
</asp:Panel> 
</form> 
(3)为控件添加事件代码如下。

53 
protected void btnAdd_Click(object sender, EventArgs e) 
{ 
//设置变量m 的值为ddlLbl 控件中选中的数值 
int m=int.Parse(ddlLbl.SelectedItem.Value); 
//循环次数为要添加的Label 控件的个数 
for (int i=1; i <=m; i++) 
{ 
//实例化一个Label 控件对象lbl 
Label lbl=new Label(); 
//赋值lbl 对象的ID 属性为:“lbl”+i 
lbl.ID="lbl"+i; 
//赋值lbl 对象的Text 属性为:“标签控件”+i 
lbl.Text="标签控件"+i.ToString()+"<br>"; 
//添加lbl 控件到Panel 中 
Panel1.Controls.Add(lbl); 
} 
//设置变量n 的值为ddlTxt 控件中选中的数值 
int n=int.Parse(ddlTxt.SelectedItem.Value); 
//循环次数为要添加的TextBox 控件的个数 
for (int i=1; i<=n; i++) 
{ 
//实例化一个TextBox 控件对象txt 
TextBox txt=new TextBox(); 
//赋值txt 对象的ID 属性为:“txt”+i 
txt.ID="txt"+i; 
//赋值txt 对象的Text 属性为:“文本框控件”+i 
txt.Text="文本框控件"+i.ToString(); 
//添加txt 控件到Panel 中 
Panel1.Controls.Add(txt); 
} 
}p
rotected void chkShow_CheckedChanged(object sender, EventArgs e) 
{ 
//如果当前状态是没选中 
if (chkShow.Checked) 
{ 
Panel1.Visible=true; //就把Panel 选中 
chkShow.Text="显示Panel"; //CheckBox1 的文本为“显示Panel” 
} 
else 
{ 
Panel1.Visible=false; 
chkShow.Text="隐藏Panel"; 
} 
}
(4)网站运行后,根据列表数值,动态向面板控件中加相应数量的标签和文本框控件, 
单击复选按钮可以显示或隐藏面板控件,部分功能如图3.2所示。
3.1.2 占位符控件PlaceHolder 
PlaceHolder控件又称占位符控件,在工具箱中图标为“ ”,封装在
System.Web.UI.Control.WebControl命名空间的PlaceHolder类中。该控件的功能与面板

54 
图3.2 Panel控件应用页面演示
控件的功能类似,也可以作为页面内的一个容器动态地向其内部添加其他控件,不同的是, 
PlaceHolder控件没有基于HTML的输出,只是为其他控件标记一个位置。
【示例3-2】 在E盘ASP.NET项目代码的chapter3目录下创建名为example3-2的网
页,分别向Panel控件和PlaceHolder控件内动态添加控件,对比HTML源代码的差异。
(1)在页面中添加相应控件,具体如图3.3所示。
图3.3 PlaceHolder控件应用页面布局
(2)设置控件的相关属性,如下列源代码。 
<form id="form1" runat="server"> 
<div> 
PlaceHolder 控件:<br/> 
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
<br/> 
<br/> 
Panel 控件:<asp:Panel ID="Panel1" runat="server"> 
</asp:Panel> 
<br/> 
<asp:Button ID="btnAdd" runat="server" Text="添加控件" OnClick="btnAdd_ 
Click"/> 
</div> 
</form> 
(3)添加事件代码,如下所示。 
protected void btnAdd_Click(object sender, EventArgs e) 
{ 
Button btn1=new Button();

55 
btn1.Text="PlaceHolder 内的按纽"; 
btn1.ID="btn1"; 
PlaceHolder1.Controls.Add(btn1); 
Button btn2=new Button(); 
btn2.Text="Panel 内的按纽"; 
btn2.ID="btn1"; 
Panel1.Controls.Add(btn2); 
}
(4)网站运行后单击“添加控件”按钮,如图3.4所示。
图3.4 PlaceHolder控件应用网页演示
(5)对比网页运行后的HTML源代码,比较PlaceHolder控件和Panel控件的客户端
脚本,具体如图3.5所示。
图3.5 PlaceHolder控件和Panel控件的客户端脚本比较

56 
说明: 
在网页的HTML源文件中,Panel控件有输出客户端脚本,会产生DIV 的HTML代
码,而PlaceHolder控件仅在服务器端起分组的作用,不会产生额外的HTML代码。在页
面中使用控件有进行分组的情况时,如果客户端有对分组进行显示或隐藏,以及改变颜色等
操作需求时,应使用Panel控件,否则使用PlaceHolder控件。
3.1.3 视图控件View 与多视图控件MultiView 
View控件又称视图控件,在工具箱中图标为“ ”,封装在System.Web.UI. 
Control.WebControl命名空间的View 类中,用于将页面拆分为独立显示的若干部分。视
图必须包含在MultiView控件内,可以作为其他控件的容器,没有外观,只有被激活时才会
显示。
MultiView控件又称多视图控件,在工具箱中图标为“ ”,封装在System. 
Web.UI.Control.WebControl命名空间的MultiView 类中。作为使用View 控件的必选控
件,MultiView 控件实际上是作为一个容器使用。在MultiView 控件中可以包含若干个
View控件,通过设置ActiveViewIndex属性确定在MultiView控件内显示的View视图,当
ActiveViewIndex=-1时,所有View 视图均不显示。MultiView 控件的常用属性如表3.2 
所示。MultiView控件的常用事件如表3.3所示。
表3.2 MultiView 控件的常用属性
属 性 名说 明
ActiveViewIndex 获取或设置MultiView控件的ActiveView控件的索引
表3.3 MultiView 控件的常用事件
事 件 名说 明
ActiveViewChanged 当MultiView控件的ActiveView控件发生变化时触发 
说明: 
MultiView控件内各View控件的索引不需要设置,按从上至下位置自动赋值,初始索
引值为0。
【示例3-3】 在chapter3网站根目录下创建名为example3-3的网页,页面内包含一个
MultiView控件和4个View 控件以及若干其他控件,练习使用视图的切换,以及按钮的
CommandName和CommanArgument属性。
(1)在chapter3网站根目录上新建“上传文件”文件夹,在“上传文件”文件夹添加卡通
数字图片1.jpg、2.jpg、3.jpg、4.jpg。
(2)按图3.6所示添加相应文本及控件。
(3)设置控件的相关属性,如源文件所示。 
<form id="form1" runat="server"> 
<div> 
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack= 
扫一扫

57 
图3.6 View 控件和MultiView 控件应用页面布局 
"True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" 
RepeatDirection="Horizontal"> 
<asp:ListItem>视图1</asp:ListItem> 
<asp:ListItem>视图2</asp:ListItem> 
<asp:ListItem>视图3</asp:ListItem> 
<asp:ListItem>视图4</asp:ListItem> 
</asp:RadioButtonList> 
< asp: MultiView ID =" MultiView1" runat =" server" ActiveViewIndex =" 0" 
OnActiveViewChanged="MultiView1_ActiveViewChanged"> 
<asp:View ID="View1" runat="server"> 
视图1&nbsp;&nbsp;&nbsp;&nbsp; 
< asp: LinkButton ID =" LinkButton7" runat =" server " CommandArgument =" View4" 
CommandName="SwitchViewByID">回尾视图</asp:LinkButton>&nbsp; 
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="NextView">下一视
图</asp:LinkButton><br/> 
<asp:Image ID="Image1" runat="server" ImageUrl="~/上传文件/1.jpg" Width="200px"/> 
</asp:View> 
<asp:View ID="View2" runat="server"> 
视图2&nbsp;&nbsp;&nbsp;&nbsp; 
<asp:LinkButton ID="LinkButton4" runat="server" CommandName="PrevView">上一视
图</asp:LinkButton>&nbsp; 
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="NextView">下一视
图</asp:LinkButton><br/> 
<asp:Image ID="Image2" runat="server" ImageUrl="~/上传文件/2.jpg" Width="200px"/> 
</asp:View>

58 
<asp:View ID="View3" runat="server"> 
视图3&nbsp;&nbsp;&nbsp;&nbsp; 
<asp:LinkButton ID="LinkButton9" runat="server" CommandName="PrevView">上一视
图</asp:LinkButton>&nbsp; 
<asp:LinkButton ID="LinkButton10" runat="server" CommandName="NextView"> 下一
视图</asp:LinkButton> <br/> 
<asp: Image ID =" Image3" runat =" server" ImageUrl =" ~/上传文件/3. jpg" Width =" 
200px"/> 
</asp:View> 
<asp:View ID="View4" runat="server"> 
视图4&nbsp;&nbsp;&nbsp;&nbsp; 
<asp:LinkButton ID="LinkButton6" runat="server" CommandName="PrevView">上一视
图</asp:LinkButton>&nbsp; 
< asp: LinkButton ID =" LinkButton8" runat =" server " CommandArgument =" View1" 
CommandName="SwitchViewByID">回首视图</asp:LinkButton>&nbsp;<br/> 
<asp: Image ID =" Image4" runat =" server" ImageUrl =" ~/上传文件/4. jpg" Width =" 
200px"/> 
</asp:View> 
</asp:MultiView> 
</div> 
</form> 
(4)为RadioButtonList1控件和MultiView1控件的事件添加如下代码。 
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) 
{ 
MultiView1.ActiveViewIndex=RadioButtonList1.SelectedIndex; 
}p
rotected void MultiView1_ActiveViewChanged(object sender, EventArgs e) 
{ 
RadioButtonList1.SelectedIndex=MultiView1.ActiveViewIndex; 
}
(5)运行网站,可以通过单选按钮列表切换视图,也可以通过每个视图中的链接按钮切
换视图,部分运行页面如图3.7所示。
图3.7 View 控件和MultiView 控件应用网页演示

说明: 

通过设置按钮控件的CommandName和CommandArgument属性可以直接实现视图
的切换,CommandName属性可设置的值如下。

.PrevView:表示切换到上一视图(当前视图索引不可为0)。
.NextView:表示切换到下一视图(当前视图不可为索引值最大的视图)。
.SwitchViewByID:表示切换到指定ID的视图,具体的ID属性值需在CommandArgument 
属性中设置,具体见视图4“回首视图”按钮中属性值的设置。
3.文件上传控件FieUpod
2 
lla

FileUpload控件又称文件上传控件,在工具箱中图标为“ ”,封装在
Sysem.UI.CntrlWebCntrl命名空间的FieUpod类中,

tWeb.oo.oolla在网页中显示为一个文
本框控件和一个“浏览”按钮的组合,用于在网页中通过单击按钮完成待上传文件的选择。
FileUpload控件的常用属性如表3.扫一扫


4所示。

表3.d控件的常用属性

4 
FileUploa

属性名说明
FileName 获取客户端使用FileUpload控件上传文件的名称
HasFile 获取一个值,该值指示FileUpload控件是否包含文件
FileBytes 获取FileUpload控件中所包含文件的字节数
PostedFile 获取FileUpload控件上传文件的HtpPostedFile对象

说明: 

(1)HasFile属性用于验证FileUpload控件是否包含文件,若返回值为True,则表示控
件包含文件;若返回值为False,则表示控件不包含文件。

(2)PostedFile属性包含若干二级属性,常用的属性如下。

.ContentLength属性:获取上传文件的大小(以字节为单位)。
.ContentType属性:获取上传文件的MIME类型。
.FileName属性:获取上传文件的完整路径及文件名
。
FileUpload控件的常用方法如表3.
5所示。

表3.d控件的常用方法

5 
FileUploa

方法名说明
SaveAs() 将使用FileUpload控件上传文件的内容保存到服务器的指定路径
说明: 

使用FileUpload控件时,可以通过单击“浏览”按钮,在“选择文件”对话框中选择文件, 
选择文件后使用HasFile属性确定是否选择了文件,调用文件上传控件的SaveAs()方法执
行文件的上传。

59

60 
【示例3-4】 在chapter3网站根目录下创建名为example3-4的网页,页面内包含一个
文件上传控件和若干其他控件,练习使用文件上传控件的相关属性及事件。
(1)在example3-4网页添加相应文件上传控件和其他控件,具体如图3.8所示。
图3.8 FileUpload控件应用页面布局
(2)设置控件相关属性,如源文件所示。 
<form id="form1" runat="server"> 
<asp:Image ID="Image1" runat="server" BorderColor="# 663300" BorderWidth=" 
1px" Width="150px"/> 
<br/> 
<asp:FileUpload ID="FileUpload1" runat="server"/> 
<asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="上传"/> 
<asp:Label ID="lblInfo" runat="server" BorderStyle="None"></asp:Label 
</form> 
(3)为按钮控件的事件添加如下代码。 
protected void btnOK_Click(object sender, EventArgs e) 
{ 
//判断文件上传控件中是否包含文件 
if (FileUpload1.HasFile) 
{ 
//赋值fileName 变量为文件上传控件中选择的文件名 
string fileName=FileUpload1.FileName; 
//赋值lastDotIndex 变量为文件名中最后一个‘.’的索引值 
int lastDotIndex=fileName.LastIndexOf('.'); 
//赋值lastName 变量为文件的后缀名 
string lastName=fileName.Remove(0, lastDotIndex); 
//判断选择的文件后缀名是否为.jpg|.bmp|.jpeg|.gif 中的一种 
if (lastName==".jpg" || lastName==".bmp" || lastName==".jpeg" || lastName==".gif") 
{ 
//判断选择的文件是否大于1MB 
if (FileUpload1.PostedFile.ContentLength<1*1024*1024) 
{ 
//“年年年年月月日日时时分分秒秒毫毫毫”格式的时间字符串 
string strTime=DateTime.Now.ToString("yyyyMMddhhmmssfff"); 
//赋值newFileName 变量为原文件名加时间字符串构成的新文件名 
string newFileName=fileName.Insert(lastDotIndex, "("+strTime+")"); 
//赋值path 变量为“上传文件”对应的绝对路径 
string path=Server.MapPath("上传文件"); 
//将选中文件保存到指定路径

61 
FileUpload1.SaveAs(path+@"”+newFileName); 
//赋值imgUrl 变量为新上传的文件名 
string imgUrl=@"上传文件”+newFileName; 
//为Image1 控件的ImageUrl 属性赋值 
Image1.ImageUrl=imgUrl; 
//为lblInfo 控件的Text 属性赋值,显示上传文件的文件名、大小、类型属性 
lblInfo.Text="选择的文件名:"+ FileUpload1.FileName+"< br> 文件大
小:"+ FileUpload1. PostedFile. ContentLength +" b < br > 文件类型:" + FileUpload1. 
PostedFile.ContentType; 
} 
else 
{ 
lblInfo.Text="图像大小必须小于1MB"; 
} 
} 
else 
{ 
lblInfo.Text=" 请选择正确图像文件(.jpg|.bmp|.jpeg|.gif)"; 
} 
} 
else 
{ 
lblInfo.Text="请选择图像"; 
} 
} 
图3.9 FileUpload控件应用页面演示
(4)运行网站,如没选择文件时单击“上传”按钮,会提示“请选择图像”;若选择了非图
像文件,则提示“请选择正确图像文件(.jpg|.bmp|.jpeg|.gif)”;若选择的文件大于1MB,提
示“图像大小必须小于1MB”;若选择小于1MB的.gif图像,则可实现图片文件以新文件名
上传,如“ ”,在image1控件中显示图像,在
lblInfo控件中显示相关属性。部分执行效果如
图3.9所示。
说明: 
(1)在上传文件名中添加时间字符串可有效防
止文件同名覆盖问题。
(2)采用以文件后缀名进行类型验证的方法,不
会对文件内容进行检测,对于被恶意修改后缀名的文
件无法识别判断。
(3)路径中使用到的“@”符可以使后续字符串
内容不做转义字符处理,如@”//”等价于”////”字
符串。
(4)Server.MapPath("上传文件");Server内置
对象中的MapPath()方法可将相对路径转化为实际
物理路径,本书第5章将会详细讲解。
(5)系统默认上传文件大小为4096KB,如果要
上传超过此大小的文件,会出现错误界面。但可在

62 
web.config文件中进行配置,设置文件大小。在解决方案中找到配置文件Web.config,添加
如下代码。 
configuration> 
<system.web> 
<httpRuntime maxRequestLength="4096" executionTimeout="120"/> 
</system.web> 
</configuration> 
其中,maxRequestLength属性限制文件上传的大小,以KB为单位,默认值为4096KB, 
而最大上限为2097151KB,大约是2GB;executionTimeout属性限制文件上传的时间,以秒(s) 
为单位,默认值为90s,可设置该属性值以延长或缩短上传时间。
3.3 日历控件Calender 
Calender控件又称日历控件,在工具箱中图标为“ ”,封装在System. 
Web.UI.Control.WebControl命名空间的Calender类中。用户可通过该日历控件导航到某
年的某一天,且具有自动套用格式,方便用户选择使用。Calendar控件是一个比较复杂的
控件,具有大量的编程和格式选项,其常用属性如表3.6所示。Calender控件的常用事件如
表3.7所示。
表3.6 Calender控件的常用属性
属 性 名说 明
Caption 获取或设置与日历控件关联的标题
SelectedDate 获取或设置选定的在控件中突出显示的特定日期
ShowNextPrevMonth 获取或设置是否允许用户进行月份导航
SelectionMode 获取或设置日历控件的选择模式
VisibleDate 获取或设置日期用于确定日历中显示的月份 
说明: 
(1)通过SelectionMode属性可以设置日历控件的选择模式,具体有如下枚举值。
. None:表示禁用所有日期选择。
. Day:表示用户可以选择一天,每个日期都将包含带有日期编号的链接。
. DayWeek:表示用户可以选择一天或者一周,除日期编号的链接外,日历的左侧会
额外添加一个带有周选择链接的列。
. DayWeekMonth:表示用户可以选择一天、一周或一月,除日期编号的链接外,日历
的左侧会额外添加一个带有周和月选择链接的列。
(2)如果SelectionMode属性值为DayWeek或者DayWeekMonth,则SelectedDate属
性值为选中日期中的第一天。

63 
表3.7 Calender控件的常用事件
事 件 名说 明
SelectionChanged 当更改选择的日期时发生 
【示例3-5】 在E盘ASP.NET项目代码的chapter3目录下,创建名为example3-5的
网页,实现Calender控件选择模式的设置以及日期的选择。
(1)在页面中添加相应控件,具体如图3.10所示。
图3.10 Calender控件应用页面布局
(2)单击Calender控件右上角的“ ”图标,选择【自动套用格式...】中的“专业型2”,其
他控件的属性设置如下列源文件。 
<form id="form1" runat="server"> 
<div> 
< asp: Calendar ID =" Calendar1" runat =" server " BackColor =" White " 
BorderColor="Black" Font- Names="Verdana" Font- Size="9pt" ForeColor="Black" 
Height =" 250px " OnSelectionChanged =" Calendar1 _ SelectionChanged " Width =" 
330px" BorderStyle="Solid" CellSpacing="1" NextPrevFormat="ShortMonth"> 
<SelectedDayStyle BackColor="#333399" ForeColor="White"/> 
<TodayDayStyle BackColor="#999999" ForeColor="White"/> 
<OtherMonthDayStyle ForeColor="#999999"/> 
<DayStyle BackColor="#CCCCCC"/> 
< NextPrevStyle Font - Size =" 8pt" ForeColor =" White" Font - Bold =" 
True"/> 
< DayHeaderStyle Font- Bold="True" Height="8pt" Font- Size="8pt" 
ForeColor="#333333"/> 
<TitleStyle BackColor="#333399" Font- Bold="True" Font- Size="12pt" 
ForeColor="White" BorderStyle="Solid" Height="12pt"/> 
</asp:Calendar> 
<br/> 
日历选择模式:< asp:DropDownList ID="ddlMode" runat="server" AutoPostBack= 
"True" OnSelectedIndexChanged="ddlMode_SelectedIndexChanged"> 
<asp:ListItem Value="None">不选择</asp:ListItem> 
<asp:ListItem Value="Day">天</asp:ListItem>

64 
<asp:ListItem Value="DayWeek">天、周</asp:ListItem> 
<asp:ListItem Value="DayWeekMonth">天、周、月</asp:ListItem> 
</asp:DropDownList> 
<br/> 
<br/> 
当前选中的日期是:<asp:Label ID="lblDate" runat="server"></asp:Label> 
<br/> 
选中的天是:<asp:Label ID="lblDay" runat="server"></asp:Label> 
<br/> 
选中的月是:<asp:Label ID="lblMonth" runat="server"></asp:Label> 
<br/> 
选中的年是:<asp:Label ID="lblYear" runat="server"></asp:Label> 
<br/> 
</div> 
</form> 
(3)为各控件添加事件代码如下。 
protected void ddlMode_SelectedIndexChanged(object sender, EventArgs e) 
{ 
switch (ddlMode.SelectedValue) 
{ 
case "None": 
Calendar1.SelectionMode=CalendarSelectionMode.None; 
break; 
case "DayWeekMonth": 
Calendar1.SelectionMode=CalendarSelectionMode.DayWeekMonth; 
break; 
case "DayWeek": 
Calendar1.SelectionMode=CalendarSelectionMode.DayWeek; 
break; 
case "Day": 
Calendar1.SelectionMode=CalendarSelectionMode.Day; 
break; 
} 
}p
rotected void Calendar1_SelectionChanged(object sender, EventArgs e) 
{ 
lblDate.Text =Calendar1.SelectedDate.ToShortDateString(); 
lblDay.Text=Calendar1.SelectedDate.Day.ToString()+"日"; 
lblMonth.Text=Calendar1.SelectedDate.Month.ToString()+"月"; 
lblYear.Text=Calendar1.SelectedDate.Year.ToString()+"年"; 
}
(4)网站运行效果如图3.11所示。

图3.r控件应用页面演示

11 
Calende

3.4
广告控件AdRotator 

AdRotator控件又称广告控件,在工具箱中图标为“ ”,封装在System. 
Web.Cnrlotol命名空间的AdRoator类中,用于在页面上显示广告图像序

UIotoWebCnrt
列,并能通(.) 过单击广(.) 告图片实现链接跳转。AdRotator控件的常用属性如表3.

8所示。

表3.8 
AdRotator控件的常用属性

属性说明
AdvertisementFile 获取或设置包含ad信息的XML 文件的路径
Target 获取或设置打开URL 的位置

AdRotator控件使用XML 文件存储ad信息。XML 文件使用<Advertisements> 开
始和结束。在<Advertisements> 标签内部,有若干个定义每条ad的<Ad> 标签。<Ad> 
标签中预定义的元素如表3.

9所示。

表3.<Ad>标签中预定义的元素

9 

标签名说明
<ImageUrl> 表示图像文件的路径
<NavigateUrl> 表示该ad时所链接的URL 

65

66 
标 签 名说 明
<AlternateText> 表示图像的替换文本
<Keyword> 表示ad的类别
<Impressions> 表示广告显示权重,所有的Impressions之和不能超过2048,000,000-1 
【示例3-6】 在chapter3网站根目录下创建名为example3-6的网页,页面内包含一个
广告控件,练习使用广告控件和广告文件。
(1)在chapter3网站根目录添加“广告文件”文件夹,其中包含方正电脑.gif、广东证券.gif、
雀巢咖啡.gif、招商银行.gif4张图片。
(2)在chapter3网站根目录添加XML文件,并命名为AdRotatorFile.xml,编写文件内
容如下。 
<? xml version="1.0" encoding="utf-8" > 
<Advertisements> 
<Ad> 
<ImageUrl>广告图片/方正电脑.gif</ImageUrl> 
<NavigateUrl>http://www.founderpc.cn</NavigateUrl> 
<AlternateText>欢迎访问方正电脑</AlternateText> 
<Keyword>方正</Keyword> 
<Impressions>20</Impressions> 
</Ad> 
<Ad> 
<ImageUrl>广告图片/广东证券.gif</ImageUrl> 
<NavigateUrl>http://www.gzs.com.cn</NavigateUrl> 
<AlternateText>欢迎访问广东证券</AlternateText> 
<Keyword>广东证券</Keyword> 
<Impressions>80</Impressions> 
</Ad> 
<Ad> 
<ImageUrl>广告图片/雀巢咖啡.gif</ImageUrl> 
<NavigateUrl>http://www.nescafe.com.cn</NavigateUrl> 
<AlternateText>欢迎访问雀巢咖啡</AlternateText> 
<Keyword>雀巢咖啡</Keyword> 
<Impressions>30</Impressions> 
</Ad> 
<Ad> 
<ImageUrl>广告图片/招商银行.gif</ImageUrl> 
<NavigateUrl>http://www.cmbchina.com</NavigateUrl> 
<AlternateText>欢迎访问招商银行</AlternateText> 
<Keyword>招商银行</Keyword> 
<Impressions>70</Impressions> 
</Ad> 
</Advertisements> 
(3)在example3-6的网页添加AdRotator控件,并设置相关属性,如下列源文件。
续表

67 
<form id="form1" runat="server"> 
< asp: AdRotator ID =" AdRotator1" runat =" server" AdvertisementFile =" ~/ 
AdRotatorFile.xml"/> 
</form> 
(4)运行页面,将按照权重随机显示一个广告。广告在每次页面载入时更改,每一个广
告出现的频率通过<Impressions>权重</Impressions>属性确定。如本示例中“广东证
券”的权重为80,所有广告的权重和为200,则每刷新页面200次,“广东证券”的广告大约将
以80次的频数进行显示。部分页面如图3.12所示。
图3.12 AdRotator控件应用页面演示
3.5 向导控件Wizard 
Wizard控件又称向导控件,在工具箱中图标为“ ”,封装在System. 
Web.UI.Control.WebControl命名空间的Wizard类中。Wizard控件提供了一种简单的机
制,能够轻松地生成步骤、添加新步骤或重新安排步骤顺序,无须编写代码即可生成线性或
非线性的导航,也可实现自定义控件的用户导航。Wizard控件的常用属性如表3.10所示。
Wizard控件的常用事件如表3.11所示。
表3.10 Wizard控件的常用属性
属 性 名说 明
ActiveStep 获取WizardSteps集合中当前显示给用户的步骤
ActiveStepIndex 获取或设置当前向用户显示的步骤
CancelButtonImageUrl 获取或设置为“取消”按钮显示的图像的URL 
CancelButtonText 获取或设置为“取消”按钮显示的文本标题
CancelButtonType 获取或设置呈现为“取消”按钮的按钮类型
CompleteStep 获取对最终用户账户创建步骤的引用
CreateUserButtonText 获取或设置在“创建用户”按钮上显示的文本标题
CreateUserButtonType 获取或设置呈现为“创建用户”按钮的按钮类型

续表

属性名说明
Email 获取或设置用户输入的电子邮件地址
FinishDestinationPageUrl 获取或设置当用户单击“完成”按钮时将重定向到的URL 
HeaderText 获取或设置为在控件上的标题区域显示的文本标题
Question 获取或设置用户输入的密码恢复确认问题
QuestionRequiredErorMesage 获取或设置由于用户未输入密码确认问题而显示的错误信息
StepNextButonImageUrl 获取或设置为“下一步”按钮显示的图像的URL 
StepNextButonStyle 获取一个对Style对象的引用,该对象定义“下一步”按钮的设置
StepNextButonText 获取或设置为“下一步”按钮显示的文本标题
StepNextButonType 获取或设置呈现为“下一步”按钮的按钮类型
StepPreviousButonImageUrl 获取或设置为“上一步”按钮显示的图像的URL 
StepPreviousButonStyle 获取一个对Style对象的引用,该对象定义“上一步”按钮的设置
StepPreviousButonText 获取或设置为“上一步”按钮显示的文本标题
StepPreviousButonType 获取或设置呈现为“上一步”按钮的按钮类型
StepStyle 获取一个对Style对象的引用
Style 获取在Web服务器控件外部标记上呈现为样式属性的文本属性的集合
TabIndex 获取或设置Web服务器控件的选项卡索引
ToolTip 获取或设置当鼠标指针悬停在Web服务器控件上时显示的文本
Visible 获取或设置一个值,该值指示服务器控件是否作为UI呈现在页面上
WizardSteps 获取一个包含该控件定义的所有WizardStepsBase对象集合

说明: 

(1)Wizard控件可用于下列工作。

.收集多个步骤中的相关信息。
.将大型输入页面分割成较小的逻辑步骤。
.允许线性或非线性地导航各个步骤。
(2)Wizard控件可分成4大区域, 13所示。
如图3.

.向导步骤(WizardStep)区域:Wizard控件使用
多个步骤描绘用户输入的不同部分。每个步骤
的内容添加在标记<asp:WizardStep>中,所有的
<asp:WizardStep>又都包含在<WizardSteps> 图3.d控件区域划分
13 
Wizar

标记中。实际应用时,每次只能显示一个<
a
WizardStep>定义的内容。
sp:


.标题(Header)区域:用于在步骤顶部提供一致信息,此项是可选元素。
.侧栏(Sidebar)区域:此项也是可选元素,通常显示在向导左边,包含所有步骤的列
68

表,并提供在各个步骤间的跳转。

. 导航(Navigation)按钮区域:有Wizard内置导航功能,它会根据步骤类型
(StepType)设置值的不同,而呈现不同的导航按钮。
表3.d控件的常用事件

11 
Wizar

事件名说明
ActiveStepChanged 当切换控件中显示的步骤时发生
CancelButonClick 当单击“取消”按钮时发生
FinishButonClick 当单击“完成”按钮时发生
NextButonClick 当单击“下一步”按钮时发生
PreviousButonClick 当单击“上一步”按钮时发生
SiderBarButonClick 当单击侧边栏中的按钮时发生

说明: 

NextButonClick、PreviousButonClick和SiderBarButonClick事件如不自主添加,控
件中也可自动实现“步骤”间的跳转。

(1)在chapter3网站根目录下添加Wizard控件,右击“”,在弹出的快捷菜单中选择
““添加/移除WizardSteps…”,或者单击“属性”窗口WizardSteps属性后面的标,出
现“WizardStep集合编辑器” 如图3.图(”) 
【示例3-7】在chapter3网站根目录下创建名为example3-7的网页,页面内包含一个
Wizard控件和若干其他基本控件,添加Wizard的Steps属性并进行应用。

窗口, 14所示。


图3.“p集合编辑器”窗口

14 
WizardSte

(2)添加5个WizardStep默认类型Step,即5个步骤,最后一个“完成”Step设置其
pType属性为C见图3.其余均为Auo属性。
Steomplete( 15), t

69

图3.15 
WizardStep集合编辑器设置

说明: 

每个WizardStep步骤都有一个StepType属性,作用是决定每个步骤中的导航按钮如
何显示。StepType的枚举值如下。

.Start:开始步骤。
.Step:阶段步骤。
.Finish:完成步骤。
.Complete:结束步骤。
.Auto:自动,系统自动识别其为何种StepType类型
。
te1620 所示
。
(3)按照每个Sp的界面,添加相应的控件,具体如图3.~图3.
图3.基本信息”步骤布局图3.详细信息”步骤布局

16 
“ 17 
“ 


图3.“兴趣爱好”步骤布局图3.“会员等级”步骤布局

18 
19 

70