5.1 列表服务器控件
在网站中以列表的方式显示数据是最为常见一种功能。在ASP.NET 4.5中提供了多个功能强大的列表服务器控件,它们有ListBox控件、DropDownList控件和BulletedList控件。
5.1.1 ListBox控件
ListBox控件表示在一个滚动窗口中垂直显示一系列项目列表。ListBox运行用户选择单项或多项,并通过常见的Items集合提供它的内容,它支持数据绑定。该控件添加到页面后,设置列表项的方法与RadioButtonList控件相同。ListBox控件定义的格式如下所示:
或
ListBox控件除了基本属性之外,还有以下几个重要的属性和事件。
● AutoPostBack:获取或设置一个值,该值指示当用户更改列表中的选定内容时是否自动产生向服务器的回发。
● DataSource:获取或设置对象,数据绑定控件从该对象中检索其数据项列表。
● DataTextField:获取或设置为列表项提供文本内容的数据源字段。
● DataValueField:获取或设置为各列表项提供值的数据源字段。
● Items:获取列表控件项的集合,每一个项的类型都是ListItem。
● Rows:获取或设置ListBox控件中显示的行数。
● SelectedIndex:获取或设置列表中选定项的最低序号索引。
● SelectedItem:获取列表控件中索引最小的选定项。
● SelectedValue:获取列表控件中选定项的值,或选择列表控件中包含指定值的项。
● SelectionMode:使用SelectionMode属性指定ListBox控件的模式行为。
● Count:表示列表项中条目的总数。
● Selected:表示某个项被选中。
● ClearSelected:取消选择是ListBox中的所有项。
● GetSelected:返回一个值,该值指示是否选定了指定的项。
● Sort:对ListBox中的项进行排序。
ListBox控件的两个属性使ListBox控件略微不同于其他列表控件:Rows属性和SelectionMode属性。Rows属性用来获取或设置ListBox控件中所显示的行数。SelectionMode属性用来控制是否支持多行选择,当此属性设置为Single时,表示是单选;当属性设置为Multiple时,表示是多选。如果将ListBox控件设置为多选,则用户可以在按住Ctrl或Shift键的同时,单击以选择多个选项。
【实例5-1】ListBox控件的使用
本例实现数据项在ListBox控件之间移动,用户先选择“候选国家”列表框中自己喜欢的国家,再单击“添加”按钮,“候选国家”列表框中被选中的国家将移动到“你喜欢的国家”列表框中,支持单选或多选,具体实现步骤如下所示:
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例5-1”。
02 在“实例5-1”中创建一个名为Default.aspx的窗体。
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,进入“源视图”,在编辑区中<form></form>标记之间编写如下代码。
上面的代码中第2行~第10行添加一个服务器列表框控件lbxSource,设置选择项时可以进行多项选择。其中,第3行~第9行分别添加了7个列表项并设置显示的文本和Value值。第11行添加一个服务器按钮控件btnSelect并设置其单击事件Click、显示的文本和位置。第12行添加另一个服务器列表框控件lbxDest并设置选择项时可以进行多项选择。
04 单击网站目录下的Default.aspx.cs文件,编写代码如下:
上面的代码中第1行处理加入按钮btnSelect的单击事件Click。第2行获取“候选国家”列表的选项数。第4行~第10行使用for循环判断各个项的选中状态,如果选项为选中状态则添加到“你喜欢的国家”列表中。
05 按快捷键Ctrl+F5运行程序,效果如图5-1所示。选择候选国家后,单击“加入”按钮,效果如图5-2所示。
图5-1 运行结果1
图5-2 运行结果2
5.1.2 DropDownList控件
DropDownList控件在Web页面上呈现为下拉列表框,它允许用户从预定义的多个选项中选择一项。在选择前,用户只能看到第一个选项,其余的选项都“隐藏”起来。通过设置该控件的高度和宽度(以像素为单位),可以设定控件的大小,但是不能控制该列表拉下时显示的项目数。与ListBox类似,DropDownList控件可以实现从预定义的多个选项中进行选择的功能。区别在ListBox在用户选择操作前.可以看到所有的选项,并可以实现多项选择。
DropDownList控件定义格式的代码如下:
或
DropDownList控件除了基本属性之外,还有以下几个重要的属性和事件。
● AutoPostBack:获取或设置一个值,该值指示当用户更改列表中的选定内容时是否自动产生向服务器的回发。
● DataSource:获取或设置对象,数据绑定控件从该对象中检索其数据项列表。
● DataTextField:获取或设置为列表项提供文本内容的数据源字段。
● DataValueField:获取或设置为各列表项提供值的数据源字段。
● Items:获取列表控件项的集合,每一个项的类型都是ListItem。在“属性”窗口中单击该属性的按钮,可以打开“ListItem集合编辑器”对话框来设置列表项。
● SelectedIndex:返回被选取到的ListItem的索引项。
● SelectedItem:获取列表控件中索引最小的选定项。
● SelectedValue:获得列表框中被选中的值。
DropDownList控件的编程接口还有三个用来配置下拉列表边框的属性BorderColor、BordStyle和Borderwidth。虽然这些属性被样式属性正确转换了,但是大多数浏览器不会用它们来改变下拉列表的外观。
DropDownList控件的Items集合的成员和列表中的每一项对应,要确定选中了哪项,应测试每项的Selected属性。或者访问SelectedItem属性获取被选项,访问SelectedValue属性获得列表中被选项的值。当列表控件的选项改变时会触发SelectedIndexChanged事件,如果DropDownList控件的AutoPostBack属性为True,将导致页面即时回传,从而立刻执行此事件代码。
【实例5-2】DropDownList控件的使用
大多数网站在用户的登录密码遗忘时,都会有一个找回密码的功能,但是需要用户输入密码提示,密码提示是用户在注册网站用户时留下的,本例就通过DropDownList控件实现注册时的密码提示问题确定。具体实现的步骤如下所示:
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例5-2”。
02 在“实例5-2”中创建一个名为Default.aspx的窗体。
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,进入“源视图”,在编辑区中的<form></form>标记之间编写如下代码:
上面的代码中第2行添加一个服务器标签控件Label1并设置显示的文本。第3行~第8行添加了一个服务器下拉列表控件DropDownList1,并设置自动回传服务器属性,同时定义一个SelectedIndexChanged事件,其中,第4行~第7行添加了下列列表框的4个选项,并设置Value值和要显示的选项文本。第9行添加一个服务器标签控件Label2。第10行添加一个服务器文本框控件TextBox1,并设置其长度。
04 单击网站目录下的Default.aspx.cs文件,编写代码如下。
上面的代码中第1行定义处理下拉列表控件DropDownList1选项,更改事件SelectedIndexChanged的方法。第2行~第8行使用switch-case语句判断用户在下拉列表中的选项,根据DropDownList1的Value的值,在Label1控件上显示相应的密码问题。
05 按快捷键Ctrl+F5运行程序,效果如图5-3所示。选择下拉列表中某个选项,Label2上如图5-4所示显示相应的文本,然后用户可以在文本框中输入密码问题的答案。
图5-3 运行结果1
图5-4 运行结果2
5.1.3 BulletedList控件
BulletedList控件用于创建一个无序或有序(编号的)项列表,它们呈现为HTML的<ul>或<ol>元素。可以指定项、项目符号或编号的外观;静态定义列表项或通过将控件绑定到数据来定义列表项;也可以在用户单击项时做出响应。
BulletedList控件定义的格式代码如下所示:
或
BulletedList控件除了基本属性之外,还有以下几个重要的属性和事件。
● DataSource:获取或设置对象,数据绑定控件从该对象中检索其数据项列表。
● DataTextField:获取或设置为列表项提供文本内容的数据源字段。
● DataValueField:获取或设置为各列表项提供值的数据源字段。
● Items:返回BulletedList控件中的ListItem参数,每一个项的类型都是ListItem。在“属性”窗口中单击该属性的按钮,可以打开“ListItem集合编辑器”对话框来设置列表项。
● BulletStyle:获取或设置BulletedList控件的项目符号样式。
● DisplayMode:获取或设置BulletedList控件中列表内容的显示模式。该属性有三个取值,Text,显示为文本;HypeLink,显示为超链接;LinkButton,显示为链接按钮。
● Click事件:当单击BulletedList控件中的链接按钮时发生。
● SelectedIndexChanged事件:当列表控件的选定项在信息发往服务器之间变化时发生。
上面的属性中BulletStyle可以在BulletedList控件中显示的项目符号样式有以下多种。
● NotSet:未设置符号样式。
● Numbered:数字符号样式。
● LowerAlpha:小写字母符号样式。
● UpperAlpha:大写字母符号样式。
● LowerRoman:小写罗马数字符号样式。
● UpperRoman:大写罗马数字符号样式。
● Disc:实心圆符号样式。
● Circle:圆圈符号样式。
● Square:实心正方形符号样式。
● CustomImage:自定义图象符号样式。
BulletedList控件的项目支持各种图形样式:圆盘形、圆形和定制图形,还有包括罗马编号(roman numbering)在内的几种编号。初始编号可以通过FirstBulletNumber属性以编程的方式进行设计。DisplayMode属性确定如何显示每个项目符号的内容,纯文本(默认)、链接按钮或超链接。如果显示链接按钮,则在该页回发时,在服务器上激发Click事件以允许处理该事件。如果显示超链接,则浏览器将在指定方框内显示目标页——Target属性。目标URL与DataValueField指定的字段内容一致。
本例使用BulletedList项目列表控件显示选项节目的列表。用户可以从列表中选中自己最喜欢的选秀节目,程序将用户的选择显示在列表下。
【实例5-3】BulletedList控件的使用
01 启动Visual Studio 2012,创建一个ASP.NET Web空应用程序,命名为“实例5-3”。
02 在“实例5-3”中创建一个名为Default.aspx的窗体。
03 单击网站的目录下的Default.aspx文件,进入“视图编辑”界面,打开“设计视图”,进入“源视图”,在编辑区中<form></form>标记之间编写如下代码。
代码中第2行添加一个项目列表控件BulletedList1,设置类别项目符号样式为数字;设置项目列表项格式为链接按钮;设置处理BulletedList1控件的单击事件为Click。第3行~第7行添加5个列表项和显示的文本。第9行添加一个服务器标签控件Label1并设置Visible属性为不可见。
04 单击网站目录下的Default.aspx.cs文件,编写代码如下:
上面的代码中第1行定义处理项目列表控件BulletedList1的单击事件Click的方法。第2行将标签控件的Visible属性设置为可见。第3行~第15行,使用switch…case语句判断事件源对象e的Index属性(即用户在项目列表中实际选定项的索引值),根据不同的索引值0~4,分别在Label1上显示用户选择的列表项内容。比如选择的列表项索引是0,就将列表项内容“百度”显示在页面的标签控件上,其余类同。
05 按快捷键Ctrl+F5运行程序,效果如图5-5所示。用户选择项目列表中的某个项,在下面显示项的内容。
图5-5 运行结果
共有条评论 网友评论