Using the Radio Button List

Chapter 4 - Data Readers, Command Objects, and Web Server Controls
byJohn Kauffman, Fabio Claudio Ferracchiatiet al.?
Wrox Press ?2002

In a sense, radio buttons have the same logic as the list boxes (in single selection mode) that we just examined: the visitor sees many choices, but can pick only one. Even the name of the control -RadioButtonList - is a reminder that they're in the list family of data-aware controls. (Note that ASP.NET also supports a RadioButton control that behaves as an individual control, not as part of a list.) Each button in the list has a Text property, which is displayed next to it, and a Value property, which is hidden from the user but can be utilized programmatically. As with list boxes, this allows us to (for example) show the visitor a useful description of a record (such as a name), but use the record's ID number for coding purposes.

Vertical lists of more than a few radio buttons can take up a lot of precious space on a page, so ASP.NET allows a more efficient 'matrix' layout, through three "Repeat" properties. The first, RepeatLayout, determines how IIS will render the control into HTML: a value of Flow creates multiple buttons within HTML <span> tags, while a value of Table creates an HTML <table> structure on the page. Unless you have a CSS style that must apply to a <span>, the default table setting is better for a tidy appearance.

The second property in this set is RepeatDirection. Setting this to Horizontal renders the items in order from left to right, then continuing in the second row from left to right. Vertical, on the other hand, is the default setting, and renders the items in order running down the left column, and then continuing from the top of the next column to the right.

Third, you can set the number of columns you want with the RepeatColumns property. In fact, you should always set this property, because the default value of 0 means the buttons will all be in one line, and this may cancel out your other "Repeat" properties.

If we have selected RepeatLayout = "Table", we can also set CellSpacing and CellPadding in pixel units - spacing refers to the distance between cells, while padding gives you the option to add extra space between the text and the inside of each cell. (Because there is no line defining the edge of the cells in these tables, the two options amount to more or less the same thing.) Both values of RepeatLayout also support the Text Align property, which dictates the location of the text relative to the button itself (Left or Right). Radio buttons do not have as many formatting features as tables or data grids, but they do allow you to meet some basic design needs.

Try It Out - A Radio Button List

In the last exercise, we created a page with a list box of employees and a grid that displayed more information on a selected employee. In this exercise, we'll implement the same page, but use radio buttons instead of a list box.

1. Create a new file called Radio_button.aspx, and copy and paste the code from the last exercise into it.

2. Replace all instances of "lbxEmployees" with "radEmployees" (there should be five replacements).

3. Change <asp:ListBox> to <asp:RadioButtonList>.

4. Delete the Rows attribute, as this doesn't apply to radio buttons, and fix the title and header to say "Radio Buttons" rather than "a List Box". At this stage, your server control should look something like this:

       <asp:RadioButtonList  runat="server"                         AutoPostBack="True"                         OnSelectedIndexChanged="subListChange" /> 

   

5. Next, let's work with the formatting of the buttons. Change the <asp:RadioButtonList> attributes as follows, and save the new page as Radio_button_2.aspx:

       <asp:RadioButtonList  runat="server"                         RepeatLayout="Table"                         RepeatColumns="3"                         AutoPostBack="True"                         OnSelectedIndexChanged="subListChange" /> 

6. View the result of the above changes, and notice that we've saved a lot of space by putting the buttons into three columns:

   

7. Add another attribute to change the flow from vertical (the default) to horizontal, and see how that affects things:

       <asp:RadioButtonList  runat="server"                         RepeatLayout="Table"                         RepeatColumns="3"                         RepeatDirection="Horizontal"                         AutoPostBack="True"                         OnSelectedIndexChanged="subListChange" /> 

8. Last, increase the spacing and padding, and also set the text to appear on the left of the buttons. Do this by making the following changes:

       <asp:RadioButtonList id = "radEmployees"                 RepeatLayout = "Table"                 RepeatColumns = "3"                 RepeatDirection = "Horizontal"                 CellPadding = "5"                 CellSpacing = "10"                 TextAlign = "Left"                 AutoPostBack = "True"                 OnSelectedIndexChanged = "subListChange"                 runat = "server">    </asp:RadioButtonList> 

How It Works

This example features no new code with regard to the connection, command, or data reader objects. In the first version of the new page, though, we can see how just a few quick changes to the page can make a big difference to the display. Open it up again, and take a look at the source code in your browser. ASP.NET has generated the <table> elements on our behalf, as follows:

    <table  border="0">      <tr>        <td>          <input                  type="radio"                 name="radEmployees"                 value="5"                 onclick="_doPostBack('radEmployees_0','')"                 language="javascript" />          <label for="radEmployees_0">Buchanan</label>        </td>      </tr>      ... 

In the second version, the layout responds to simple changes in the properties. To help you remember, you might want to look at the result of deleting the RepeatColumns attribute - it reverts to the default value of 0, which means back to one column, and an inefficient layout.