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.

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.

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.

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.

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

Reference

CheckBox and CheckBoxList Web Server Controls Overview