RadioButton and RadioButtonList Web Server Controls Overview
This topic contains:
You can use two types of Web server controls to add radio buttons to an ASP.NET Web page: individual RadioButton controls or a RadioButtonList control. Both controls enable users to select from a small set of mutually exclusive, predefined choices. The controls enable you to define any number of radio buttons with labels and to arrange them horizontally or vertically.
You add individual RadioButton controls to a page and work with them singly. Typically, you group two or more individual buttons together. For more information, see Adding Individual RadioButton Controls to a Web Forms Page.
Alternatively, you can use the RadioButtonList control, which is a single control that acts as a parent control for a collection of radio button list items. It derives from the base ListControl class. Therefore, it works much like the ListBox, DropDownList, BulletedList, and CheckBoxList Web server controls. Many of the procedures for working with the RadioButtonList control are the same as they are for the other list Web server controls.
Both types of control have advantages. By using individual RadioButton controls, you get more control over the layout of the radio button group than by using the RadioButtonList control. For example, you can include non-radio-button text between radio buttons.
The RadioButtonList control is a better choice if you want to create a group of radio buttons based on data in a data source. It is also slightly easier to write code that determines which button has been selected.
You can also use the HtmlInputRadioButton server control to add radio buttons to an ASP.NET Web page. For more information, see HtmlInputRadioButton Server Control Declarative Syntax.
Grouping Radio Buttons
Radio buttons are rarely used singly. Instead, they are grouped to provide a set of mutually exclusive options. Within a group, only one radio button can be selected at a time. You can create grouped radio buttons in these ways:
Add individual RadioButton Web server controls to a page and then manually assign them all to a group. The group name is arbitrary; all radio buttons with the same group name are considered part of a single group.
Add a RadioButtonList Web server control to the page. The list items in the control are automatically grouped.
RadioButton and RadioButtonList Events
Individual RadioButton Controls
Individual RadioButton controls raise the CheckedChanged event when users click the control. (This event is inherited from the CheckBox control.) By default, this event does not cause the page to be posted to the server. However, you can force the control to perform an immediate postback by setting the AutoPostBack property to true. For details about responding to this event directly, see How to: Respond to a User Selection in a RadioButton Web Server Control Group.
You might need to create an event handler for the CheckedChanged event. You can test which radio button is selected in any code that runs as part of the page. Typically, you create an event handler for the CheckedChanged event only if you need to know that a radio button was changed, not just to read the current selection. For details, see How to: Set and Get the Selection in a RadioButton Web Server Control.
The RadioButtonList control raises a SelectedIndexChanged event when users change which radio button in the list is selected. By default, the event does not cause the page to be posted to the server. However, you can force the control to perform an immediate postback by setting the AutoPostBack property to true. For details, see How to: Respond to Changes in List Web Server Controls.
As with individual RadioButton controls, it is more common to test the state of the RadioButtonList control after the page has been posted some other way. For details, see How to: Determine the Selection in List Web Server Controls.
RadioButton Control HTML Attributes
When the RadioButton control renders to the browser, it does so in two parts: an input element that represents the radio button, and a separate label element that represents the caption for the radio button. The combination of the two elements is wrapped in a span element.
When you apply style or attribute settings to a RadioButton control, they are applied to the outer span element. For example, if you set the control's BackColor property, the setting is applied to the span element. Therefore, it affects both the inner input and label elements.
At times, you might want to make separate settings for the radio button and the label. The RadioButton control supports two properties that you can set at run time. The InputAttributes property lets you add HTML attributes to the input element, and the LabelAttributes property lets you add HTML attributes to the label element. The attributes that you set are passed through as-is to the browser. The following example shows how to set attributes for the input element so that just the radio button, but not the label, changes color when users pass the mouse pointer over it.
Binding Data to the Control
You can bind an individual RadioButton control to a data source, and you can bind any property of the RadioButton control to any field of the data source. For example, you might set the control's Text property based on information in a database.
Because radio buttons are used in groups, binding a single radio button to a data source is not a common scenario. Instead, it is more typical to bind a RadioButtonList control to a data source. In that case, the data source dynamically generates radio buttons (list items) for each record in the data source.
The main class for the RadioButton control.
The main class for the RadioButtonList control.
The class that represents each item in RadioButtonList control.
The collection of items that correspond to individual items in the list for a RadioButtonList control.