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.
How It WorksThis 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. |