In ASP.NET 2.0 and 3.5 the RadioButtonList and the CheckBoxList were displayed in a table format. This created a problem for websites that were trying to access individual nodes of the RadioButtonList or CheckBoxList control. Another problem with using tables for list structures is that it does not go well with a well organized CSS website. In this article we are going to demonstrate some of the changes in ASP.NET 4.0 that allows the developer to customize how the list controls are displayed on the page.

Displaying RadioButtonList in ASP.NET 3.5:

First, take a look at the code generated when using a RadioButtonList control in ASP.NET 3.5.  



As you can see in the screenshot above the RadioButtonList is displayed as an HTML table. Although the RadioButtonList will behave correctly but the table layout structure might not be appealing to web designers.

Displaying RadioButtonList in ASP.NET 4.0:

In .NET 4.0 framework we have several different options for controlling the layout of the list controls. In this article we are going to take a brief look at all of them. The RepeatLayout property allows to setup a new layout for the list controls. The options are shown below:

1) Flow:

2) Table

3) UnorderedList

4) OrderedList


Flow Layout:

The flow layout allows the list control to be displayed with <SPAN> and <BR> tags. All the items of the list controls are embedded inside a single <SPAN> tag and each item is separated by using a <BR> tag. The screenshot below shows the rendered layout using the Flow option of the RadioButtonList control.



Table Layout:

The default layout for all list controls is the table layout. We are already familiar with the table layout since we have been using it in ASP.NET 2.0 and ASP.NET 3.5. When a RadioButtonList is rendered using Table layout the following HTML is rendered.



UnorderedList Layout:

UnorderedList layout helps to render the list controls as unordered lists. This might be the preferred layout option for web designers. The rendered output is shown below:



OrderedList:

OrderedList is similar to UnorderedList and it is rendered the same way. The screenshot below shows the OrderedList in action. One of the key differences between an UnorderedList and OrderedList is that an OrderedList is rendered with a list item number while the UnorderedList is not.



NOTE: It is important to note that the RepeatColumns property on RadioButtonList and CheckBoxList is only compatible with Table layout structure.  

Conclusion:

In this article we learned how ASP.NET 4.0 allows us to manage the layout structure of the list controls. This advancement will allow the list controls to be in-sync with the rest of the CSS design.