Creating a DataBound List of Radio Buttons, Part 2

By Scott Mitchell

In Part 1 we looked at how to bind a DataReader to a radio button list, but how do we respond to the user's choice? In this part we'll look at how to display a list of books for the particular publisher the user selected from the databound radio button list!

- continued -

Responding to a User's Radio Button Choice
What we'd like to accomplish is to allow the user to choose a radio button option, click a button, and have the chosen publisher's books appear. So, to accomplish this, we'll need to first add a button control after the radio button list control in our HTML section:

<html> <body> <form runat="server"> <b>Choose a Publisher's Books to View</b><br> <asp:radiobuttonlist id="radlstPubs" runat="server" DataValueField="PublisherID" DataTextField="Name" /> <br> <asp:button id="btnViewBooks" runat="server" Text="View Published Books" OnClick="btnViewBooks_Click" /> </form> </body> </html>

Note that the btnViewBooks button control's OnClick event handler was wired up to the btnViewBooks_Click event handler. This is an event handler that we'll create in our server-side script block. This event handler will need to ascertain what radio button option was selected and construct a SQL query based upon that information. (This SQL query will snag all of the books out of the tblBooks table whose PublisherID matches the ID of the selected publisher from the radio button list.) Furthermore, a DataReader (or DataSet) should be populated with the results of this custom SQL query, and that DataReader should be bound to a DataGrid Web control in order to display the books for the publisher.

So, we'll need one more Web control, a DataGrid, which will be used to display the books published by the selected publisher. The DataGrid Web control I used can be seen below, it should come after the button control (which has been removed for brevity). Feel free to make any stylistic changes to the DataGrid:

<html> <body> <form runat="server"> ... CONTENT REMOVED FOR BREVITY ... <p align="center"> <asp:label id="lblTitle" runat="server" Font-Name="Verdana" Font-Size="Large" Font-Bold="True" /> <asp:datagrid id="dgBooks" runat="server" Font-Name="Verdana" Font-Size="Smaller" HeaderStyle-BackColor="Purple" HeaderStyle-ForeColor="White" HeaderStyle-Font-Size="Small" HeaderStyle-Font-Bold="True" AutoGenerateColumns="False"> <Columns> <asp:BoundColumn HeaderText="Book Title" HeaderStyle-HorizontalAlign="Center" DataField="Title" /> <asp:BoundColumn HeaderText="Synopsis" HeaderStyle-HorizontalAlign="Center" DataField="Description" /> </Columns> </asp:datagrid> </p> </form> </body> </html>

Notice that a label Web control, lblTitle, was also added. This will be used to display a nice-looking heading above the DataGrid Web control.

All that's left to tackle is writing the btnViewBooks_Click event handler, which will fire whenever the user clicks the btnViewBooks button control. Remember that this event handler needs to populate a DataReader with a list of books that were published by the selected publisher.

... PAGE_LOAD EVENT HANDLER REMOVED FOR BREVITY ... Sub btnViewBooks_Click(sender as Object, e as EventArgs) 'If the user has not selected an item from the radiobuttonlist, 'do nothing If radlstPubs.SelectedItem Is Nothing then Exit Sub 'Create a connection Dim myConnection as New _ SqlConnection(ConfigurationSettings.AppSettings("connectionString")) 'Create the command object, passing in the SQL string Dim strSQL as String = "SELECT Title, Description FROM tblBooks " & _ " WHERE PublisherID = " & radlstPubs.SelectedItem.Value & _ " ORDER BY Title" Dim myCommand as New SqlCommand(strSQL, myConnection) myConnection.Open() dgBooks.DataSource = myCommand.ExecuteReader(CommandBehavior.CloseConnection) dgBooks.DataBind() lblTitle.Text = "Books Published by " & radlstPubs.SelectedItem.Text End Sub </script>

[View a live demo!]

In the btnViewBooks_Click event handler we begin by making sure that a radio button option was selected. If it wasn't, we simple exit the event handler. Next, we connect to the database and populate a SqlDataReader with the books that were published by the selected publisher. Note that we are creating a custom SQL string, returning records where the PublisherID column in the tblBooks table is equal to the selected radio button's Value property (which, if you recall, was the PublisherID of the tblPublishers table (the primary key)).

Once we have our populated SqlDataReader, we can simply bind it to the dgBooks DataGrid Web control. This, as you can see, takes only two lines of code! Finally, we set the lblTitle label control to a descriptive title. And... we're done! That's it!

Conclusion
All in all, we created a very useful and visually appealing data-driven Web application in a matter of minutes! Amazing. Of course, radio button lists are not the only form element that can be data bound. Listboxes (see Creating Databound DropDown Lists in ASP.NET) and checkbox lists can also be data bound in a similar fashion. Well, I hope you learned something new and are as excited about ASP.NET as I am!

Happy Programming!

By Scott Mitchell

Attachments:

View a live demo!

Read Creating Databound DropDown Lists in ASP.NET

Visit the ASP.NET Article Index