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
Sponsored by: FindMyHosting - Web Hosting Search
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: 69908 times Rating (12 votes): 
 4.8 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'
Posted by :  Archive Import (Todd) at 10:54 on Saturday, May 17, 2003
great article...finally found the answer i was looking for!

didnt think i could do this:
<asp:listitem id="option1" runat="server" value="<img src='images/fullstar.gif'><img src='images/nostar.gif'><img src='images/nostar.gif'><img src='images/nostar.gif'><img src='images/nostar.gif'>" />
Posted by :  Archive Import (Marinos) at 13:24 on Friday, June 06, 2003
I want something similar to this one but on one page to have 3 radio buttons with english, french and German for the user to choose and one GO button.

When the user selects a language and clicks the GO button, on the next page to get the output "Your language of selection is: English" eg.
Posted by :  Archive Import (Frank duFontaine) at 20:51 on Wednesday, July 16, 2003
this code bugs out if nothing selected, and user hits submit
Posted by :  mancos at 23:16 on Monday, March 15, 2004
<asp:radiobuttonlist id="radio1" runat="server">

<asp:listitem id="option1" runat="server" value="Madrid" selected/>

<asp:listitem id="option2" runat="server" value="Oslo" />

<asp:listitem id="option3" runat="server" value="Lisbon" />

</asp:radiobuttonlist>


just add the 'selected' at one of the listitem
Posted by :  armigus at 12:07 on Wednesday, March 24, 2004
How would I extend the listitem to implement image mouseover effects? The selected item should also have its own image.

ImageMain - Unselected primary image
ImageHover - Displayed by onmouseover event
ImageDown - Desplayed by onmousedown event
ImageSelect - Selected image

The images would supplant the standard radio button circle.
Posted by :  sachinoncode at 00:09 on Friday, August 13, 2004
Hi this article is fine but i am facing a problem in assigning the radiobuttonlist in an object in javascript.for ex. we can do " var obj = document.getelementbyId('controlname') for any simple control. how to do this for radiobuttonlist???????
any solution friends???
Posted by :  glynhughes at 07:40 on Wednesday, October 20, 2004
I think it's bad form to put out code like this that's no use in the real world. (because it gives an error if you submit without choosing a button)

It would be nice if the author could address this and maybe correct their code so it handles the 'no-selection' instance. The least they should do is acknowledge the deficiencies of the code and point us in the right direction to get the problem fixed.

Mancos - your suggestion of putting one button in as pre-selected, whilst very nifty, is no good for me as I don't want to add bias to the users selection.


To post comments you need to become a member. If you are already a member, please log in .

 



RELATED ARTICLES
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.
Creating a Dynamic Reports using ASP and Excel
by Jeff Anderson
A simple way to generate Excel reports from a database using Excel.
Create an ASP SQL Stored Procedure
by Jeff Anderson
A beginners guide to setting up a stored procedure in SQL server and calling it from an ASP page.
ASP Shopping Cart
by CodeToad Plus!
Complete source code and demo database(Access, though SQL compatible) to an ASP database driven e-commerce shopping basket, taking the user through from product selection to checkout. Available to CodeToad Plus! Members
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.
Creating an SQL Trigger
by Jeff Anderson
A beginners guide to creating a Trigger in SQL Server
MagicGrid
by Abhijeet Kaulgud
MagicGrid is an all-in-one grid for ASP programmers. It is a 3 Level Hierarchial Grid. You can Add, Edit, Delete Items under all the three levels. You can also cut-copy-paste Items from one level to other, It happens just by drag & drop!
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.NET Forum Source Code
by ITCN
Complete open source website Forum and Discussion Board programmed in Microsoft dot Net 1.1 Framework with Visual Basic.
The asp:listbox control
by David Sussman, et al
The next HTML server control that we'll look at, <asp:listbox>, is very much related to <asp:dropdownlist>.








Recent Forum Threads
• Re: sorting and Linked list
• Re: need help linked list
• Re: Help with arrays
• Re: Reading from a file
• Re: Why Use Method?
• Re: Help with a simple program
• Re: need help with quiz
• Re: Help with filesystem object & displaying in a table
• Re: Genetic Algorithm Help


Recent Articles
Multiple submit buttons with form validation
Understanding Hibernate ORM for Java/J2EE
HTTP screen-scraping and caching
a javascript calculator
A simple way to JTable
Java Native Interface (JNI)
Parsing Dynamic Layouts
MagicGrid
Caching With ASP.Net
Creating CSS Buttons


Site Survey
Help us serve you better. Take a five minute survey. Click here!

© Copyright codetoad.com 2001-2005