RadioButton and RadioButtonList Web Server Controls Overview

Article
10/15/2014

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 allow users to select from a small set of mutually exclusive, predefined choices. The controls allow you to define any number of radio buttons with labels and to arrange them horizontally or vertically.

Note
You can also use the HtmlInputRadioButton server control to add radio buttons to an ASP.NET Web page.

Note
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.

RadioButton Control vs. RadioButtonList Control

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.

In contrast, the RadioButtonList control is a single control that acts as a parent control for a collection of radio button list items. It derives from a base ListControl, and therefore works much like the ListBox, DropDownList, BulletedList, and CheckBoxList Web server controls. Therefore, many of the procedures for working with the RadioButtonList control are the same as they are for the other list Web server controls.

Each type of control has advantages. Individual RadioButton controls give you more control over the layout of the radio button group. For example, you can include text (that is, non-radio-button text) between radio buttons.

The RadioButtonList control does not permit you to insert text between the buttons, but is far easier to use if you want to bind the buttons to a data source. It is also slightly easier to write code that determines which button has been selected.

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. In this case, the group is an arbitrary name; 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 Events

Events work slightly differently between individual RadioButton controls and the RadioButtonList control.

Individual RadioButton Controls

Individual RadioButton controls raise a CheckedChanged event when users click the control. By default, this event does not cause the page to be posted to the server, but you can have the control force an immediate post by setting the AutoPostBack property to true. For details about responding to this event directly, see Responding to a User Selection in a RadioButton Group.

Note
The ability of a RadioButton control to post to the server when it is checked requires that the browser support ECMAScript (JScript, JavaScript) and that scripting be enabled on the user's browser.

Whether a RadioButton control posts to the server or not, it is not usually necessary to create an event handler for the CheckedChanged event. Instead, it is more common to test which button is selected when the form has been posted to the server by a control such as a Button control. For details, see Setting and Getting the Selection in a RadioButton Web Server Control.

RadioButton Control HTML Attributes

When the RadioButton control renders to the browser, it does so in two parts: an <input> element representing the radio button, and a separate <label> element representing the caption for the radio button. The combination of the two elements is in turn 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> tag, and therefore affects both the inner <input> and <label> elements.

At times, you might want to be able 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 and the LabelAttributes property. Each property allows you to add HTML attributes to the <input> and <label> elements, respectively. The attributes you set are passed through as-is to the browser. For example, the following code 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'");

RadioButtonList Control

In contrast, 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 form to be posted to the server, although you can specify this option by setting the AutoPostBack property to true. For details, see Responding to Changes in a List Web Server Control.

Note
The ability of a RadioButtonList control to post to the server when it is selected requires that the browser support ECMAScript (JScript, 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 form has been posted some other way. For details, see Determining the Selection in a List Web Server Control.

Binding Data to the Control

As with any Web server 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 from information in a database.

However, because radio buttons are used in groups, binding a single radio button to a data source isn't 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.