- ASP.NET从入门到精通(第5版)
- 明日科技
- 3682字
- 2025-02-25 17:24:13
3.3 选择类型控件

视频讲解
3.3.1 ListBox控件
1. ListBox控件概述
ListBox控件用于显示一组列表项,用户可以从中选择一项或多项。如果列表项的总数超出可以显示的项数,则ListBox控件会自动添加滚动条。如图3.21所示为ListBox控件。

图3.21 ListBox控件
1)ListBox控件的常用属性
ListBox控件的常用属性及说明如表3.14所示。
表3.14 ListBox控件的常用属性及说明

下面主要介绍ListBox控件的Items属性、SelectionMode属性和DataSource属性。
(1)Items属性
Items属性主要用来获取列表控件的集合,使用Items属性为ListBox控件添加列表项的方法有两种,下面分别进行介绍。
- ☑ 通过属性面板为ListBox控件添加列表项
首先,打开属性面板,单击Items属性后面的按钮,会弹出一个如图3.22所示的“ListItem集合编辑器”对话框。

图3.22 “ListItem集合编辑器”对话框
在“ListItem集合编辑器”对话框中,用户可以通过单击“添加”按钮,为ListBox控件添加列表项,可以选中该列表项,在“属性”窗口面板中修改其属性值。当为ListBox控件添加完列表项后,还可以选中列表项,单击↑和↓按钮更改列表项的位置,单击“移除”按钮可以从列表项中将该项删除,如图3.23所示。

图3.23 添加列表项
最后,单击“确定”按钮,返回到页面中,在ListBox控件中将呈现已添加的列表项。
- ☑ 使用Items.Add方法为ListBox控件添加列表项
在后台代码中,可以编写如下代码,使用Items.Add方法为ListBox控件添加列表:

(2)SelectionMode属性
SelectionMode属性是ListBox列表控件的选择模式,该属性的设置选项有以下两种。
- ☑ 单选(Single):用户只能在列表框中选中一项。
- ☑ 多选(MultiLine):用户可以在列表框中选中多项。
(3)DataSource属性
通过使用DataSource属性可以从数组或集合中获取列表项并将其添加到控件中。当编程人员希望从数组或集合中填充控件时,可以使用此属性。例如,在后台,编写如下代码,将数组绑定到ListBox控件中:

注意
在使用ArrayList类数组之前,需要引用ArrayList类的命名空间,其引用代码为using System.Collections。
2)ListBox控件常用的方法
ListBox控件常用的方法是DataBind。当ListBox控件使用DataSource属性附加数据源时,使用DataBind方法将数据源绑定到ListBox控件上。
2. ListBox控件选项的多选和单选操作
【例3.9】ListBox控件选项的多选和单选操作。(示例位置:mr\TM\03\09)
下面的示例实现的主要功能是对ListBox控件中的列表项进行多选和单选操作。执行程序,示例运行结果如图3.24所示,在源列表框中选择部分选项,单击“<”按钮后,将把源列表框中选择的项移到目的列表框中,运行结果如图3.25所示。

图3.24 ListBox控件(选择前)

图3.25 ListBox控件(选择后)
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加2个ListBox控件和4个Button按钮,其属性设置及其用途如表3.15所示。
表3.15 Default.aspx页面中控件的属性设置及用途

如果需要将源列表框中的选项全部移到目的列表框中,可以单击“<<”按钮。“<<”按钮的Click事件代码如下:

如果需要将源列表框中的部分选项移到目的列表框中,可以单击“<”按钮。“<”按钮的Click事件代码如下:

注意
(1)在列表框中,通过按Shift键或Ctrl键,可以进行多项选择。
(2)单击页面中的“<”按钮和“>”按钮,可以将选中的项目移动到指定的列表框中;单击页面中的“<<”按钮与“>>”按钮,所有项目都将移到指定的列表框中。
3. ListBox控件选项的上移和下移操作
【例3.10】ListBox控件选项的上移和下移操作。(示例位置:mr\TM\03\10)
下面的示例实现的主要功能是对ListBox控件中的列表选项进行上移和下移操作。执行程序,示例运行结果如图3.26所示,在列表框中选中“星期五”选项,单击“上移”按钮后,选中的选项将会向上移动,运行结果如图3.27所示。

图3.26 ListBox控件(上移前)

图3.27 ListBox控件(上移后)
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加1个ListBox控件和4个Button按钮,其属性设置及其用途如表3.16所示。
表3.16 Default.aspx页面中控件的属性设置及用途

如果需要将列表框中选中的项上移,可以单击“上移”按钮。“上移”按钮的Click事件代码如下:

如果需要将列表框中选中的选项向下移动,可以单击“下移”按钮。“下移”按钮的Click事件代码如下:

3.3.2 DropDownList控件
1. DropDownList控件概述
DropDownList控件与ListBox控件的使用方法类似,但DropDownList控件只允许用户每次从列表中选择一项,而且只在框中显示选定选项。如图3.28所示为DropDownList控件。
(1)DropDownList控件的常用属性
DropDownList控件的常用属性及说明如表3.17所示。

图3.28 DropDownList控件
表3.17 DropDownList控件的常用属性及说明

说明
DropDownList控件的属性大部分与ListBox控件相同,这里不再赘述,读者可参见ListBox控件中的属性。
(2)DropDownList控件常用方法
DropDownList控件常用的方法是DataBind。当DropDownList控件使用DataSource属性附加数据源时,可使用DataBind方法将数据源绑定到DropDownList控件上。
(3)DropDownList控件常用事件
DropDownList控件常用的事件是SelectedIndexChanged。当DropDownList控件中的选定选项发生改变时,将触发SelectedIndexChanged事件。
2. 将数组绑定到DropDownList控件中
【例3.11】将数组绑定到DropDownList控件中。(示例位置:mr\TM\03\11)
下面的示例实现的主要功能是使用DropDownList控件的DataBind方法,将ArrayList数组绑定到DropDownList控件中。执行程序,示例运行结果如图3.29所示。
程序实现的主要步骤如下。
(1)新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加一个DropDownList控件。
(2)将页面切换到后台代码区,在使用ArrayList类之前,需要引用ArrayList类的命名空间,其代码如下:

(3)在页面的Page_Load事件中编写如下代码,将ArrayList数组绑定到DropDownList控件中。

3. 动态改变DropDownList控件的背景色
【例3.12】动态改变DropDownList控件的背景色。(示例位置:mr\TM\03\12)
下面的示例实现的主要功能是:当DropDownList控件列表项改变时,其背景色也做相应的改变。执行程序,示例运行结果如图3.30所示。

图3.29 DropDownList控件(上移前)

图3.30 动态改变DropDownList控件的背景色
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加一个DropDownList控件,其属性设置如表3.18所示。
表3.18 DropDownList控件的属性设置

为了实现当选择的列表项发生改变时,DropDownList控件的背景色也做相应的改变,需要在DropDownList控件的SelectedIndexChanged事件下添加如下代码,在switch语句中改变DropDownList控件的背景色:

技巧
1. 获取DropDownList控件选项的索引号和标题的代码如下:

2. 向DropDownList控件的下拉列表框中添加列表项的代码如下:

3. 删除选择的DropDownList控件的列表项的代码如下:

4. 清除所有DropDownList控件的列表项的代码如下:

5. 获取DropDownList控件包含的列表项数的代码如下:

3.3.3 RadioButton控件
1. RadioButton控件概述
RadioButton控件是一种单选按钮控件,用户可以在页面中添加一组RadioButton控件,通过为所有的单选按钮分配相同的GroupName(组名),来强制执行从给出的所有选项集中仅选择一个选项。如图3.31所示为RadioButton控件。
(1)RadioButton控件的常用属性
RadioButton控件的常用属性及说明如表3.19所示。

图3.31 RadioButton控件
表3.19 RadioButton控件的常用属性及说明

下面介绍RadioButton控件的一些重要属性。
- ☑ Checked属性
如果RadioButton控件被选中,则RadioButton控件的Checked属性值为true,否则为false。
- ☑ GroupName属性
使用GroupName属性指定一组单选按钮,以创建一组互相排斥的控件。如果用户在页面中添加了一组RadioButton控件,可以将所有单选按钮的GroupName属性值设为同一个值,来强制执行在给出的所有选项集中仅有一个处于被选中状态。
- ☑ TextAlign属性
RadioButton控件可以通过Text属性指定要在控件中显示的文本。当RadioButton控件的TextAlign属性值为Left时,文本显示在单选按钮的左侧;当RadioButton控件的TextAlign属性值为Right时,文本显示在单选按钮的右侧。
(2)RadioButton控件常用的事件
RadioButton控件常用的事件是CheckedChanged,当RadioButton控件的选中状态发生改变时引发该事件。
2. 使用RadioButton控件模拟考试系统中的单选题
【例3.13】使用RadioButton控件模拟考试系统中的单选题。(示例位置:mr\TM\03\13)
下面的示例通过设置RadioButton控件的GroupName属性值,模拟考试系统中的单选题,并在RadioButton控件的CheckedChanged事件下,将用户选择的答案显示出来。执行程序并选择答案D,示例运行结果如图3.32所示,单击“提交”按钮,将弹出如图3.33所示的提示对话框。

图3.32 使用RadioButton控件模拟考试系统

图3.33 提示对话框
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加1个Label控件、1个Button按钮控件和4个RadioButton控件,其属性设置及用途如表3.20所示。
表3.20 Default.aspx页面中控件的属性设置及用途

为了使用户将已选择的答案显示在界面上,可以在RadioButton控件的CheckedChanged事件中,使用Checked属性来判断该RadioButton控件是否已被选择,如果已被选择,则将其显示出来。单选按钮RadioButton1的CheckedChanged事件代码如下:

注意
单选按钮RadioButton2、RadioButton3和RadioButton4控件的CheckedChanged事件代码与RadioButton1控件的CheckedChanged事件代码相似,都是用来判断该单选按钮是否被选中。如果被选中,则将其显示出来。由于篇幅有限,其他单选按钮的CheckedChanged事件代码将不再给出,请读者参见本书资源包。
当用户已选择完答案,可以通过单击“提交”按钮获取正确答案。“提交”按钮的Click事件代码如下:

3.3.4 CheckBox控件
1. CheckBox控件概述
CheckBox控件是用来显示允许用户设置true或false条件的复选框。用户可以从一组CheckBox控件中选择一项或多项。如图3.34所示为CheckBox控件。
(1)CheckBox控件的常用属性
CheckBox控件的常用属性及说明如表3.21所示。

图3.34 CheckBox控件
表3.21 CheckBox控件的常用属性及说明

下面介绍CheckBox控件的一些重要属性。
- ☑ Checked属性
如果CheckBox控件被选中,则CheckBox控件的Checked属性值为true,否则为false。
- ☑ TextAlign属性
CheckBox控件可以通过Text属性指定要在控件中显示的文本。当CheckBox控件的TextAlign属性值为Left时,文本显示在单选按钮的左侧;当CheckBox控件的TextAlign属性值为Right时,文本显示在单选按钮的右侧。
(2)CheckBox控件的常用事件
CheckBox控件的常用事件是CheckedChanged,当CheckBox控件的选中状态发生改变时引发该事件。
2. 使用CheckBox控件模拟考试系统中的多选题
【例3.14】使用CheckBox控件模拟考试系统中的多选题。(示例位置:mr\TM\03\14)
下面的示例主要是模拟考试系统中的多选题功能,并在CheckBox控件的CheckedChanged事件下,将用户选择的答案显示出来。执行程序并选择答案A、B、C,示例运行结果如图3.35所示。单击“提交”按钮,将弹出如图3.36所示的提示对话框。

图3.35 使用CheckBox控件模拟考试系统

图3.36 提示对话框
程序实现的主要步骤如下。
新建一个网站,默认主页为Default.aspx,在Default.aspx页面上添加4个CheckBox控件、1个Button控件和4个Label控件,其属性设置及用途如表3.22所示。
表3.22 Default.aspx页面中控件属性设置及用途

注意
将CheckBox控件的AutoPostBack属性值设置为true,则当选中复选框时系统会自动将网页中的内容送回Web服务器,并触发CheckBox控件的CheckedChanged事件。
为了使用户将已选择的答案显示在界面上,可以在CheckBox控件的CheckedChanged事件中,使用Checked属性来判断该CheckBox控件是否已被选择,如果已被选择,则将其显示出来。复选框CheckBox1的CheckedChanged事件代码如下:

注意
复选框CheckBox2、CheckBox3和CheckBox4控件的CheckedChanged事件代码与CheckBox1控件的CheckedChanged事件代码相似,都是用来判断该复选框是否被选中。如果被选择,则将其显示出来。由于篇幅有限,其他复选框的CheckedChanged事件代码将不再给出,请读者参见本书资源包。
当用户已选择完答案,可以通过单击“提交”按钮获取正确答案。“提交”按钮的Click事件代码如下:
