ASP.NET - CheckBox 和 CheckBoxList Web 服务器控件概述（上）

 

      CheckBox 控件和 CheckBoxList 控件为用户提供了一种指定是/否（真/假）选择的方法。

 

一、功能

可以使用 CheckBox 控件和 CheckBoxList 控件执行以下操作：

·当选中某个复选框时将引起页回发。

·当用户选中某个复选框时捕获用户交互。

·将每个复选框绑定到数据库中的数据。

 

二、背景

可以使用两种类型的 Web 服务器控件将复选框添加到 ASP.NET 网页上：单个的 CheckBox 控件或一个 CheckBoxList 控件。这两种控件都为用户提供了一种指定是/否（真/假）选择的方法。

您可以向页面添加单个 CheckBox 控件，并单独使用这些控件。也可以使用 CheckBoxList 控件，该控件是一个可用作复选框列表项集合的父控件的单一控件。它派生自基 ListControl 类，因此其工作方式与 ListBox、DropDownList、RadioButtonList 和 BulletedList Web 服务器控件的工作方式非常相似。使用 CheckBoxList 控件的许多过程与使用其他列表服务器控件的过程相同。

这两类控件都有各自的优点。使用单个 CheckBox 控件比使用 CheckBoxList 控件能更好地控制页面上各个复选框的布局。例如，可以在每个复选框之间包含非复选框文本。您也可以控制个别复选框的字体和颜色。

如果想要用数据源中的数据创建一系列复选框，则 CheckBoxList 控件是更好的选择。（您可以将单个 CheckBox 控件绑定到数据。）

      说明： 也可以使用 HtmlInputCheckBox 控件将复选框添加到 ASP.NET 网页。

      CheckBox 和 CheckBoxList 事件：在单个 CheckBox 控件和 CheckBoxList 控件之间，事件的工作方式有所不同。

CheckBox 控件事件：单个 CheckBox 控件在用户单击该控件时引发 CheckedChanged 事件。默认情况下，此事件不会导致向服务器发送页。但是，可以通过将 AutoPostBack 属性设置为 true，强制该控件立即执行回发。有关更多信息，请参见如何：响应 CheckBox Web 服务器控件中的用户选择。

      说明： 自动回发功能要求浏览器支持 ECMAScript（Jscript 或 JavaScript），并且用户的浏览器上已启用脚本撰写。

      可能不需要为 CheckedChanged 事件创建事件处理程序。可以在作为页的一部分运行的任何代码中测试选中了哪个复选框。通常，只有在需要知道已更改了某个复选框，而不是只是读取其值时，才会为 CheckedChanged 事件创建一个事件处理程序。有关详细信息，请参见如何：设置和获取 RadioButton Web 服务器控件中的选择。

CheckBoxList 控件事件：当用户选中列表中的任何复选框时，CheckBoxList 控件都将引发 SelectedIndexChanged 事件。默认情况下，此事件并不导致向服务器发送页。但是，可以通过将 AutoPostBack 属性设置为 true，强制该控件立即执行回发。

      说明： 自动回发功能要求浏览器支持 ECMAScript（Jscript 或 JavaScript），并且用户的浏览器上已启用脚本撰写。

      与单个 CheckBox 控件一样，更常见的做法是，在通过其他方式发送页之后测试 CheckBoxList 控件的状态。有关详细信息，请参见如何：确定 List Web 服务器控件中的所选内容。

CheckBox 控件 HTML 属性：在 CheckBox 控件向浏览器呈现时将分为两部分：表示复选框的 input 元素和表示复选框标题的单独 label 元素。这两个元素组合在一起放入到 span 元素中。在对 CheckBox 控件应用样式或属性设置时，设置将应用于外部的 span 元素。例如，如果对控件的 BackColor 属性进行设置，则所做的设置将应用于 span 元素。因此，它将同时影响内部的 input 和 label 属性。有时，可能要对复选框和标签应用单独的设置。CheckBox 控件支持两个可以在运行时进行设置的属性。InputAttributes 属性可让您向 input 元素添加 HTML 属性，而 LabelAttributes 属性可让您向 label 元素添加 HTML 属性。设置的属性将按原样传递到浏览器。下面的示例演示如何设置 input 元素的属性，以便在用户将鼠标指针滑过它时，只有复选框会更改颜色（标签不会更改颜色）。

CheckBox1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'red'");

CheckBox1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'white'");

将数据绑定到控件：可以将单个 CheckBox 控件绑定到数据源，并且可以将 CheckBox 控件的任何属性绑定到数据源的任何字段。例如，通常会基于数据库中的信息设置控件的 Checked 属性。您也可以将 CheckBoxList 控件绑定到数据源。在这种情况下，各个复选框分别代表数据源中的不同记录。

 

三、如何：向 Web 窗体页添加 CheckBox Web 服务器控件 (Visual Studio)

可以用以下两种方法向 Web 窗体页添加复选框：

·添加单个 CheckBox Web 服务器控件。

·添加 CheckBoxList 控件，然后向该控件添加单个列表项。

说明： 本主题说明如何向页面添加单个 CheckBox 控件。

1、从工具箱的“标准”选项卡中，将 CheckBox 控件拖到页面上。

2、在“属性”窗口中，通过设置 Text 属性指定一个标题。

3、还可以选择通过设置 TextAlign 属性来更改标题的方向。

 

四、如何：向 Web 窗体页添加 CheckBoxList Web 服务器控件 (Visual Studio)

      在使用 CheckBoxList 控件时，只需向页面添加单个控件。向该控件添加项是一个独立的过程，它取决于要在控件中显示的是一个静态列表，还是运行时动态生成的列表。

1、从工具箱的“标准”选项卡中，将 CheckBoxList 控件拖到页面上。

2、还可以选择在“属性”窗口的“外观”类别中，通过设置 TextAlign 属性来更改复选框标签的方向。

3、另外可以选择更改控件的布局以显示多个列。有关详细信息，请参见如何：设置 CheckBoxList Web 服务器控件中的布局。

4、按照以下方法之一为该控件创建项：

·分别创建每一项

·将数据绑定到该控件。

 

五、如何：设置 CheckBoxList Web 服务器控件中的布局

      默认情况下，CheckBoxList 控件将显示单列复选框。但您可以指定任意列数，在这些列中，还可以指定各项的排序方式：垂直（默认）或水平。三列垂直布局如下所示：

      A    D    G

B    E    H

C    F

      相同项的水平布局产生以下布局：

      A    B    C

D    E    F

G    H

指定列计数与排序

1、将 CheckBoxList 控件的 RepeatColumns 属性设置为需要的列数。

2、将 RepeatDirection 设置为 Vertical 或 Horizontal。如果在代码中设置该属性，请使用 RepeatDirection 枚举，如下面的示例所示：

CheckBoxList1.RepeatDirection = RepeatDirection.Horizontal;