codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:



Home » ASP » Article

ASP.NET : The radiobutton control

Article by: David Sussman, et al (7/8/2002)
Bookmark us now! Add to Favourites
Email a friend!Tell a friend
Summary: 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.
Viewed: 471503 times Rating (37 votes): 
 4.5 out of 5
 Rate this Article  Read Comments  Post Comments


Previous Page  Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10  Page 12 Page 13 Next Page  

The <asp:radiobutton> and <asp:radiobuttonlist> Controls

In HTML, radio buttons are usedwhen 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> controlcontains 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 thesame 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.

Previous Page  Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 Page 8 Page 9 Page 10  Page 12 Page 13 Next Page  




Click here to Buy!

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.






CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
Rate this article:     Poor Excellent
View highlighted Comments
User Comments on 'ASP.NET : The radiobutton control'
RELATED ARTICLES
ASP FilesystemObject
by Jeff Anderson
An introduction to the Filesystemobject
ASP GetTempName
by Jeff Anderson
Use the GetTempName method to create a randomly generated temporary file on the server.
ASP Format Date and Time Script
by Jeff Anderson
An ASP script showing the variety of date and time formats possible using the FormatDateTime Function.
ASP OpenTextFile
by Jeff Anderson
An introduction to the OpenTextFile Method of the FileSystemObject
Email validation using Regular Expression
by Jeff Anderson
Using regular expression syntax is an exellent way to thoroughly validate an email. It's possible in ASP.
Add or Subtract Hours in SQL or ASP using DateAdd
by Jeff Anderson
A beginners guide to using the SQL DATEADD function to add or subtract hours. Particularly useful when setting the time displayed on the ASP page to a different time zone (eg when the server is in the US, and the site is for a UK audience).
The asp:radiobutton and asp:radiobuttonlist control
by David Sussman, et al
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.
The asp:checkbox and asp:checkboxlist control
by David Sussman, et al
Checkboxes are similar to radio buttons, and in HTML, they were used to allow multiple choices from a group of buttons.
ASP FileExists
by Jeff Anderson
An introduction to the FileExistsMethod of the FileSystemObject
Concatenate strings in sql
by Jeff Anderson
A brief introduction to concatenating strings in an sql query (using SQL server or access databases).








Recent Forum Threads
• Run a program both on windows and linux
• VERO.SurfCAM.v2014
• Schlumberger.Petrel.V2013.2
• Petrel.V2013.2
• Altair.HyperWorks.v12
• VoluMill.v6.1
• VoluMill.NEXION.6
• VERO.SurfCAM.v2014
• Schlumberger.Petrel.V2013.2


Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text


© Copyright codetoad.com 2001-2014