RadioButton and RadioButtonList Web Server Controls Overview
The RadioButton control and the RadioButtonList control enable users to select from a small set of mutually exclusive, predefined choices.
This topic contains:
Features
Background
Code Examples
Class Reference
Features
You can use the RadioButton control and the RadioButtonList control to:
Cause a page postback when a radio button is selected.
Capture user interaction when a user selects a radio button.
Bind each radio button to data from a database.
Back to top
Background
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.
Note
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.
If you want to present users with a longer list of options or a list that might vary in length at run time, use a ListBox or DropDownList Web server control.
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
Events work differently between individual RadioButton controls and the RadioButtonList control.
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.
Note
The auto-postback capability requires that the browser support ECMAScript (JScript, or JavaScript) and that scripting be enabled on the user's browser.
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.
RadioButtonList 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.
Note
The auto-postback capability requires that the browser support ECMAScript (JScript, or JavaScript) and that scripting be enabled on the user's browser.
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.
RadioButton1.InputAttributes.Add("onmouseover", _
"this.style.backgroundColor = 'red'")
RadioButton1.InputAttributes.Add("onmouseout", _
"this.style.backgroundColor = 'white'")
RadioButton1.InputAttributes.Add("onmouseover",
"this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout",
"this.style.backgroundColor = 'white'");
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.
Back to top
Code Examples
How to: Add RadioButton Web Server Controls to a Web Forms Page
How to: Add RadioButtonList Web Server Controls to a Web Forms Page
How to: Set and Get the Selection in a RadioButton Web Server Control
How to: Set Layout in a RadioButtonList Web Server Control
How to: Respond to a User Selection in a RadioButton Web Server Control Group
How to: Add Items in List Web Server Controls
How to: Populate List Web Server Controls from a Data Source
How to: Respond to Changes in List Web Server Controls
Back to top
Class Reference
The following table lists the classes that relate to the RadioButton and RadioButtonList controls.
Member |
Description |
|---|---|
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. |
Back to top
See Also
Tasks
How to: Set the Selection in List Web Server Controls
How to: Determine the Selection in List Web Server Controls