The RadioButton control and RadioButtonList control enable users to select from a small set of mutually exclusive predefined options.
1. Function
You can use the CheckBox control and CheckBoxList control to perform the following operations:
· Causes a page postback when a radio button is selected.
·Capture user interaction when the user selects a radio button.
· Bind each radio button to data in the database.
2. Background
When adding radio buttons to an ASP.NET Web page, you can use two Web server controls: a single RadioButton control or a RadioButtonList control. Both controls enable the user to choose from a small set of mutually exclusive predefined options. You can use these controls to define any number of labeled radio buttons and arrange them horizontally or vertically.
You can add individual RadioButton controls to the page and use the controls individually. Usually two or more separate buttons are grouped together.
Alternatively, you can use the RadioButtonList control, which is a single control that can be used as the parent control for a group of radio button list items. This control is derived from the base ListControl class and therefore works very similarly to the ListBox, DropDownList, BulletedList, and CheckBoxList Web server controls. Many of the procedures for using the RadioButtonList control are the same as for other list Web server controls.
Both types of controls have their own advantages. Using a single RadioButton control gives you more control over the layout of the radio button group than using a RadioButtonList control. For example, you can include non-radio button text between radio buttons.
If you want to create a set of radio buttons based on data from a data source, the RadioButtonList control is a better choice. It's also slightly simpler in terms of writing code to check which button is selected.
Note: You can also use the HtmlInputRadioButton server control to add radio buttons to ASP.NET web pages.
If you want to provide the user with a long list of options or a list that may change in length at run time, use the ListBox or DropDownList Web server control.
1. Group radio buttons
Radio buttons are rarely used alone, but 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 the following ways:
Start by adding a single RadioButton Web server control to the page, and then manually assign all of the controls to a group. The group name can be anything; all radio buttons with the same group name are considered part of a single group.
Add a RadioButtonList Web server control to the page. List items in this control are automatically grouped.
2. RadioButton and RadioButtonList events
Events work differently between a single RadioButton control and a RadioButtonList control.
3. Single RadioButton control
A single RadioButton control raises the CheckedChanged event when the user clicks the control. (This event is inherited from the CheckBox control.) By default, this event does not cause the page to be sent to the server. However, you can force the control to perform a postback immediately by setting the AutoPostBack property to true.
Note: The automatic postback feature requires the browser to support ECMAScript (Jscript or JavaScript) and scripting to be enabled on the user's browser.
You may 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 when you need to know that a radio button has changed, rather than just reading the current selection.
4. RadioButtonList control
The RadioButtonList control raises the SelectedIndexChanged event when the user changes the selected radio button in the list. By default, this event does not cause the page to be sent to the server. However, you can force the control to perform a postback immediately by setting the AutoPostBack property to true.
Note: The automatic postback feature requires the browser to support ECMAScript (Jscript or JavaScript) and scripting to be enabled on the user's browser.
As with individual RadioButton controls, it is more common to test the state of a RadioButtonList control after the page has been sent by other means.
5. RadioButton control HTML attributes
When the RadioButton control is rendered to the browser, it will be divided into two parts: an input element representing the radio button and a separate label element representing the radio button title. These two elements are combined into a span element.
When you apply styles or property settings to a RadioButton control, those styles and properties are applied to the outer span element. For example, if you set a control's BackColor property, the setting applies to the span element. Therefore, it will affect both the inner input and label elements.
Sometimes, you may need to set separate settings for radio buttons and labels. The RadioButton control supports two properties that can be set at run time. The InputAttributes attribute lets you add HTML attributes to the input element, and the LabelAttributes attribute lets you add HTML attributes to the label element. The set properties are passed to the browser as-is. The following example shows how to set the properties of an input element so that when the user points the mouse pointer over a radio button, only the radio button changes color and not the label.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'white'");
6. Bind data to controls
You can bind a single RadioButton control to a data source, and you can bind any property of a RadioButton control to any field of the data source. For example, you can set the control's Text property based on information in the database.
Because radio buttons are used in groups, binding a single radio button to a data source is uncommon. Instead, it is more common to bind the RadioButtonList control to a data source. In this case, the data source dynamically generates radio buttons (list items) for each record in the data source.
3. How to: Add the RadioButton Web Server Control to a Web Forms Page
There are two ways to add radio buttons to a Web Forms page:
·Add a single RadioButton Web server control.
·Add a RadioButtonList Web server control, and then add a single list item to the control.
When using a single RadioButton Web server control, you typically add a set of such controls to the page and then group them. Several different button groups can be created.
step:
1. From the "Standard" tab of the toolbox, drag the RadioButton control onto the page.
2. In the "Properties" window, specify the title by setting the Text property.
3. You can also choose to change the direction of the title by setting the TextAlign property.
4. Repeat steps 1 through 3 for each radio button you want to add to the page.
Group individual RadioButton web server controls
Set the GroupName property of each control to the same name. You can use any string as the name, but it cannot contain spaces. For example, you can assign the string "RadioButtonGroup1" to the GroupName property of all buttons.
To create multiple groups of buttons, use a different group name for each group.
Note: At any time, you can add RadioButton controls to the page and divide them into existing groups.
4. How to: Add the RadioButtonList Web Server Control to a Web Forms Page
There are two ways to add radio buttons to a Web Forms page:
·Add a RadioButtonList Web server control, and then add a single list item to the control.
·Add a single RadioButton Web server control.
When using the RadioButtonList control, you can add individual controls to the page. Adding items to a control is a separate process, depending on whether you want to display a static list in the control or a dynamically generated list at runtime.
step:
1. From the "Standard" tab of the toolbox, drag the RadioButtonList control onto the page.
2. You can also choose to change the direction of the title by setting the TextAlign property in the "Properties" window.
3. You can also choose to change the layout of the control to display multiple columns.
4. Follow one of the following methods to create an item for the control:
·Create each item separately.
·Bind data to the control.
5. How to: Set and get the selection in the RadioButton Web server control
You can set the selected radio button at design time, or in code at run time. If a radio button belongs to a group, setting the button will clear all other selections in the group.
Note: If you are using the RadioButtonList control, the process of getting and setting the button value is different.
1. Set the selected RadioButton control
Set the control's Checked property to true. If you select multiple RadioButton controls in a group, the browser determines which button becomes selected.
If you set this property to false, the selection is cleared but another radio button is not selected. Therefore, you can clear all selections by setting the Checked property of all radio buttons in a group to false.
Determining which RadioButton control has been selected is essentially testing the Checked property.
public void Button1_Click (object sender, System.EventArgs e)
{
if (RadioButton1.Checked) {
Label1.Text = "You selected " + RadioButton1.Text;
}
else if (RadioButton2.Checked) {
Label1.Text = "You selected " + RadioButton2.Text;
}
else if (RadioButton3.Checked) {
Label1.Text = "You selected " + RadioButton3.Text;
}
}
6. How to: Set the layout in the RadioButtonList Web server control
By default, the RadioButtonList Web server control displays only a list of buttons. However, you can specify any number of columns, and within those columns, you can also specify how items are sorted: vertically (default) or horizontally. A three-column vertical layout looks like this:
A D G
B E H
C F
A horizontal layout of the same items produces the following layout:
A B C
D E F
G H
Specify column count and sort
·Set the RepeatColumns property of the RadioButtonList control to the desired number of columns.
· Use the RepeatDirection enumeration to set the RepeatDirection property to Vertical or Horizontal, as shown in the following code example.
protected void Button1_Click (object sender, System.EventArgs e)
{
// Create five radio buttons.
string[] colors = {"Red", "Blue", "Green", "Yellow", "Orange"};
this.RadioButtonList1.Items.Clear();
for(int i=0;i < colors.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// Lay out the radio buttons horizontally.
this.RadioButtonList1.RepeatDirection =
RepeatDirection.Horizontal;
}
7. How to: Respond to user selections in the RadioButton Web server control group
When the user selects a RadioButton control, the control raises an event that you can respond to.
Description: The events raised by the RadioButtonList control are different from the events raised by a single RadioButton control.
You may not need to respond directly to the RadioButton control's selection event at all. Respond to this event only if it is necessary to know when the user has changed the selection in the radio button group.
If you just want to know which radio button was selected and don't want to know if the selection has changed, you can just test the radio button selection after the form is sent to the server.
Because each RadioButton server control is a separate control and each control can raise events independently; the radio button group does not raise events as a whole.
Create an event handler for the control's CheckedChanged event.
By default, the CheckedChanged event does not immediately cause the Web Forms page to be sent to the server. Instead, the event is raised in the server code the next time the form is sent (such as when the Button Web server control is clicked). To cause the CheckedChanged event to cause immediate posting, set the RadioButton control's AutoPostBack property to true.
Note: To send the RadioButton control to the server when it is selected, the browser must support ECMAScript (JScript, JavaScript) and the user's browser must enable scripting.
The following code example demonstrates how to respond when a user selects a RadioButton control.
public void RadioButton1_CheckedChanged (object sender,
System.EventArgs e)
{
Label1.Text = "You selected Radio Button " + RadioButton1.Text;