ASP.NET - RadioButton 和 RadioButtonList Web 服务器控件概述

 RadioButton 控件和 RadioButtonList 控件使用户能够从一小组互相排斥的预定义选项中进行选择。

一、功能

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

·当选中某个单选按钮时引起页回发。

·当用户选中某个单选按钮时捕获用户交互。

·将每个单选按钮绑定到数据库中的数据。

二、背景

在向 ASP.NET 网页添加单选按钮时，可以使用两种 Web 服务器控件：单个 RadioButton 控件或 RadioButtonList 控件。这两种控件都使用户能够从一小组互相排斥的预定义选项中进行选择。您可以使用这些控件定义任意数目的带标签的单选按钮，并将它们水平或垂直排列。

您可以向页面添加单个 RadioButton 控件，并单独使用这些控件。通常是将两个或多个单独的按钮组合在一起。

或者，可以使用 RadioButtonList 控件，这是一个单一控件，可用作一组单选按钮列表项的父控件。该控件是从基 ListControl 类中派生的，因此，其工作方式与 ListBox、DropDownList、BulletedList 和 CheckBoxList Web 服务器控件非常相似。使用 RadioButtonList 控件的很多过程与使用其他列表 Web 服务器控件的过程相同。

这两类控件都有各自的优点。使用单个的 RadioButton 控件相对于使用 RadioButtonList 控件，可以更好地控制单选按钮组的布局。例如，您可以在各单选按钮之间包含非单选按钮文本。

如果您想要基于数据源中的数据创建一组单选按钮，则 RadioButtonList 控件是更好的选择。在编写代码以检查所选定的按钮方面，它也稍微简单一些。

      说明： 您还可以使用 HtmlInputRadioButton 服务器控件来向 ASP.NET 网页添加单选按钮。

如果要向用户提供较长的选项列表或在运行时长度可能会变的列表，请使用 ListBox 或 DropDownList Web 服务器控件。

1、对单选按钮分组

单选按钮很少单独使用，而是进行分组以提供一组互斥的选项。在一个组内，每次只能选择一个单选按钮。您可以用下列方法创建分组的单选按钮：

先向页中添加单个的 RadioButton Web 服务器控件，然后将所有这些控件手动分配到一个组中。组名称可以是任意名称；具有相同组名称的所有单选按钮将视为单个组的组成部分。

向页中添加一个 RadioButtonList Web 服务器控件。该控件中的列表项将自动进行分组。

2、RadioButton 和 RadioButtonList 事件

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

3、单个 RadioButton 控件

单个 RadioButton 控件在用户单击该控件时引发 CheckedChanged 事件。（此事件从 CheckBox 控件继承。）默认情况下，此事件不会导致向服务器发送页。但是，可以通过将 AutoPostBack 属性设置为 true，强制该控件立即执行回发。

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

可能需要为 CheckedChanged 事件创建一个事件处理程序。可以在作为页的一部分运行的任何代码中测试选中了哪个单选按钮。通常，只有在需要知道已更改某个单选按钮，而不只是读取当前选择时，才会为 CheckedChanged 事件创建一个事件处理程序。

4、RadioButtonList 控件

当用户更改列表中选中的单选按钮时，RadioButtonList 控件会引发 SelectedIndexChanged 事件。默认情况下，此事件并不导致向服务器发送页。但是，可以通过将 AutoPostBack 属性设置为 true，强制该控件立即执行回发。

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

与单个 RadioButton 控件一样，更常见的做法是，在通过其他方式发送页之后测试 RadioButtonList 控件的状态。

5、RadioButton 控件 HTML 属性

在 RadioButton 控件向浏览器呈现时将分为两个部分：表示单选按钮的 input 元素和表示单选按钮标题的单独的 label 元素。这两个元素组合在一起放入到 span 元素中。

在对 RadioButton 控件应用样式或属性设置时，这些样式和属性将应用于外部的 span 元素。例如，如果对控件的 BackColor 属性进行设置，则所做的设置将应用于 span 元素。因此，它将同时影响内部的 input 和 label 元素。

有时，可能需要对单选按钮和标签进行单独设置。RadioButton 控件支持两个可以在运行时进行设置的属性。InputAttributes 属性可让您向 input 元素添加 HTML 属性，而 LabelAttributes 属性可让您向 label 元素添加 HTML 属性。设置的属性将按原样传递到浏览器。下面的示例演示了如何设置 input 元素的属性，使得在用户将鼠标指针指向单选按钮时，只有单选按钮更改颜色，而标签不更改颜色。

Ra***Button1.InputAttributes.Add("onmouseover", "th***style.backgroundColor = 'red'");

Ra***Button1.InputAttributes.Add("onmouseout", "th***style.backgroundColor = 'white'");

6、将数据绑定到控件

可以将单个 RadioButton 控件绑定到数据源，并且可以将 RadioButton 控件的任何属性绑定到数据源的任何字段。例如，可以基于数据库中的信息设置该控件的 Text 属性。

由于单选按钮是成组使用的，因此将单个单选按钮绑定到数据源的方案并不常见。相反，更常见的做法是将 RadioButtonList 控件绑定到数据源。这种情况下，数据源会为数据源中的每条记录动态生成单选按钮（列表项）。

三、如何：向 Web 窗体页添加 RadioButton Web 服务器控件

可通过以下两种方法向 Web 窗体页添加单选按钮：

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

·添加一个 RadioButtonList Web 服务器控件，然后向该控件添加单个列表项。

当使用单个 RadioButton Web 服务器控件时，一般是向页面添加一组这样的控件，然后对它们进行分组。可以创建多个不同的按钮组。

步骤：

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

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

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

4、对要添加到页面上的每个单选按钮重复步骤 1 至 3。

对各个 RadioButton Web 服务器控件进行分组

将每个控件的 GroupName 属性设置为同一个名称。您可以使用任意字符串作为名称，但不能包含空格。例如，可以将字符串“RadioButtonGroup1”分配给所有按钮的 GroupName 属性。

若要创建多组按钮，请为每个组使用一个不同的组名。

说明： 在任何时候，您都可以向页面添加 RadioButton 控件，并将其划分到现有组中。

四、如何：向 Web 窗体页添加 RadioButtonList Web 服务器控件

可通过以下两种方法向 Web 窗体页添加单选按钮：

·添加一个 RadioButtonList Web 服务器控件，然后向该控件添加单个列表项。

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

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

步骤：

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

2、还可以选择在“属性”窗口中，通过设置 TextAlign 属性更改标题的方向。

3、另外可以选择更改控件的布局以显示多个列。

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

·分别创建每一项。

·将数据绑定到该控件。

五、如何：设置和获取 RadioButton Web 服务器控件中的选择

      您可以在设计时，或者在运行时在代码中设置选定的单选按钮。如果单选按钮属于某个组，则设置该按钮的同时将会清除该组中的所有其他选定内容。

说明： 如果您使用的是 RadioButtonList 控件，则获取和设置按钮值的过程会有所不同。

1、设置选定的 RadioButton 控件

将控件的 Checked 属性设置为 true。如果您在一组中选择了多个 RadioButton 控件，则浏览器将确定哪个按钮呈现选定状态。

如果将该属性设置为 false，就会清除选择，但不会选择另一个单选按钮。因此，您可以通过将一组中所有单选按钮的 Checked 属性设置为 false 来清除所有选择。

确定哪个 RadioButton 控件已被选定，实质上就是测试 Checked 属性。

public void Button1_Click (object sender, Sy***m.EventArgs e)

{

   if (Ra***Button1.Checked) {

      La***1.Text = "You selected " + Ra***Button1.Text;

   }

   else if (Ra***Button2.Checked) {

      La***1.Text = "You selected " + Ra***Button2.Text;

   }

   else if (Ra***Button3.Checked) {

      La***1.Text = "You selected " + Ra***Button3.Text;

   }

}

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

默认情况下，RadioButtonList Web 服务器控件只显示一列按钮。但您可以指定任意列数，在这些列中，还可以指定各项的排序方式：垂直（默认）或水平。三列垂直布局如下所示：

A    D    G

B    E    H

C    F

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

A    B    C

D    E    F

G    H

指定列计数与排序

·将 RadioButtonList 控件的 RepeatColumns 属性设置为所需的列数。

·使用 RepeatDirection 枚举将 RepeatDirection 属性设置为 Vertical 或 Horizontal，如下面的代码示例所示。

protected void Button1_Click (object sender, Sy***m.EventArgs e)

{

   // Create five radio buttons.

   string[] colors = {"Red", "Blue", "Green", "Yellow", "Orange"};

   th***RadioButtonList1.Items.Clear();

   for(int i=0;i < co***s.GetLength(0);i++){

      th***RadioButtonList1.Items.Add(colors[i]);

   }  

   // Lay out the radio buttons horizontally.

   th***RadioButtonList1.RepeatDirection =

       Re***tDirection.Horizontal;

}

七、如何：响应 RadioButton Web 服务器控件组中的用户选择

      当用户选择一个 RadioButton 控件时，该控件将引发一个事件，您可以响应这一事件。

说明： RadioButtonList 控件引发的事件不同于单个 RadioButton 控件引发的事件。

      您可能根本不需要直接对 RadioButton 控件的选择事件进行响应。仅当有必要知道用户何时更改了单选按钮组中的选择内容时，才响应这一事件。

如果只想知道选择了哪个单选按钮，不想知道所选内容是否已更改，则只需在窗体发送到服务器后测试单选按钮选择。

由于每个 RadioButton 服务器控件都是单独的控件，而每个控件都可单独引发事件；因此单选按钮组不作为整体引发事件。

      为控件的 CheckedChanged 事件创建一个事件处理程序。

默认情况下，CheckedChanged 事件并不马上导致向服务器发送 Web 窗体页。而是在下一次发送窗体时（如单击 Button Web 服务器控件时），在服务器代码中引发该事件。若要使 CheckedChanged 事件引发即时发送，请将 RadioButton 控件的 AutoPostBack 属性设置为 true。

      说明： 若要在选中 RadioButton 控件时将其发送到服务器，浏览器必须支持 ECMAScript（JScript、JavaScript），并且用户的浏览器要启用脚本撰写。

      下面的代码示例演示当用户选择 RadioButton 控件时的响应方法。

public void RadioButton1_CheckedChanged (object sender,

    Sy***m.EventArgs e)

{

   La***1.Text = "You selected Radio Button " + Ra***Button1.Text;