Creating a DataBound List of Radio ButtonsBy Scott Mitchell
|For More Information on ASP.NET|
|This article examines how to create a databound listbox using ASP.NET. For more information on ASP.NET be sure to check out the articles in the ASP.NET Article Index. The code in this article is based on the Beta 2 version of ASP.NET. To learn more about the free ASP.NET Beta 2, be sure to check out this FAQ.|
A common task Web developers face is creating a form element (such as a series of checkboxes, radio buttons, or a listbox) whose members are populated by the contents of a database table. This is quite possible (and quite easy) to accomplish with ASP.NET In fact, in a previous article (Creating Databound DropDown Lists in ASP.NET), we examined how to create a databound listbox. In this article, we'll examine how to create a series of radio buttons whose values are automagically populated from a database table! We'll also look at how to respond to the user selecting a particular option and showing more detailed information based upon the radio button selected.
On 4Guys there is a Sample On-Line Chapters page, which lists a number of books that have free, on-line sample chapters. All of this information is stored in a database that contains two tables:
tblPublishers contains a row for each publisher that has a book that appears
in the sample chapters listing, while the
tblBooks table contains a row for each
sample book. Note that the
tblBooks table contains a
column which serves as a foreign key to the
tblPublishers table, tying a particular
publisher to a particular book.
Wouldn't it be nice to generate a list of radio buttons based upon the publishers in the
tblPublishers table? From this list, the user could select a particular publisher,
at which point, the user would be shown a listing of books published by that particular publisher.
In creating the radio button list, we could hard code the list of publishers, but that would
be subject to change any time we added or removed publishers from the
Ideally, the radio button list would be dynamically generated based upon the values in
If you'd like to see what the end result will look like, check out the live demo. Pretty nice looking, eh? Realize that the radio button list was created dynamically using databind (essentially three lines of code in total). And this entire page, from start to finish, took me about four minutes to write. (I type fast. :-))
Creating the Databound Radio Button List
Creating a databound series of radio buttons is painfully simply with ASP.NET. We only really need to do three things:
- Create the
asp:radiobuttonlistWeb control, specifying the database columns we want to bind to the radio buttons' displayed text values and the hidden values that are passed along when the form is submitted.
- Write the code to populate a DataReader (or DataSet) with the applicable database information.
- Databind the DataReader (or DataSet) to the
That's it! So, let's examine each of these three steps. First, create the needed Web control in the HTML section of your ASP.NET Web page.
The two most important things to notice is that we set the
DataTextField properties. Both
properties should map to a column name in the database table that we wish to bind the radio
button list to. The
DataTextField property are the names that will be visually
displayed next to each radio button; the
DataValueField are the hidden values
that are associated with each radio button. Also note that the radio button list was placed
within a WebForm (the
form tag with a
Now that we've tackled our first step, let's look at performing our remaining two steps:
reading the database table
tblPublishers into a DataReader and binding the
populated DataReader to the radio button list!
In the above
Page_Load event handler we accomplish our two steps: populating a
DataReader (in this case a
SqlDataReader) with the contents of the
tblPublishers table; and binding the resulting DataReader to our radio button list,
radlstPubs. Note that we only wish to run this binding code on the first visit
to the page (more on why later), hence we only perform the databinding if
is False, meaning that the page has not yet been posted back.
Now that we've looked at how to create a databound radio button list, let's turn our attention to responding to the user's selection of a particular radio button. In Part 2 we'll examine this aspect and the remainder of our application!