Share via


RadioButtonList Web Server Control

Creates a group of radio buttons. This control supports binding to a data source.

<asp:RadioButtonList id="RadioButtonList1"
     AutoPostBack="True|False"
     CellPadding="Pixels"
     DataSource="<% databindingexpression %>"
     DataTextField="DataSourceField"
     DataValueField="DataSourceField"
     RepeatColumns="ColumnCount"
     RepeatDirection="Vertical|Horizontal"
     RepeatLayout="Flow|Table"
     TextAlign="Right|Left"
     OnSelectedIndexChanged="OnSelectedIndexChangedMethod"
     runat="server">

   <asp:ListItem Text="label" 
        Value="value" 
        Selected="True|False" />

</asp:RadioButtonList>

Remarks

The RadioButtonList control allows you to create a single-selection radio button group that can be dynamically generated by binding to a data source. To specify the items that you want to appear in the RadioButtonList control, place a ListItem element for each entry between the opening and closing tags of the RadioButtonList control.

Note   You can also use the RadioButton control. The RadioButtonList control is easier for creating a set of radio buttons using data binding, while an individual RadioButton control gives you greater control over layout.

The RadioButtonList control also supports data binding. To bind the control to a data source, first create a data source, such as a System.Collections.ArrayList object, that contains the items to display in the control. Next, use the Control.DataBind method to bind the data source to the RadioButtonList control. Use the DataTextField and DataValueField properties to specify which field in the data source to bind to the Text and Value properties, respectively, of each list item in the control. The RadioButtonList control will now display the information from the data source.

To determine the selected items in the RadioButtonList control, iterate through the Items collection and test the Selected property of each item in the collection.

You can specify the rendering of the list with the RepeatLayout and RepeatDirection properties. If RepeatLayout is set to RepeatLayout.Table (the default setting), the list will be rendered within a table. If it is set to RepeatLayout.Flow, the list will be rendered without any tabular structure. By default, RepeatDirection is set to RepeatDirection.Vertical. Setting this property to RepeatDirection.Horizontal will render the list horizontally.

CAUTION   Text is not HTML encoded before it is displayed in the RadioButtonList control. This makes it possible to embed script within HTML tags in the text. If the values for the control come from user input, be sure to validate the values to help prevent security vulnerabilities.

For detailed information on the RadioButtonList Web server control's properties and events, see the RadioButtonList Class documentation.

Example

The following example demonstrates how to use a RadioButtonList control to display a set of mutually exclusive options to the user.

<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
   <script language="VB" runat="server">
      Sub Button1_Click(Source As Object, e As EventArgs)
         If RadioButtonList1.SelectedIndex > - 1 Then
            Label1.Text = "You selected: " & _
                          RadioButtonList1.SelectedItem.Text
         End If
      End Sub

      Sub chkLayout_CheckedChanged(sender As Object, e As EventArgs)        
         If chkLayout.Checked = True Then
            RadioButtonList1.RepeatLayout = RepeatLayout.Table
         Else
            RadioButtonList1.RepeatLayout = RepeatLayout.Flow
         End If
      End Sub

      Sub chkDirection_CheckedChanged(sender As Object, e As EventArgs)        
         If chkDirection.Checked = True Then
            RadioButtonList1.RepeatDirection = RepeatDirection.Horizontal
         Else
            RadioButtonList1.RepeatDirection = RepeatDirection.Vertical
         End If
      End Sub
   </script>
</head>
<body>
   <form runat="server">
      <h3>RadioButtonList Example</h3>
      <asp:RadioButtonList id=RadioButtonList1 runat="server">
         <asp:ListItem>Item 1</asp:ListItem>
         <asp:ListItem>Item 2</asp:ListItem>
         <asp:ListItem>Item 3</asp:ListItem>
         <asp:ListItem>Item 4</asp:ListItem>
         <asp:ListItem>Item 5</asp:ListItem>
         <asp:ListItem>Item 6</asp:ListItem>
      </asp:RadioButtonList>
      <p>
      <asp:CheckBox id="chkLayout"
           OnCheckedChanged="chkLayout_CheckedChanged" 
           Text="Display Table Layout" 
           Checked=true AutoPostBack="true" 
           runat="server" />
      <br>
      <asp:CheckBox id="chkDirection" 
           OnCheckedChanged="chkDirection_CheckedChanged" 
           Text="Display Horizontally" 
           AutoPostBack="true" 
           runat="server" />
      <p>
      <asp:Button id="Button1" 
           Text="Submit" 
           OnClick="Button1_Click" 
           runat="server"/>
      <p>
      <asp:Label id="Label1" 
           Font-Name="Verdana" 
           Font-Size="8pt" 
           runat="server"/>
   </form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
   <script runat="server">
      void Button1_Click(object Source, EventArgs e) 
      {
         if (RadioButtonList1.SelectedIndex > -1) 
         {  
            Label1.Text = "You selected: " +
                          RadioButtonList1.SelectedItem.Text;
         }
      }
      void chkLayout_CheckedChanged(Object sender, EventArgs e) 
      {
        
         if (chkLayout.Checked == true) 
         {
            RadioButtonList1.RepeatLayout = RepeatLayout.Table;
         }
         else 
         {
            RadioButtonList1.RepeatLayout = RepeatLayout.Flow;
         }     
      }
      void chkDirection_CheckedChanged(Object sender, EventArgs e) 
      {
         if (chkDirection.Checked == true) 
         {
            RadioButtonList1.RepeatDirection = RepeatDirection.Horizontal;
         }
         else 
         {
            RadioButtonList1.RepeatDirection = RepeatDirection.Vertical;
         }  
      }
   </script>
</head>
<body>
   <form runat="server">
      <h3>RadioButtonList Example</h3>
      <asp:RadioButtonList id=RadioButtonList1 runat="server">
         <asp:ListItem>Item 1</asp:ListItem>
         <asp:ListItem>Item 2</asp:ListItem>
         <asp:ListItem>Item 3</asp:ListItem>
         <asp:ListItem>Item 4</asp:ListItem>
         <asp:ListItem>Item 5</asp:ListItem>
         <asp:ListItem>Item 6</asp:ListItem>
      </asp:RadioButtonList>
      <p>
      <asp:CheckBox id="chkLayout"
           OnCheckedChanged="chkLayout_CheckedChanged" 
           Text="Display Table Layout" 
           Checked=true AutoPostBack="true" 
           runat="server"/>
      <br>
      <asp:CheckBox id="chkDirection"
           OnCheckedChanged="chkDirection_CheckedChanged" 
           Text="Display Horizontally" 
           AutoPostBack="true" 
           runat="server"/>
      <p>
      <asp:Button id="Button1" 
           Text="Submit" 
           OnClick="Button1_Click" 
           runat="server"/>
      <p>
      <asp:Label id="Label1" 
           Font-Name="Verdana" 
           Font-Size="8pt" 
           runat="server"/>
   </form>
</body>
</html>

See Also

Web Server Controls | RadioButtonList Class