You can use two types of Web server controls to add radio buttons to a Web Forms page: individual controls or a 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.
You can also use the server control to add radio buttons to a Web Forms page.
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 , and therefore works much like the , , , and 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.
Events work slightly differently between individual RadioButton controls and the RadioButtonList control.
Individual RadioButton Controls
Individual RadioButton controls raise a 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 property to true. For details about responding to this event directly, see Responding to a User Selection in a RadioButton Group.
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 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 property and the 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'");
In contrast, the RadioButtonList control raises a 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.
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.