Thursday, January 14, 2010

ASP.NET Radio Button

I’ve been asked a lot lately about radio buttons and how to use them. Normally I suggest using the RadioButtonList control built right into asp.net. This allows you choose from a couple different layouts and repeat directions.

   1: <asp:RadioButtonList ID="rblButtonList" runat="server" RepeatColumns="3"></asp:RadioButtonList>
   2: <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
   1: protected void Page_PreRender(object sender, EventArgs e)
   2: {
   3:     // Generate some random data.
   4:     List<ListItem> products = new List<ListItem>();
   5:     // This is simulate a list of products that can be selected in the RadioButtonList
   6:     int numOfItemsToCreate = 20;
   7:     for (int i = 0; i < 20; i++)
   8:     {
   9:         ListItem item = new ListItem()
  10:         {
  11:             Text = String.Format("Item {0}", i + 1), // This will normally be the text that is shown to the user (i.e. product name)
  12:             Value = i.ToString() // A unique id identifying the the item (i.e. tag)
  13:         };
  14:         products.Add(item);
  15:     }
  16:     // Bind the list to the RadioButtonList
  17:     rblButtonList.DataSource = products;
  18:     rblButtonList.DataBind();
  19: }
  20:  
  21: /// <summary>
  22: /// Handles the button click event
  23: /// </summary>
  24: /// <param name="sender"></param>
  25: /// <param name="e"></param>
  26: protected void btnSubmit_Click(object sender, EventArgs e)
  27: {
  28:     try
  29:     {
  30:         lblMessage.Text = String.Format("Selected {0}", rblButtonList.SelectedItem.Text);
  31:     }
  32:     catch { }
  33: }

For simplicity’s sake, I suggest this control, but what if you want to incorporate a group of radio buttons in some other layout and display them using a repeater? This presents a problem. As most of you have already figured out when you put an ASP.NET RadioButton in a repeater, you lose your grouping, even if you set the GroupName. In my opinion, this was a huge oversight in Microsoft’s part, but something I hope that will be address in ASP.NET 4.0 since there will be more control over client ID’s. Here’s an example, using a repeater, of how I worked around the issue.

1: <h2>
2:     Repeated Radio button</h2>
3: <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
4: <asp:UpdatePanel ID="upUpdatePanel" runat="server">
5:     <ContentTemplate>
6:         <asp:Repeater ID="rptButtonRepeater" runat="server">
pace; font-size: 12px; margin: 0em; width: 100%;">7:             <HeaderTemplate>
8:                 <table>
9:             </HeaderTemplate>
10:             <ItemTemplate>
11:                 <tr>
12:                     <td>
13:                         <%# Container.DataItem %>
14:                     </td>
15:                     <td>
16:                         <input type="radio" name="choice" value='<%# Container.DataItem %>' />
17:                     </td>
18:                 </tr>
19:             </ItemTemplate>
20:             <AlternatingItemTemplate>
21:                 <tr>
22:                     <td style="background-color: Silver">
23:                         <%# Container.DataItem %>
24:                     </td>
25:                     <td style="background-color: Silver">
26:                         <input type="radio" name="choice" value='<%# Container.DataItem %>' />
27:                     </td>
28:                 </tr>
29:             </AlternatingItemTemplate>
30:             <FooterTemplate>
31:                 </table>
32:             </FooterTemplate>
33:         </asp:Repeater>
34:         <asp:Button ID="btnRepeaterButton" runat="server" Text="Repeater Submit" OnClick="btnRepeaterButton_Click" />
35:         <asp:Label ID="lblRptMessage" runat="server"></asp:Label>
36:     </ContentTemplate>
37: </asp:UpdatePanel>
   1: protected void Page_PreRender(object sender, EventArgs e)
   2: {
   3:     // Generate some random data.
   4:     List<ListItem> products = new List<ListItem>();
   5:     // This is simulate a list of products that can be selected in the RadioButtonList
   6:     int numOfItemsToCreate = 20;
   7:     for (int i = 0; i < 20; i++)
   8:     {
   9:         ListItem item = new ListItem()
  10:         {
  11:             Text = String.Format("Item {0}", i + 1), // This will normally be the text that is shown to the user (i.e. product name)
  12:             Value = i.ToString() // A unique id identifying the the item (i.e. tag)
  13:         };
  14:         products.Add(item);
  15:     }
  16:     // Bind the list to the RadioButtonList
  17:     rptButtonRepeater.DataSource = products;
  18:     rptButtonRepeater.DataBind();
  19: }
  20:  
  21: protected void btnRepeaterButton_Click(object sender, EventArgs e)
  22: {
  23:     lblRptMessage.Text = String.Format("Selected {0}", Request.Form["choice"]);
  24: }

As you can see you have to go back to grass roots on this one. Here are some other articles on the subject that you might find interesting:

No comments:

Post a Comment