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.
|
|