7.3 标准控件
知识点讲解：光盘:视频\PPT讲解（知识点）\第7章\标准控件.mp4
在ASP.NET中，标准控件是最通用的控件。这些控件是最常用的，并且从.NET Framework 1.1开始就存在。本节将详细讲解ASP.NET标准控件的基本知识。
7.3.1 Label控件
Label控件用于在页面中输出指定的文本，执行后会被解析为HTML的<span></span>。通过Label控件可以控制常见的动态文本，其具体的使用格式如下。
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
Label控件的主要属性有如下3个。
- Font：设置Label控件显示文本的字体。
- Text：设置Label控件显示的文本内容。
- ForeColor：设置Label控件显示文本的颜色。
在Visual Studio 2012的属性窗口和事件中，可以很容易地对Label控件的属性和事件进行设置，如图7-11和图7-12所示。
图7-11 Label控件属性窗口
图7-12 Label控件事件窗口
7.3.2 TextBox控件
TextBox控件是供用户输入文本的输入控件。
- TextBox控件属性。
在默认情况下，TextMode属性设置为SingleLine，它创建只包含一行的文本框。然而，通过将TextMode属性值修改为TextBoxMode.MultiLine或TextBoxMode.Password，TextBox控件也可以显示多行文本框或显示屏蔽用户输入的文本框。使用Text属性，可以指定或确定TextBox控件中显示的文本。
TextBox控件包含多个属性，用于控制该控件的外观。文本框的显示宽度(以字符为单位)由它的Columns属性确定。如果TextBox控件是多行文本框，则它显示的行数由Rows属性确定。要在TextBox控件中显示换行文本，可将Wrap属性设置为True。
还可以设置一些属性来指定如何将数据输入到TextBox控件中。例如，要防止控件中显示的文本被修改，可将ReadOnly属性设置为True。如果想限定用户只能输入指定数目的字符，可设置MaxLength属性。将Wrap属性设置为True，可指定当到达文本框的结尾时，单元格内容自动在下一行继续。
- TextBox控件事件。
当用户离开TextBox控件时，该控件将引发TextChanged事件。默认情况下，并不立即引发该事件，而是当提交Web窗体页时才在服务器上引发。可以指定TextBox控件在用户离开该字段之后马上将页面提交给服务器。
TextBox Web服务器控件并非每当用户输入一个键击就引发事件，而是仅当用户离开该控件时才引发事件。可以让TextBox控件引发在客户端脚本中处理的客户端事件，这有助于响应单个键击。
和Label控件一样，在Visual Studio 2010的属性窗口和事件窗口中，可以很容易地对TextBox的属性和事件进行设置。
7.3.3 CheckBox和CheckBoxList控件
CheckBox和CheckBoxList Web服务器控件为用户提供了一种在“True-False”或“是-否”选项之间进行切换的方法。
由于存在两种不同的控件，并且其功能也略有不同，因此理解它们之间的不同很重要。本节主要介绍CheckBox和CheckBoxList的定义、二者的区别以及如何使用这两类控件。
（1）CheckBox控件
CheckBox控件在Web窗体页上创建复选框，该复选框允许用户在True或False状态之间切换。
- CheckBox控件属性。
CheckBox的使用比较简单，主要使用Id属性和Text属性。Id属性指定对复选控件实例的命名；Text属性主要用于描述选择的条件。另外，当复选控件被选择以后，通常根据其Checked属性是否为真来判断用户选择与否。
通过设置Text属性可以指定要在控件中显示的标题。标题可显示在复选框的右侧或左侧。设置TextAlign属性可以指定标题显示在哪一侧。
- CheckBox控件事件。
若要确定是否已选中CheckBox控件，需测试Checked属性。当CheckBox控件的状态在向服务器的发送过程中发生更改时，将引发CheckedChanged事件。可以为CheckedChanged事件提供事件处理程序，以便在向服务器的各次发送过程中，CheckBox控件的状态发生改变时执行特定的任务。
注意：当创建多个CheckBox控件时，还可以使用CheckBoxList控件。对于使用数据绑定创建一组复选框而言，CheckBoxList控件更易于使用，而各个CheckBox控件则可以更好地控制布局。
由于<asp:CheckBox>元素没有内容，因此可用“/>”结束该标记，而不必使用单独的结束标记。
默认情况下，CheckBox控件在被单击时不会自动向服务器发送窗体。若要启用自动发送，需将AutoPostBack属性设置为True。
（2）CheckBoxList控件
与单个CheckBox控件相反，当用户选择列表中的任意复选框时，CheckBoxList控件都将引发SelectedIndexChanged事件。默认情况下，此事件并不导致向服务器发送窗体，但可以通过将AutoPostBack属性设置为True来指定此选项。
与单个CheckBox控件一样，更常见的做法是在通过其他方式发送窗体之后测试CheckBoxList控件的状态。
实例023 单击按钮后能根据用户的选择输出不同的提示
源码路径 光盘\daima\7\CheckBox.aspx 视频路径 光盘\视频\实例\第7章\023
本实例的实现文件为CheckBox.aspx，具体实现代码如下。
<script runat="server">
void Button1_Click(object Source, EventArgs e)
{
if (Check1.Checked == true)
{
//选择复选框输出的提示
Span1.InnerHtml = "已经打开!";
}
else
{
//没有选择复选框输出的提示
Span1.InnerHtml = "已经关闭!";
}
}
</script>
<h3>HtmlInputCheckBox Sample</h3>
<form id="Form1" runat="server">
<input id="Check1" type="checkbox" runat="server" /> 开关
<span id="Span1" style="color:red" runat="server" />
<input type="button" id="Button1" value="Enter" onserverclick="Button1_Click" runat="server"/>
</form>
范例045：动态添加DropDownList项
源码路径：光盘\演练范例\045视频路径：光盘\演练范例\045范例046：DropDownList的数据绑定
源码路径：光盘\演练范例\046视频路径：光盘\演练范例\046\上述文件运行后首先按指定样式显示页面内的元素，如图7-13所示；如果勾选复选框并单击【Enter】按钮后，则会输出“已经打开”提示，如图7-14所示；如果没有勾选复选框而单击【Enter】按钮后，则会输出“已经关闭”提示，如图7-15所示。
图7-13 默认显示效果
图7-14 勾选复选框后的提示
图7-15 没有勾选复选框后的提示
7.3.4 RadioButton和RadioButtonList控件
RadioButton和RadioButtonList控件允许用户从预定义的列表中选择一项，它们和CheckBox和CheckBoxList控件类似。当向ASP.NET网页添加单选按钮时，可以使用RadioButton控件或RadioButtonList控件。这两种控件都允许用户从一小组互相排斥的预定义选项中进行选择，也允许RadioButton、RadioButtonList定义任意数目带标签的单选按钮，并将它们水平或垂直排列。
可以向页面添加单个RadioButton控件，并单独使用这些控件。通常是将两个或多个单独的按钮组合在一起。
与之相反，RadioButtonList控件是单个控件，可作为一组单选按钮列表项的父控件。它派生自ListControl基类，工作方式与ListBox、DropDownList、BulletedList和CheckBoxList控件很相似。因此，使用RadioButtonList控件的很多过程与使用其他列表Web服务器控件的过程相同。
注意：RadioButtonList控件不允许在按钮之间插入文本，但如果想将按钮绑定到数据源，使用这类控件要方便得多。在编写代码以检查所选定的按钮方面，它也稍微简单一些。
在单个RadioButton控件和RadioButtonList控件之间，事件的工作方式略有不同。
- 单个RadioButton控件。
单个RadioButton控件在用户单击该控件时引发CheckedChanged事件。默认情况下，这一事件并不导致向服务器发送页面，但通过将AutoPostBack属性设置为True，可以使该控件强制立即发送。
无论RadioButton控件是否发送到服务器，通常都没有必要为CheckedChanged事件创建事件处理程序。相反，更常见的做法是在窗体已被某个控件（如Button控件）发送到服务器时测试选定了哪个按钮。
- RadioButtonList控件。
与单个的RadioButton控件相反，RadioButtonList控件在用户更改列表中选定单选按钮时会引发SelectedIndexChanged事件。默认情况下，此事件并不导致向服务器发送窗体，但可以通过将AutoPostBack属性设置为True来指定此选项。
7.3.5 Image控件
Image控件可以在Web窗体页上显示图像，并使用服务器代码管理这些图像。Image服务器控件的主要属性如下。
- ImageUrl：设置图片的路径，为当前文件夹下的相对路径。
- AlyernateText：设置如果图片不正常显示时，显示的文本文字。
除了显示图形之外，Image 控件还允许为图像指定各种类型的文本，具体如下。
- ToolTip：某些浏览器显示在工具提示中的文本。
- AlternateText：无法找到图形文件时显示的文本。如果未指定任何ToolTip属性，某些浏览器将使用AlternateText值作为工具提示。
- GenerateEmptyAlternateText：如果将此属性设置为True，所呈现的图像元素的Alt属性将被设置为空字符串。
7.3.6 Table控件
Table Web服务器控件用于在ASP.NET网页上创建通用表。表中的行将作为TableRow Web服务器控件创建，而每行中的单元格则作为TableCell Web服务器控件来实现。它和HTML中的<table>标记的用法基本一致，可以对网页内的元素进行排版处理。
在页面中插入Table控件后，可以右键单击Table并在弹出的快捷菜单中选择“添加扩展程序”命令，在弹出的“扩展程序向导”对话框中可以创建扩展程序，以增强Table Web服务器控件的功能，如图7-16所示。
图7-16 “扩展程序向导”对话框
7.3.7 按钮控件
ASP.NET中的按钮控件允许向用户发送命令。Button控件能够在网页中显示一个标准命令按钮，Web服务器的按钮控件包括如下3种。
1．标准命令按钮Button
标准命令按钮Button显示一个标准命令按钮，该按钮呈现为一个HTML Input元素。执行后会被解析为<input type = "submit">，其最大好处是可以灵活使用单击事件来实现某些功能。除了能够提交事件处理外，Button还能传递应用参数。例如下面的代码。
<script language="javascript">
<!--
function funcheck()
{
alert('触发该事件的按钮id：'＋event.srcElement.id);
}
//-->
</script>
<form action="Hidden.aspx">
<input type=submit id=B1 onclick="funcheck();" value="按钮1">
<input type=button id=B2 onclick="funcheck();" value="按钮2">
</form>
在上述代码中，将按钮的id作为参数来传递。Button控件支持OnClick事件和OnCommand事件。
2．超级链接样式按钮LinkButton
LinkButton控件显示为页面中的一个超链接。但是，它包含使窗体被发回服务器的客户端脚本。可以使用HyperLink Web服务器控件创建真实的超链接。当用户单击LinkButton后，包含该链接按钮的的表单中的所有域都被提交到服务器，LinkButton控件将会被解析为<a>。
LinkButton控件的使用方法和Button控件的使用方法一样，也支持OnClick事件和OnCommand事件，并且也能传递参数。
3．图形按钮ImageButton
ImageButton控件允许将一个图形指定为按钮。这对于提供丰富的按钮外观非常有用。ImageButton 控件还能查明用户在图形中单击的位置，因此，可将该按钮用作图像映射。
和ImageButton相关的控件有3个，分别是Image、ImageButton和ImageMap。通过ImageMap可以在图片的不同位置来响应不同的事件，并且可以将图片分割为不同的区域，这些不同的区域都可以拥有自己的链接。
ImageButton控件也支持OnClick事件和OnCommand事件。
4．按钮回发行为
当用户单击按钮控件时，该页回发到服务器。默认情况下，该页回发到其本身，在这里重新生成相同的页面并处理该页上控件的事件处理程序。
可以配置按钮以将当前页面回发到另一页面，这对于创建多页窗体非常有用（详细信息请参见ASP.NET网页中的跨页发送）。在默认情况下，Button控件使用HTML POST操作提交页面。LinkButton和ImageButton控件不能直接支持HTML POST操作。所以在使用这两类按钮时，需将客户端脚本添加到页面，以允许控件以编程方式提交页面。为此，LinkButton和ImageButton控件要求在浏览器上启用客户端脚本。
在某些情况下，用户需要Button控件也使用客户端脚本执行回发。例如，当希望以编程方式操作回发（如将回发附加到页面上的其他元素）时，可以将Button控件的UseSubmitBehavior属性设置为True。
5．处理Button控件的客户端事件
Button控件既可以引发服务器事件，也可以引发客户端事件。服务器事件在回发后发生，且这些事件在为页面编写的服务器端代码中处理。客户端事件在客户端脚本（通常为ECMAScript (JavaScript)）中处理，并在提交页面前引发。通过向ASP.NET按钮控件添加客户端事件，可以执行任务（如在提交页面前显示确认对话框以及可能取消提交）。
实例024 演示按钮控件的具体使用方法
源码路径 光盘\daima\7\2\ 视频路径 光盘\视频\实例\第7章\024
本实例的具体实现文件如下。
- Default.aspx：逐一在页面内显示Button、ImageButton和LinkButton。
- Default.aspx.cs：根据按钮控件的类型和获取的事件，执行对应的事件代码并输出对应的提示。
文件Default.aspx的主要实现代码如下。
<div>
使用Button控件：<br />
<asp:Button ID="Button1"
CommandName="单击Button按钮"
CommandArgument="Button1"
runat="server" OnClick="Button1_Click"
Text="OnClick事件" Width="143px"
/>
<asp:Button ID="Button2" runat="server" CommandName="单击Button按钮" CommandArgument="Button1" OnCommand="Button2_Click" Text="OnCommand事件" /><br />
<br />
使用LinkButton：<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl
="http://lindingbao.3ca.cn">LinkButton</asp:LinkButton><br />
<br />
使用ImageButton：<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl= "~/img/1.jpg"
OnClick="ImageButton1_Click"/>
<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label><br />
使用ImageMap：
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/img/2.jpg">
<asp:CircleHotSpot AlternateText="上半部分" NavigateUrl="~/img/1.jpg" Target="_blank"
X="64" Y="64" />
<asp:CircleHotSpot AlternateText="下半部分" NavigateUrl="~/img/2.jpg" Target="_blank"
X="128" Y="128" />
</asp:ImageMap></div>
范例047：用RadioButton实现互斥
源码路径：光盘\演练范例\047视频路径：光盘\演练范例\047范例048：制作网络调查问卷
源码路径：光盘\演练范例\048视频路径：光盘\演练范例\048\上述文件执行后将按指定样式显示各页面元素，如图7-17所示。
图7-17 初始显示效果
文件Default.aspx.cs的主要实现代码如下。
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string argName = ((Button)sender).CommandName;
string argArg = ((Button)sender).CommandArgument;
Response.Write("您所提交的动作为："＋argName＋"，动作目标是："＋argArg);
}
protected void Button2_Click(object sender, EventArgs e)
{
string argName = ((Button)sender).CommandName;
string argArg = ((Button)sender).CommandArgument;
Response.Write("您所提交的动作为：" ＋ argName ＋ "，动作目标是：" ＋ argArg);
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
//取得点击图像的坐标
int x = e.X;
int y = e.Y;
string msg = "";
if (x < 64 && y < 64)
{
msg = "您点击了图像的左上角！";
}
else if (x > 64 &&y < 64)
{
msg = "您点击了图像的右上角！";
}
else if (x < 64 && y >64)
{
msg = "您点击了图像的左下角！";
}
else if (x > 64 && y > 64)
{
msg = "您点击了图像的右下角！";
}
else
{
msg = "点错地方了！";
}
this.Label1.Text= msg ＋ "坐标位置：X：" ＋ x ＋ "Y："＋y;
}
经过Default.aspx.cs的事件处理后，实例文件设计完毕。当用户单击对应类型的按钮后，会执行对应的事件处理代码，并输出对应的提示，如图7-18所示。
图7-18 单击ImageButton后的提示信息
7.3.8 ListBox控件
在ASP.NET中，列表框控件（ListBox控件）能够在一个文本框内提供多个供用户选择的控件。它比较类似于下拉列表，只是没有显示结果的文本框。列表框控件在Web的动态应用中也十分常见，例如系统经常将获取的数据库数据以列表样式显示出来，以供用户选择。
ListBox控件使用户能够从预定义的列表中选择一项或多项。它与DropDownList控件不同，可以一次显示多项，还允许用户选择多个选项并显示。
ListBox控件通常用于一次显示一个以上的项，用户可以在如下两个方面控制列表的外观。
- 显示的行数：可将该控件设置为显示特定的项数。如果该控件包含比设置的项数更多的项，则显示一个垂直滚动条。
- 高度和宽度：可以以像素为单位设置控件的大小。在这种情况下，控件将忽略已设置的行数，而是显示足够多的行直至填满控件的高度。有些浏览器不支持以像素为单位设置高度和宽度，而使用行数设置。
ListBox的常用属性如下。
- SelectionMode：决定控件是否允许多项选择。其值为ListSelectionMode.Single时，只允许用户从列表框中选择一个选项；其值为List.Selection Mode.Multi时，用户可以使用Ctrl键或者Shift键结合鼠标，从列表框中选择多个选项。
- DataSource：说明数据的来源可以为数组、列表、数据表。
- AutoPostBack：设定是否要使用OnSelectedIndexChanged事件。
- Items：传回ListBox Web控件中ListItem选项值。
- Rows：设定ListBox Web控件一次要显示的列数。
- SelectedIndex：传回被选取到ListItem的Index值。
- SelectedItem：传回被选取到ListItem参考，也就是ListItem本身。
- SelectedItems：由于ListBox Web控件可以复选，被选取的项目会被加入ListItems集合中，本属性可以传回ListItems集合，只读。
7.3.9 CheckBoxList控件
CheckBoxList控件和ListBox控件相对应，它可以列出多个CheckBox复选框，并且可以将CheckBoxList 控件看做是多个CheckBox的集合。
7.3.10 DropDownList控件
DropDownList控件使用户可以从单项选择下拉列表框中进行选择。DropDownList控件类似于ListBox控件。不同之处在于它只在框中显示选定项，同时还显示下拉按钮。当用户单击此按钮时，将显示项的列表。
可以通过以像素为单位设置DropDownList控件的高度和宽度来控制其外观。部分浏览器不支持以像素为单位设置高度和宽度，这些浏览器将使用行计数设置。无法指定用户单击下拉按钮时下拉列表中显示的项数，所显示的下拉列表的长度由浏览器确定。
与其他Web服务器控件一样，可以使用样式对象来指定DropDownList控件的外观。
DropDownList控件实际上是列表项的容器，这些列表项都属于ListItem类型。每一个ListItem对象都是带有自己的属性的单独对象，这些属性的具体说明如下。
- Text：指定在列表中显示的文本。
- Value：包含与某个项相关联的值。设置此属性可使该值与特定的项关联而不显示该值。例如，可以将Text属性设置为美国某个州的名称，而将Value属性设置为该州的邮政区名缩写。
- Selected：通过一个布尔值指示是否选择了该项。
实例025 为用户提供信息选择列表，当选择并单击按钮后输出对应的选择结果
源码路径 光盘\daima\7\ListBox.aspx 视频路径 光盘\视频\实例\第7章\025
本实例的实现文件为ListBox.aspx，具体实现代码如下。
<script language="C#|" runat="server">
public void Page_Load(object sender, System.EventArgs e)
{
if(!this.IsPostBack) Label1.Text="未选择";
}
public void Button1_Click(object sender, System.EventArgs e)
{
string tmpstr="";
for(int i=0;i<this.ListBox1.Items.Count;i＋＋)
{
if(ListBox1.Items[i].Selected)
tmpstr=tmpstr＋" "＋ListBox1.Items[i].Text;
}
if(tmpstr=="") Label1.Text="未选择";
else Label1.Text=tmpstr;
}
</script>
……
ListBox控件示例
<p>请选择城市
<form id="form1" runat="server">
<asp:listbox id="ListBox1" runat="server" SelectionMode="Multiple" Height="104px" Width="96px">
<asp:ListItem Value="北京">北京</asp:ListItem>
<asp:ListItem Value="上海">上海</asp:ListItem>
<asp:ListItem Value="天津">天津</asp:ListItem>
<asp:ListItem Value="南京">南京</asp:ListItem>
<asp:ListItem Value="杭州">杭州</asp:ListItem>
</asp:listbox>
<input id="Button1" type="button" value="提交" name="Button1" runat="server" onserverclick="Button1_Click">
<p>您的选择结果是：
<asp:label id="Label1" runat="server" Width="160px"></asp:label>
</form>
范例049：动态添加CheckBoxList的选择项
源码路径：光盘\演练范例\049视频路径：光盘\演练范例\049范例050：LinkButton控件与HyperLink控件
源码路径：光盘\演练范例\050视频路径：光盘\演练范例\050\上述代码执行后，将按指定样式显示信息选择列表框，如图7-19所示；当选择一个列表选项并单击【提交】按钮后，会输出对应的选择结果，如图7-20所示。
图7-19 初始显示效果
图7-20 输出选择项
在上述代码中，将ListBox的SelecttionMode属性设为“Multiple”，是为了可以进行多项选择。用户可以按住<Ctrl>键的同时选择多个选项，如图7-21所示。
图7-21 选择多个选项
在实际应用中，复选框、列表框和数据库的绑定都可以通过Visual Studio 2010来实现，具体操作如下。
（1）当在Visual Studio 2010的设计界面中插入一个ListBox控件后，单击控件右上方的三角按钮，将弹出一个下拉列表，如图7-22所示。
图7-22 下拉列表
（2）单击“选择数据源”选项后弹出“数据源配置向导”界面，如图7-23所示。
图7-23 “数据源配置向导”界面
（3）在“选择数据源”下拉列表框中选择“新建数据源”，单击【确定】按钮后，在弹出的界面中可以随意选择要连接数据的类型。例如，可以选择“Access数据库”，如图7-24所示。
图7-24 “选择数据源类型”界面
（4）单击【确定】按钮后弹出“选择数据库”界面，然后选择一个Access数据库，如图7-25所示。
图7-25 “选择数据库”界面
（5）单击【下一步】按钮后弹出“配置Select语句”界面，在此选择要检索的表名和字段，如图7-26所示。
图7-26 “配置Select语句”界面
（6）单击【下一步】按钮后弹出“测试查询”界面，最后单击【完成】按钮后完成配置，如图7-27所示。
图7-27 “测试查询”界面
经过上述操作后，成功地将ListBox控件和数据库数据进行了绑定。将站点保存在“7\WebSite2\”文件夹内，查看其实现文件，主要代码如下。
<asp:ListBox ID="ListBox1" runat="server" DataSourceID="AccessDataSource1"
DataTextField="sname" DataValueField="sname"></asp:ListBox>
<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/shop.mdb" SelectCommand="SELECT [sname] FROM [good]">
</asp:AccessDataSource>
从上述代码中可以看出，经过Visual Studio 2010的绑定配置后，将在页面内自动生成数据库绑定代码。执行后会显示指定数据库内表中字段的数据，如图7-28所示。
图7-28 执行效果
7.3.11 DataList控件
DataList控件以某种格式显示数据，这种格式可以使用模板和样式进行定义。DataList控件可用于任何重复结构中的数据，例如表。DataList控件可以以不同的布局显示行，如按列或行对数据进行排序。
在使用DataList控件时，可以使用模板定义信息的布局。DataList控件可以使用的模板如下。
- ItemTemplate：包含一些HTML元素和控件，将为数据源中的每一行呈现一次这些HTML元素和控件。
- AlternatingItemTemplate：包含一些HTML元素和控件，将为数据源中的每两行呈现一次这些HTML元素和控件。通常可以使用此模板来为交替行创建不同的外观。例如，指定一个与在ItemTemplate属性中指定的颜色不同的背景色。
- SelectedItemTemplate：包含一些元素，当用户选择DataList控件中的某一项时将呈现这些元素。通常可以使用此模板来通过不同的背景色或字体颜色直观地区分选定的行。还可以通过显示数据源中的其他字段来展开该项。
- EditItemTemplate：指定当某项处于编辑模式中时的布局。此模板通常包含一些编辑控件，如TextBox控件。
- HeaderTemplate和FooterTemplate：包含在列表的开始和结束处分别呈现的文本和控件。
- SeparatorTemplate：包含在每项之间呈现的元素，最为常见的是一条直线（HR）。
可以在上述模板中设置其外观样式，每个模板支持自己的样式对象，可以在设计时和运行时设置该样式对象的属性。
1．DataList属性
DataList控件的常用属性如表7-2所示。
表7-2 DataList控件的常用属性
|
属 性 |
值 |
描 述 |
|---|---|---|
|
Caption |
|
作为HTML Caption元素显示的文本 |
|
CaptionAlign |
Bottom、Left、NotSet、Right、Top |
指定Caption元素的放置位置 |
|
CellPadding |
|
单元格内容和边框之间的像素数 |
|
CellSpacing |
|
单元格之间的像素数 |
|
DataKeyField |
|
指定数据源中的键字段 |
|
DataKeys |
|
每条记录的键值的集合 |
|
DataMember |
|
设定多成员数据源中的数据成员 |
|
DataSource |
|
为控件设置数据源 |
|
EditItemIndex |
|
编辑的行，从零开始的行索引，如果没有项被编辑或者清除对某项的选择，则其值设置为−1 |
|
EditItemStyle |
|
派生自WebControl.Style类，目前选中的编辑行的样式 |
|
FooterStyle |
|
派生自WebControls.Style类，页脚部分的样式属性 |
|
GridLines |
Both、Horiz- ontal、None、Vertical |
设置显示哪些网格线，默认值为None |
|
HeaderStyle |
|
派生自WebControls. Style类，标题部分的样式属性 |
|
Items |
|
控件中的所有项的集合 |
|
ItemStyle |
|
派生自WebControls. Style 类，控件中每个项的默认样式属性 |
|
RepeatColumns |
|
设置显示的列数 |
|
RepeatDirection |
Horizontal、Vertical |
如果为Horizontal，项是从左到右，然后从上到下显示；如果是Vertical，项是从上到下，然后从左到右显示的。默认值为Vertical |
|
RepeatLayout |
Flow、Table |
如果为Flow，项显示时不会有表结构，否则会有一个表结构。默认值为Table |
2．DataList事件
DataList控件的常用事件如表7-3所示。
表7-3 DataList控件的常用事件
|
事 件 |
描 述 |
|---|---|
|
DataBinding |
当控件绑定到数据源时触发 |
|
DeleteCommand |
当单击【Delete】按钮时触发 |
|
EditCommand |
当单击【Edit】按钮时触发 |
|
Init |
当控件初始化时触发 |
|
ItemCommand |
当单击控件中的一个按钮时触发 |
|
ItemCreated |
在控件中的所有行创建完毕后触发 |
|
ItemDataBound |
当绑定数据时触发 |
|
PreRender |
在控件呈现在页面上之前触发 |
|
UpdateCommand |
当单击【Update】按钮时触发 |
实例026 将指定数据库的数据绑定到DataList控件，并在前台页面中调用显示
源码路径 光盘\daima\7\DataList\ 视频路径 光盘\视频\实例\第7章\026
本实例的具体实现分配过程如下所示。
1．建立数据库
在SQL Server中新建一个名为“students”的数据库，并在其中新建一个名为“ziliao”的表，具体结构如表7-4所示。
表7-4 “ziliao”表的结构
|
列 名 |
类 型 |
是 否 主 键 |
说 明 |
|---|---|---|---|
|
ID |
int |
是 |
编号 |
|
Name |
char |
否 |
姓名 |
|
age |
int |
否 |
年龄 |
|
Address |
char |
否 |
地址 |
|
Zip |
char |
否 |
邮编 |
|
Grade |
char |
否 |
年级 |
|
Class |
char |
否 |
班级 |
2．文件123.aspx
文件123.aspx的功能是插入DataList控件，设置DataList控件的模板样式，并将指定的数据绑定显示。该文件的主要实现代码如下所示。
<asp:DataList ID="DataList1"
runat="server" BackColor="White"
BorderColor="#|DEDFDE" BorderWidth="1px"
CellPadding="4" ForeColor="Black"
GridLines="Vertical"
RepeatDirection="Horizontal"
OnEditCommand="DataList1_EditCommand"
OnCancelCommand="DataList1_CancelCommand"
OnDeleteCommand="DataList1_DeleteCommand"
OnUpdateCommand="DataList1_UpdateCommand"
BorderStyle="None"
>
<FooterStyle BackColor="#|CCCC99" />
<SelectedItemStyle BackColor="#|CE5D5A" ForeColor="White" Font-Bold="True" />
<ItemTemplate>
编号:
<asp:Label ID="StuIDLabel" runat="server" Text='<%#| Eval("ID") %>'></asp:Label><br />
姓名:
<asp:Label ID="StunameLabel" runat="server" Text='<%#| Eval("name") %>'></asp:Label><br />
年龄:
<asp:Label ID="StuageLabel" runat="server" Text='<%#| Eval("age") %>'></asp:Label><br />
地址:
<asp:Label ID="AddressLabel" runat="server" Text='<%#| Eval("Address") %>'></asp:Label><br />
邮编:
<asp:Label ID="ZipLabel" runat="server" Text='<%#| Eval("Zip") %>'></asp:Label><br />
年级:
<asp:Label ID="GradeLabel" runat="server" Text='<%#| Eval("Grade") %>'></asp:Label><br />
班级:
<asp:Label ID="ClassLabel" runat="server" Text='<%#| Eval("Class") %>'></asp:Label><br /><br />
<asp:LinkButton ID="LinkButton1" runat="server" CommandArgument='<%#| Eval("ID") %>' CommandName="Edit">
编辑</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandArgument='<%#| Eval("ID") %>' CommandName="Delete">删除
</asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
编号：<%#| Eval("uid") %><br />
姓名：<%#| Eval("name") %><br />
年龄：<%#| Eval("age") %><br />
地址：<asp:TextBox ID="txtAddress" runat="server" Text='<%#| Eval("Address") %>' ></asp:TextBox><br />
邮编：<%#| Eval("zip") %><br />
年级：<%#| Eval("grade") %><br />
班级：<%#| Eval("class") %><br />
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update">更新</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel">取消</asp:LinkButton>
</EditItemTemplate>
<AlternatingItemStyle BackColor="White" />
<HeaderStyle BackColor="#|6B696B" Font-Bold="True" ForeColor="White" />
<ItemStyle BackColor="#|F7F7DE" />
</asp:DataList>
范例051：实现热点地图导航
源码路径：光盘\演练范例\051视频路径：光盘\演练范例\051范例052：实现一个简单图片导航
源码路径：光盘\演练范例\052视频路径：光盘\演练范例\052\3．文件123.aspx.cs
文件123.aspx.cs的功能是建立和指定数据连接，获取数据库数据，并定义数据操作处理的事件和方法，实现对绑定数据的编辑和删除处理。该文件主要实现代码如下。
SqlConnection conn = new SqlConnection("Data Source=（local）;Initial Catalog=students;User ID=sa;
Password=888888"); //建立和指定数据库的连接
protected void Page_Load(object sender, EventArgs e)
{
Dbind();
}
protected void Dbind() //定义方法实现数据绑定
{
conn.Open();
SqlCommand cmd = new SqlCommand("select * from ziliao", conn);
SqlDataReader sdr = cmd.ExecuteReader();
DataList1.DataSource = sdr;
DataList1.DataBind();
conn.Close();
}
//单击“编辑”链接处理方法
protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = e.Item.ItemIndex;
Page.SmartNavigation = true;
Dbind();
}
//单击取消链接处理方法
protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = -1;
Page.SmartNavigation = true;
Dbind();
}
//单击“删除”链接处理方法
protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
conn.Open();
string sql = "delete from ziliao where id=" ＋ e.CommandArgument;
SqlCommand cmd = new SqlCommand(sql,conn);
cmd.ExecuteNonQuery();
conn.Close();
Page.SmartNavigation = true;
Dbind();
}
//单击“更新”链接处理方法
protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
conn.Open();
TextBox address = (TextBox)e.Item.FindControl("txtAddress");
string sql = "update ziliao set address='" ＋ address.Text ＋ "' where uid=" ＋ e.CommandArgument;
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.ExecuteNonQuery();
conn.Close();
Page.SmartNavigation = true;
Dbind();
}上述代码执行后，将在DataList内按指定样式输出显示绑定的数据，如图7-29所示；单击“编辑”链接将弹出地址更新表单，在此可以对选定用户的地址进行更新，如图7-30所示；单击“更新”链接将完成更新处理；单击“删除”链接将删除指定的用户信息。
图7-29 初始显示界面
图7-30 信息更新界面
7.3.12 Wizard控件和WizardStep控件
用户希望新应用程序能提供向导功能，以引导他们完成多步操作。Wizard控件能够为用户提供表示一连串步骤的基础架构，这样既可以访问所有步骤中包含的数据，也能够更方便地进行前后导航。
和MultiView控件类似，Wizard控件中包含一个WizardStep对象集合。WizardStep从View类继承，而且WizardStep和Wizard控件之间的关系与View和MultiView控件的关系类似。WizardStep中的所有控件都位于页面控件树中，并且无论哪个WizardStep可见，都可以在运行时通过代码实现控件访问。当用户单击一个导航按钮或链接时，页面将被提交到服务器，但不支持跨页提交。
Wizard控件主要负责导航处理，它能够自动创建合适的按钮，例如“下一步”“上一步”和“完成”按钮。通过对应设置后，可以使一些步骤只能被导航一次。在默认情况下，Wizard控件显示一个包含导航链接的工具栏，这让用户可以从当前步骤转到其他步骤。
1．Wizard控件属性
在Wizard控件中，有许多常用的外观和行为属性。表7-5列出了一些Wizard控件中与按钮外观无关的属性。
表7-5 与按钮外观无关的属性
|
属 性 |
类 型 |
描 述 |
|---|---|---|
|
ActiveStep |
WizardStepBase |
WizardsSteps集合中当前显示的步骤 |
|
ActiveStepIndex |
Integer |
WizardsSteps集合中当前显示的从0开始的步骤 |
|
CancelDestinationPageUrl |
String |
当用户单击“取消”按钮时要链接到的URL |
|
CellPadding |
Integer |
单元格的内容与边框间的像素间距，默认值为0 |
|
CellSpacing |
Integer |
单元格间的像素间距，默认值为0 |
|
DisplayCancelButton |
Boolean |
如果值为True，则显示一个取消按钮。默认值False |
|
DisplaySideBar |
Boolean |
如果值为True，则显示一个工具条。默认值False |
|
FinishDestinationPageUrl |
String |
当用户单击“完成”按钮时要链接到的URL |
|
FinishNavigationTemplate |
ITemplate |
用于指定完成步骤的导航区域的样式和内容的模板，包括最后的步骤遵循“Step-Type=Finish”的步骤 |
|
HeaderStyle |
TableItemStyle |
标题区域的样式属性 |
|
HeaderTemplate |
ITemplate |
用于指定标题区域的内容和样式的模板。标题区域位于每个步骤的顶部 |
|
HeaderText |
String |
在标题区域显示的文本 |
|
NavigationButtonStyle |
Style |
导航区域按钮的样式属性 |
|
NavigationStyle |
TableItemStyle |
导航区域的样式属性 |
|
SideBarButtonStyle |
Style |
用于指定侧栏上按钮外观的样式属性 |
|
SideBarStyle |
TableItemStyle |
侧栏区域的样式 |
|
SideBarTemplate |
ITemplate |
用于指定侧栏区域内容和样式的模板 |
|
SkipLinkText |
String |
为不可见图像呈现替换文本，以配合辅助技术。默认值为“Skip Navigation Links”，默认值将根据服务器当前的区域设置进行本地化 |
|
StartNavigationTemplate |
ITemplate |
用于指定Start步骤的导航区域的内容和样式的模板。Start步骤是第一步或是StepType=Start的步骤 |
|
StepNavigationTemplate |
ITemplate |
用于指定一般步骤（Start、Finish或Complete以外的步骤）中导航区域内容和样式的模板 |
|
StepStyle |
TableItemStyle |
WizardStep对象的样式属性 |
|
WizardSteps |
WizardStepCollection |
WizardStep对象的集合 |
Wizard控件中与按钮有关的属性信息如表7-6所示。
表7-6 与按钮有关的属性
|
属 性 名 |
类 型 |
值 |
描 述 |
|---|---|---|---|
|
CancelButtonImageUrl |
String |
|
按钮上所显示图像的URL |
|
CancelButtonStyle |
Style |
|
用于指定按钮外观的样式属性 |
|
CancelButtonText |
String |
|
按钮上显示的文本 |
|
CancelButtonType |
ButtonType |
Button |
按钮类型 |
上述大部分属性都属于TableItemStyle类型，此类从System.Web.UI.WebControls.Style继承。TableItemStyle类还有许多其他属性，如BackColor、BorderColor、BorderStyle、BorderWidth、CssClass、Font、ForeColor、Height、HorizonalAlign、VerticalAlign、Width和Wrap。
如果使用Visual Studio 2010进行开发，会发现Wizard控件属性窗口中的所有TableItemStyle类型的属性前面会显示一个加号按钮。单击这个加号按钮会展开TableItemStyle子属性列表，如图7-31所示。
图7-31 Wizard控件属性窗口
在具体页面文件代码中，以上述方式设置的Wizard属性将包含在单独的元素中，对应的代码段会高亮显示。
可以通过样式和模板来自定义Wizard控件的外观样式，包括各种各样的按钮和链接、标题和页脚、工具条和WizardStep控件。
实例027 演示Wizard控件和WizardStep控件的用法
源码路径 光盘\daima\7\WizardStep.aspx 视频路径 光盘\视频\实例\第7章\027
本实例的实现文件为WizardStep.aspx，其主要代码如下。
<asp:Wizard ID="Wizard1" runat="server">
<WizardSteps>
<asp:WizardStep ID="WizardStep1"
runat="server"
Title="1"
>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="2">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
范例053：在sitemap文件中设计站点导航地图
源码路径：光盘\演练范例\053视频路径：光盘\演练范例\053范例054：使用sitemap文件和实现网站导航
源码路径：光盘\演练范例\054视频路径：光盘\演练范例\054\在上述代码中，通过Wizard控件和WizardStep控件实现了简单的向导效果。代码执行后将显示一个最基本的向导界面，共有2步，如图7-32所示。
图7-32 简单向导界面
对于上述实例来说，其实无需编码，只需通过Visual Studio 2010即可轻松实现，具体的实现流程如下。
（1）使用Visual Studio 2010打开上述实例文件，并进入设计界面，如图7-33所示。
图7-33 实例文件的设计界面
（2）单击Wizard方框右上方的三角形标识
，弹出“Wizard任务”列表，如图7-34所示。
图7-34 “Wizard任务”列表
（3）在“Wizard任务”列表中选择“添加/移除WizardStep”选项，弹出“WizardStep集合编辑器”对话框，如图7-35所示。
图7-35 “WizardStep集合编辑器”对话框
（4）分别添加Tltle值为“3”、“4”、“5”的WizardStep项，如图7-36所示。
图7-36 添加WizardStep项
（5）单击【确定】按钮返回设计界面，实例文件执行后将会显示有5个选项的向导效果，如图7-37所示。
图7-37 修改的效果
在WizardStep中常用的属性还有StepType和AllowReturn。其中StepType属性的值是一个WizardStepType枚举值，各枚举值的具体说明如表7-7所示。
表7-7 WizardStepType枚举值说明
|
枚 举 |
描 述 |
|---|---|
|
Auto |
声明步骤中的顺序决定了导航的界面，这是默认值 |
|
Complete |
要显示的最后步骤，它不呈现导航按钮 |
|
Finish |
最后的数据采集步骤，它只呈现【完成】和【上一步】两个按钮 |
|
Start |
第一步，只呈现一个【下一步】按钮 |
|
Step |
Start、Finish和Complete之外的任何步骤，它呈现【上一步】和【下一步】按钮 |
StepType的默认值是Auto，此时导航界面由WizardStep集合中步骤的顺序决定。第一步只有一个【Next】按钮，最后一步只有一个【Previous】按钮，其他的StepType值是Auto的步骤包含【Previous】和【Next】两个按钮。
AllowReturn属性可以强制线性导航，当设置一个步骤的AllowReturn属性为False后，则只能导航到该步骤一次。如果DisplaySideBar属性为True（默认值），则显示侧栏。虽然AllowReturn属性设置为False的步骤仍然显示在导航链接中，但单击链接不会有任何反应。AllowReturn属性只禁止用户交互。即使该步骤的AllowReturn属性已经设置为False，程序代码也可以强制返回到一个步骤。
2．Wizard控件事件和方法
Wizard控件包含6个主要事件，具体信息如表7-8所示。
表7-8 Wizard事件信息
|
事 件 |
参 数 |
描 述 |
|---|---|---|
|
ActiveStepChanged |
EventArgs |
显示新步骤时触发 |
|
CancelButtonClick |
EventArgs |
单击【取消】按钮时触发 |
|
FinishButtonClick |
WizardNavigationEventArgs |
单击【完成】按钮时触发 |
|
NextButtonClick |
WizardNavigationEventArgs |
单击【下一步】按钮时触发 |
|
PreviousButtonClick |
WizardNavigationEventArgs |
单击【上一步】按钮时触发 |
|
SideBarButtonClick |
WizardNavigationEventArgs |
当单击侧栏区域中的按钮时触发 |
其中的ActiveStepChanged事件，在当前步骤改变时触发，而另外5个事件都由单击按钮触发。除CancelButtonClick事件外，其他的按钮单击事件都有WizardNavigationEventArgs类型参数，此参数公开了如下3个属性。
- Cancel：Boolean类型值。如果取消链接到下一步，则该值为True。默认值为False。
- CurrentStepIndex：以0开始的WizardSteps集合中当前步骤的索引值。
- NextStepIndex：以0开始的将要显示的步骤的索引值。例如，如果单击了【Previous】按钮，则NextStepIndex的值比CurrentStepIndex值小1。
Wizard控件包含3个方法，具体说明如表7-9所示。
表7-9 Wizard方法信息
|
方 法 |
类 型 |
描 述 |
|---|---|---|
|
GetHistory |
ICollection |
返回一个按被访问的顺序排列的WizardStepBase 对象的集合，索引0 为最近访问的步骤 |
|
GetStepType |
WizardStepType |
步骤的类型，具体信息见表7-3 |
|
MoveTo |
Void |
移动到参数中指定的WizardStep对象 |
7.3.13 AdRotator控件
AdRotator控件是广告轮显组件，能够从列表中随机显示一个广告图片。这个列表可以存储在单独的XML文件或数据绑定的数据源中。列表包含图片的属性、路径及单击图片时链接到的URL，图片将在每次页面加载时更改。
显示的广告信息通常是如下来源。
- XML文件：可以将广告信息存储在XML文件中，其中包含对广告条及其关联属性的引用。
- 任何数据源控件：如SqlDataSource或ObjectDataSource控件。例如，可以将广告信息存储在数据库中，接着可以使用 SqlDataSource 控件检索广告信息，然后将AdRotator控件绑定到数据源控件。
- 自定义逻辑：可以为AdCreated事件创建一个处理程序，并在该事件中选择一条广告。
1．AdRotator控件属性
AdRotator控件也从WebControl继承属性，另外还包含了其他的属性和事件，其中常用的属性如表7-10所示。
表7-10 AdRotator控件常用属性
|
属 性 |
类 型 |
描 述 |
|---|---|---|
|
AdvertisementFile |
String |
包含广告及广告属性列表的XML路径 |
|
AlternateTextField |
String |
广告文件或数据字段的元素名称，在其中储存了替换文本。默认值是AlternateText |
|
DataMember |
String |
控件将绑定到的数据列表的名称 |
|
DataSource |
Object |
控件将要从中获取数据的对象 |
|
DataSourceID |
String |
控件将要从中获取数据的控件的ID |
|
ImageUrlField |
String |
广告文件或数据字段的元素名称，其中储存了图片的URL。默认值为ImageUrl |
|
KeywordFilter |
String |
从广告文件中筛选广告的类别关键字 |
|
NavigateUrlField |
String |
广告文件或数据字段的元素名称，在其中储存了要导航到的URL。默认值为NavigateUrl |
|
Target |
String |
单击AdRotator控件时用于显示目录页面内容的浏览器窗口或框架 |
其中，Target属性用于设置由哪个浏览器窗口或框架显示单击AdRotator控件后的结果页面。它指定是否用结果页面替换当前浏览器窗口或框架中显示的当前内容，或是打开一个新浏览器窗口，或是其他的操作。Target属性的值必须是小写的a～z中的字符开头，区分大小写。但Target属性中有一些特殊值，它们以下画线开头，并与HyperLink控件的Target属性值相同。具体信息如表7-11所示。
表7-11 Target属性的特殊值
|
值 |
描 述 |
|---|---|
|
_blank |
在除框架之外未命名的新窗口中呈现内容 |
|
_new |
未文档化，单击时的行为与_blank相同，但是后续的单击将在同一个窗口呈现，而不用打开一个新窗口 |
|
_parent |
在链接所在窗口或框架的父窗口或框架呈现内容。如果子容器是一个窗口或顶级的框架，则与_self相同 |
|
_self |
默认的行为，在当前焦点所在的窗口或框架呈现内容 |
|
_top |
在当前无框架的整个窗口中呈现内容 |
2．AdRotator控件事件
AdRotator控件常用的事件如表7-12所示。
表7-12 AdRotator控件常用事件
|
事 件 |
描 述 |
|---|---|
|
AdCreated |
每次显示广告时发生 |
|
DataBinding |
当服务器控件绑定到数据源时发生 |
|
Disposed |
当从内存释放服务器控件时发生。这是请求ASP.NET页时服务器控件生存期的最后阶段 |
|
Init |
当服务器控件初始化时发生。初始化是控件生存期的第一步 |
|
Load |
当服务器控件加载到Page对象中时发生 |
|
PreRender |
在加载Control对象之后、呈现之前发生 |
|
Unload |
当服务器控件从内存中卸载时发生 |
3．广告文件Advertisement File
除了AdRotator控件的属性和事件外，还必须使用广告文件才能实现广告轮显效果。广告文件是一个XML文件，它包含AdRotator控件，以显示广告的相关信息。该文件的位置和文件名由控件的AdvertisementFile属性指定。
广告文件的位置可以是相对于网站的根目录，也可以是绝对路径，但是最好把该文件存放在Web根目录下。AdvertisementFile属性不能和DataSource、DataMember或DataSourceID属性同时设置，即如果数据来源于一个广告文件，它就不能同时来源于数据源，反之亦然。
广告文件和AdvertisementFile属性是可选的。如果不使用广告文件，而是要以编程方式创建一个广告，则需要在AdCreated的事件中输入代码，以显示希望的元素。
因为是一个XML文件，所以广告文件是一个使用已定义好的，使用标签描述数据的结构化文本文件。在表7-13中列出了标准标记，它们都包含在尖括号“< >”中，并需要一个匹配的关闭标签。
表7-13 广告文件中使用的XML标记
|
标 记 |
描 述 |
|---|---|
|
Advertisements |
包含整个广告文件 |
|
Ad |
描述每一个单独的广告 |
|
ImageUrl |
要显示的图像的URL，是必需的 |
|
NavigateUrl |
单击该控件时定位到的URL |
|
AlternateText |
图像不可用时要显示的文本。在某些浏览器中，该文本显示为工具提示 |
|
Keyword |
广告类别。该关键字可用于通过设置KeywordFilter属性过滤要显示的广告 |
|
Impressions |
一个具体值，设置相对于其他广告出现的频率 |
实例028 用AdRotator控件轮显广告
源码路径 光盘\daima\7\AdRotator\ 视频路径 光盘\视频\实例\第7章\028
本实例包含的实现文件如下。
- 文件Default.aspx：主页文件，调用广告控件。
- 文件ads.XML：广告文件，设置AdRotator控件，以显示广告的相关信息。
- 素材图片：广告的显示图片，分别是1.jpg、2.jpg、3.jpg。
文件Default.aspx的功能是调用广告设置文件“ads.xml”，其主要实现代码如下。
<asp:AdRotator ID="AdRotator1" AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/>
文件ads.XML是广告文件，设置了AdRotator控件，以显示广告的图片信息、显示频率、链接地址等信息。该文件的主要实现代码如下。
<Advertisements>
<Ad>
<ImageUrl>1.jpg</ImageUrl>
<NavigateUrl>http://www.sohu.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>20</Impressions>
</Ad>
<Ad>
<ImageUrl>2.jpg</ImageUrl>
<NavigateUrl>http://www.sina.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>30</Impressions>
</Ad>
<Ad>
<ImageUrl>3.jpg</ImageUrl>
<NavigateUrl>http://www.163.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Computers</Keyword>
<Impressions>50</Impressions>
</Ad>
</Advertisements>
范例055：使用sitemap和Menu制作导航栏
源码路径：光盘\演练范例\055视频路径：光盘\演练范例\055范例056：使用TreeView制作OA导航栏
源码路径：光盘\演练范例\056视频路径：光盘\演练范例\056\上述代码执行后将按指定样式显示广告图片，如图7-38所示；如果刷新页面，则会按设置的频率来轮显指定的广告图片，如图7-39所示；单击一个广告图片后，会来到指定的链接页面。
图7-38 显示广告图片
图7-39 轮显广告图片
7.3.14 Calendar控件
Calendar控件是一个时间控件，能够帮助用户设置和选择时间。该控件的主要功能如下。
- 显示一个日历，此日历会显示一个月份。
- 允许用户选择日期、周、月。
- 允许用户选择一定范围内的日期。
- 允许用户移到下一月或上一月。
- 以编程方式控件选定日期的显示。
Calendar控件的语法格式如下。
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
例如下面的一段代码：
<body>
<form id="form1" runat="server">
<div>
<h1>使用Calendar</h1>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>
</form>
</body>
在上述代码中，使用了一个简单的Calendar控件。此段代码执行后将显示一个日历，如图7-40所示。
图7-40 显示一个日历
1．Calendar控件属性
Calendar控件通过本身的属性和事件来实现“日历”功能，其主要属性的具体信息如表7-14所示。
表7-14 Calendar控件属性
|
属 性 |
类 型 |
值 |
描 述 |
|---|---|---|---|
|
Caption |
String |
|
显示在日历上方的文本 |
|
CaptionAlign |
TableCaption-Align |
Bottom、Left、NotSet、Right、Top |
指定标题的垂直和水平对齐方式 |
|
CellPadding |
Integer |
0、1、2等 |
边框和单元格之间以像素为单位的间距，应用到日中所有单元格和单元格的每个边。默认值为2 |
|
CellSpacing |
Integer |
0、1、2等 |
单元格间以像素为单位的间距，应用到日历中的所有单元格。默认值为0 |
|
DayNameFormat |
DayName- Format |
Full、Short、FirstLetter、FirstTwoLetters |
一周中每一天的格式。它的值不言自明，除了Short，它用前3个字母表示。默认值为Short |
|
FirstDayOfWeek |
FirstDayOf Week |
Default，Sunday，Monday，...，Saturday |
在第一列显示的一周的某一天，默认值由系统指定 |
|
NextMonthText |
String |
|
下一月份的导航按钮的文本。默认为>，它显示为一个大于号(>)。只有ShowNextPrevMonth属性设置为True时显示 |
|
NextPrevFormat |
NextPrev- Format |
CustomText、FullMonth、ShortMonth |
使用CustomText设置该属性，并在NextMont- hText和PrevMonth Text中指定使用的文本 |
|
PrevMonthText |
String |
|
上一月份的导航按钮的文本。默认为<，它显示为一个小于号(<)。只有ShowNextPrevMonth属性设置True时显示 |
|
SelectedDate |
DateTime |
|
一个选定的日期。只保有日期，时间为空 |
|
SelectedDate |
DateTime |
|
选择多个日期后的DateTime对象的集合。只保存日期，时间为空 |
|
SelectionMode |
Calendar- SelectionMode |
|
详见本节后面的内容 |
|
SelectMonthText |
String |
|
设置显示月份中选择元素的显示文本。默认为>>，它显示为两个大于号(>>)。只在SelectionMode属性设置为DayWeekMonth时可见 |
|
ShowDayHeader |
Boolean |
True、False |
是否在月历标题中显示一周中每一天的名称默认值为True |
|
ShowGridLines |
Boolean |
True、False |
如果值为True，显示单元格之间的网格线。默认值为False |
|
ShowNextPrev Month |
Boolean |
True、False |
指定是否显示上个月和下个月导航元素。默认值为True |
|
ShowTitle |
Boolean |
True、False |
指定是否显示标题。如果值为False，则上个月和下个月导航元素将被隐藏。默认值为True |
|
TitleFormat |
TitleFormat |
Month、MonthYear |
指定标题是显示为月份，还是同时显示月份和年份。默认值为MonthYear |
|
TodaysDate |
DateTime |
|
今天的日期 |
|
UseAccessible- Header |
Boolean |
True、False |
指示是否使用可通过辅助技术访问的标题 |
|
VisibleDate |
DateTime |
|
显示月份的任意日期 |
2．选择一个日期
Calendar控件不但能够显示一个日历，而且用户还可以在日历上选择一个日期。如果允许用户选择日历上的一天、一周或一个月，则需要设置SelectionMode属性。表7-15中列出了SelectionMode属性的可用枚举值信息。
表7-15 SelectionMode枚举值
|
值 |
描 述 |
|---|---|
|
Day |
允许用户选择单个日期，是默认值 |
|
DayWeek |
允许用户选择单个日期或整周 |
|
DayWeekMonth |
允许用户选择单个日期、周或整个月 |
|
None |
未能选择日期 |
3．设置Calendar控件样式
通过TableItemStyle类型的属性可以设置日历中每个部分的样式。上述可用的TableItemStyle类型属性的具体信息如表7-16所示。
表7-16 Calendar控件中TableItemStyle类型的属性
|
属 性 |
被设置样式的对象 |
|---|---|
|
DayHeaderStyle |
一周中某天 |
|
DayStyle |
日期 |
|
NextPrevStyle |
月份导航控件 |
|
OtherMonthDayStyle |
不在当前显示月份中的日期 |
|
SelectedDayStyle |
选中日期 |
|
SelectorStyle |
周和月选择器列 |
|
TitleStyle |
标题栏 |
|
TodayDayStyle |
今天的日期 |
|
WeekendDayStyle |
周末日期 |
表7-16中的属性都可以在Visual Studio 2010的属性中找到，其设置方法和Wizard控件的类似。另外，Visual Studio2010也为Calendar控件提供了“自动套用格式”。在Visual Studio 2010设计界面中单击Calendar右上角的三角按钮，在弹出的命令列表中选择“自动套用格式”命令，即可在弹出的“自动套用格式”对话框中选择需要的格式，如图7-41所示。
图7-41 “自动套用格式”对话框
4．Calendar控件的事件
Calendar控件的常用事件如表7-17所示。
表7-17 Calendar控件的常用事件
|
事 件 |
描 述 |
|---|---|
|
DataBinding |
当服务器控件绑定到数据源时发生 |
|
Disposed |
当从内存释放服务器控件时发生。这是请求ASP.NET页时服务器控件生存期的最后阶段 |
|
Init |
当服务器控件初始化时发生。初始化是控件生存期的第一步 |
|
Load |
当服务器控件加载到Page对象中时发生 |
|
PreRender |
在加载Control对象之后、呈现之前发生 |
|
SelectionChanged |
每次用户在Calendar控件中选择一天、一周或一月时发生 |
|
Unload |
当服务器控件从内存中卸载时发生 |
7.3.15 HiddenField控件
HiddenField控件是从ASP.NET 2.0开始有的控件。顾名思义，HiddenField控件就是隐藏输入框的服务器控件，它可以保存那些不需要显示在页面上且对安全性要求不高的数据。HiddenField控件的功能和HTML中的<input type = hidden />类似，其语法格式如下。
<asp:HiddenField
EnableTheming="True|False"
EnableViewState="True|False"
ID="string"
OnDataBinding="DataBinding event handler"
OnDisposed="Disposed event handler"
OnInit="Init event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnUnload="Unload event handler"
OnValueChanged="ValueChanged event handler"
runat="server"
SkinID="string"
Value="string"
Visible="True|False"
/>
在上述语法格式中，列出了HiddenField控件可以使用的属性和事件。例如，可以在HiddenField控件中存储用户首选项设置。若要将信息存入HiddenField控件，需在两次回发之间将其Value属性设置为要存储的值。与任何其他Web服务器控件一样，HiddenField控件中的信息在回发期间可用。这些信息在该页之外无法保留。
实例029 计算用户单击Button的次数
源码路径 光盘\daima\7\HiddenField.aspx 视频路径 光盘\视频\实例\第7章\029
本实例使用HiddenField控件的事件实现，实例文件为HiddenField.aspx，具体实现代码如下。
<script language="C#|" runat="server">
void Button1_Click(object sender, EventArgs e) //定义单击按钮事件
{
if (HiddenField1.Value == String.Empty) //获取隐藏的值
HiddenField1.Value = "0";
HiddenField1.Value = (Convert.ToInt32(HiddenField1.Value)＋1).ToString();
Label1.Text = HiddenField1.Value;
}
</script>
……
<h3><font face="Verdana">使用HiddenField</font></h3>
<form runat=server>
<asp:HiddenField id=HiddenField1 runat=Server />
<asp:Button id=Button1 Text="单击按钮"
onclick="Button1_Click"
runat="server"
/>
你已经单击了 <asp:Label id=Label1 Text="0" runat=server /> 次
</form>
范例057：使用Login控件
源码路径：光盘\演练范例\057视频路径：光盘\演练范例\057范例058：创建用户并登录
源码路径：光盘\演练范例\058视频路径：光盘\演练范例\058\上述代码执行后，如果用户单击【单击按钮】按钮，则会将单击次数存储在HiddenField中。然后通过Label调用存储的次数来显示单击次数，具体效果如图7-42所示。
图7-42 输出存储的单击次数
7.3.16 FileUpload控件
FileUpload控件用于用户向Web应用程序上传文件。文件上传后，可以把文件保存在任意地方，如保存在指定的文件系统或者数据库中。FileUpload控件执行后，将被解析为<input type = "file">。其常用属性如下。
- Enable：禁止使用FileUpload控件。
- FileBytes：以字节数组形式获取上传文件内容，获取方式对速度影响很大。
- FileContent：以数据流的形式获取上传文件的内容。
- FileName：用于获得上传文件的名字。
- HasFile：有上传文件时返回Ture。
- PostedFile：获取包装成HttpPostedFile对象的上传文件。
FileUpload支持如下两个方法。
- Foucs：把窗体的焦点转移到FileUpload控件。
- SaveAs：把上传文件保存到文件系统。
实例030 上传文件并输出上传文件的名称和大小
源码路径 光盘\daima\7\4\ 视频路径 光盘\视频\实例\第7章\030
本实例的功能是，通过FileUpload控件实现指定文件上传，并输出上传文件的名称和大小。本实例的具体实现文件如下。
- 文件Default.aspx：显示文件上传表单。
- 文件Default.aspx.cs：实现文件上传处理。
上述文件的具体运行流程如图7-43所示。
图7-43 实例运行流程图
其中，文件Default.aspx的功能是提供文件上传表单，主要实现代码如下。
<form id="form1" runat="server">
<div>
nbsp;FileUpload控件：
<asp:FileUpload ID="FileUpload1"
runat="server"
/>
<asp:Button ID="Button2"
runat="server" OnClick="Button2_Click"
Text="上传文件" />
<br />
文件名称：<asp:Label ID="Label2" runat="server" Text="未上传！"></asp:Label><br />
文件大小：<asp:Label ID="Label3" runat="server" Text="未上传！"></asp:Label><br />
<br />
</div>
</form>
范例059：在数据绑定控件中动态显示图片
源码路径：光盘\演练范例\059视频路径：光盘\演练范例\059范例060：头像选择窗口
源码路径：光盘\演练范例\060视频路径：光盘\演练范例\060\文件Default.aspx.cs的功能是获取表单内的上传文件名，实现文件上传处理，并输出对应的文件名和大小。该文件的主要实现代码如下。
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e)
{
//获取文件路径
string filepath=FileUpload1.PostedFile.FileName.ToString();
//以"\"为索引截取获得文件名
string filename = filepath.Substring(filepath.LastIndexOf("\\")＋1);
//获取文件大小
string filesize = FileUpload1.PostedFile.ContentLength.ToString();
//保存上传的文件
FileUpload1.PostedFile.SaveAs(Server.MapPath(".") ＋ "\\" ＋ filename);
//将文件名和文件大小显示在窗体上
Label2.Text = filename;
Label3.Text = filesize＋"K";
}本实例执行后，首先按照指定样式显示上传表单界面，如图7-44所示；选择上传文件并单击【上传文件】按钮后，会将其上传到指定目录下，并输出文件的名称和大小，如图7-45所示。
图7-44 上传表单界面
图7-45 上传表单界面
7.3.17 ImageMap控件
通过ImageMap控件，可以在指定的图片上定义热点（HotSpot）区域。用户可以通过单击这些热点区域进行回发（PostBack）操作或者定向（Navigate）到某个URL地址。ImageMap一般用于需要对某张图片的局部范围进行互动操作时，通过本身的属性和事件来实现功能。
ImageMap控件的属性信息如表7-18所示。
表7-18 ImageMap控件属性信息
|
属 性 |
类 型 |
值 |
描 述 |
|---|---|---|---|
|
AlternateText |
String |
|
该文本在图片无效时显示。在运行信息提示的浏览器中，该属性还会显示为信息提示 |
|
GenerateEmptyAlternateText |
Boolean |
True False |
如果值为True，那么即使AlternateText属性设置为空或没有设置，也要强制在呈现的HTML中生成空的Alt属性。默认值为False。提供该属性是为了支持页面兼容辅助技术驱动，如屏幕阅读器 |
|
HotSpotMode |
HotSpotMode |
Inactive Navigate NotSet PostBack |
指定默认的热点模式，可单击热点时的动作，不同的热点可以指定不同的模式。Navigate模式将立即链接到由NavigateUrl属性指定的URL。PostBack模式会引起回发到服务器 |
|
HostSpots |
HotSpotCollection |
|
ImageMap控件包含HotSpot对象的集合 |
ImageMap控件的事件信息如表7-19所示。
表7-19 ImageMap控件事件信息
|
事 件 |
描 述 |
|---|---|
|
Click |
单击ImageMap控件的HotSpot对象时发生 |
|
DataBinding |
当服务器控件绑定到数据源时发生，继承自Control |
|
Disposed |
当从内存释放服务器控件时发生，这是请求ASP.NET页时服务器控件生存期的最后阶段 |
|
Init |
当服务器控件初始化时发生。初始化是控件生存期的第一步，继承自Control |
|
Load |
当服务器控件加载到Page对象中时发生，继承自Control |
|
PreRender |
在加载Control对象之后、呈现之前发生，继承自Control |
|
Unload |
当服务器控件从内存中卸载时发生，继承自Control |
实例031 根据用户单击图片的位置输出对应的提示
源码路径 光盘\daima\7\4\ 视频路径 光盘\视频\实例\第7章\031
本实例的实现文件为ImageMap.aspx，主要实现代码如下。
<script runat="server">
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
String region = "";
switch(e.PostBackValue) //根据获取的热点位置输出对应的位置提示
{
case "NW":
region = "左上";
break;
case "NE":
region = "右上";
break;
case "SE":
region = "右下";
break;
case "SW":
region = "左下";
break;
}
Label1.Text = "你单击了图片的 " ＋ region ＋ "方！！！";
}
</script>
……
<asp:Label runat="server" ID="Label1" />
<br />
<br />
<asp:ImageMap ID="ImageMap1" ImageUrl="123.jpg"
runat="server"
HotSpotMode="PostBack"
OnClick="ImageMap1_Click">
<asp:RectangleHotSpot Bottom="110" Right="100"
HotSpotMode="PostBack" PostBackValue="NW" />
<asp:RectangleHotSpot Bottom="110" Left="100" Right="200"
HotSpotMode="PostBack" PostBackValue="NE" />
<asp:RectangleHotSpot Bottom="220" Right="100" Top="100"
PostBackValue="SW" />
<asp:RectangleHotSpot Bottom="200" Left="100" Right="200"
Top="100" PostBackValue="SE" />
</asp:ImageMap>
范例061：图片的上传和下载
源码路径：光盘\演练范例\061视频路径：光盘\演练范例\061范例062：制作网上商城注册页面
源码路径：光盘\演练范例\062视频路径：光盘\演练范例\062\上述代码执行后，将默认输出单击指定图片右上方热点的提示，如图7-46所示；当单击图片的其他热点时会输出对应的提示，如图7-47所示。
图7-46 默认右上方
图7-47 单击左上方