The <asp:radiobutton> and
<asp:radiobuttonlist> Controls
In HTML, radio buttons are used when we need to make
multiple sets of choices available, but we want the user to select only one of
them. If they click on a second selection after making a first, the first
selection is removed and replaced by the second. Radio buttons are implemented
in HTML using the <input> tag,
and setting the type attribute to radio.
Every radio button on the page needs to have its own <input type="radio"> tag. Each radio button within a particular group must have the same name attribute.
The <asp:radiobutton> and <asp:radiobuttonlist> controls work in a different way to their HTML forms equivalent. No
longer do they necessarily exclude each other. In HTML radio buttons were
assigned the same identifier using the name attribute, as below:
A<input
name="radio1" type="radio">
B<input
name="radio1" type="radio">
C<input
name="radio1" type="radio">
This should ensure that only one radio button could be selected. However, the <asp:radiobutton> control actively forbids you from doing this. If you tried to set
each radio button to have the same identifier with the <asp:radiobutton> control (remembering that HTML form controls use the name attribute, while HTML server controls use the id attribute), then you'd generate an error:
A<asp:radiobutton
id="radio1" runat="server" />
B<asp:radiobutton
id="radio1" runat="server" />
C<asp:radiobutton
id="radio1" runat="server" />
Instead, you have to use the <asp:radiobuttonlist> control to get the functionality that you'd typically associate
with radio buttons. The <asp:radiobuttonlist> works in the same way as listboxes, in that the <asp:radiobuttonlist> control contains a set of options
that are set using the <asp:listitem> tag with one for each option:
<asp:radiobuttonlist
id="radio1" runat="server">
 <asp:listitem id="option1" runat="server"
value="A" />
 <asp:listitem id="option2" runat="server"
value="B" />
 <asp:listitem id="option3" runat="server"
value="C" />
</asp:radiobuttonlist>
This would look as follows:
The identifier for the whole control is set
only in the id attribute of the <asp:radiobuttonlist> control, and it is this that is used to return the selected item to
ASP.NET.
While you can't give the same id name to multiple radio buttons, RadioButton has a property called GroupName
which, when set, will render a name
attribute in the final HTML.
<asp:RadioButton
id="RadioButton1" runat="server"Â GroupName="MyGroup"></asp:RadioButton>
<asp:RadioButton id="RadioButton2" runat="server"Â
GroupName="MyGroup"></asp:RadioButton>
This will render the following HTML:
<input
id="RadioButton1" type="radio"
name="MyGroup"Â
value="RadioButton1" />
<input
id="RadioButton2" type="radio"
name="MyGroup"Â
value="RadioButton2" />
This will generate two mutually exclusive
radio buttons. They have different IDs, but share the same name attribute.
We'll now create a quick example that uses
a group of radio buttons to decide which destination a user has selected on an
HTML form, and relays that information back to the user. We will only allow the
user to select one destination.
Try It Out – Using the <asp:radiobutton> Control
1. Crank up your web page editor of choice and type in the following:
<script
runat="server" language="C#">
 void Page_Load()
 {
   if (Page.IsPostBack)
    {
       Message.Text = "You have selected the following:
" +
   radio1.SelectedItem.Value;
    }
 }
</script>
<html>
 <head>
   <title>Radio Button List
Example</title>
 </head>
 <body>
   <asp:label id="Message"
runat="server" />
   <br /><br />
   Which city do you wish to look at hotels
for?
   <br /><br />
   <form runat="server">
     <asp:radiobuttonlist
id="radio1" runat="server">
       <asp:listitem
id="option1" runat="server" value="Madrid" />
       <asp:listitem
id="option2" runat="server" value="Oslo" />
       <asp:listitem
id="option3" runat="server" value="Lisbon" />
     </asp:radiobuttonlist>
     <br /><br />
     <input type="Submit">
   </form>
 </body>
</html>
2. Save this as radiopage.aspx and view it in your browser:
3. Select a button and click on Submit
Query:
How It Works
The radiopage.aspx page has three radio buttons, for Madrid, Oslo, and Lisbon:
<asp:radiobuttonlist
id="radio1" runat="server">
 <asp:listitem id="option1" runat="server"
value="Madrid" />
 <asp:listitem id="option2" runat="server"
value="Oslo" />
 <asp:listitem id="option3" runat="server"
value="Lisbon" />
</asp:radiobuttonlist>
We have assigned each of the radio buttons
their respective values, and used the <asp:radiobuttonlist> control, to place them within the same group. We use the radio1 identifier to return them to the ASP.NET code.
In the ASP.NET code at the top of the page
– delimited within the void Page_Load and curly braces – we have used the familiar three lines to return
the information from the form:
if (Page.IsPostBack)
    {
       Message.Text = "You have selected the following:
" +
   radio1.SelectedItem.Value;
    }
This is again used to display some plain
text in the <asp:label>
control, if there has been a selection made on the radio buttons. If a radio
button is selected, then the message "You have selected the following:
" is followed by the user's choice, which
is returned by SelectedItem.Value.
You should note that the line that begins Message.Text= doesn't end until the semi-colon on the second line. So in effect
this is all one line. C# allows you to split lines like this, as it only
considers a line to be complete when it reaches the semi-colon. This line
assigns the Text attribute of
the label control which is then displayed on the web form.
Buy Beginning ASP.NET with C# here
© Copyright 2002 Wrox Press
This chapter is written by David Sussman, et al
and taken from "Beginning ASP.NET with C#" published by Wrox Press Limited in June 2002; ISBN 1861007345; copyright © Wrox Press Limited 2002; all rights reserved.
No part of these chapters may be reproduced, stored in a retrieval system or transmitted in any form or by any means -- electronic, electrostatic, mechanical, photocopying, recording or otherwise -- without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
|
|
