Blog

The thing that annoys me when using ASP.NET controls is the amount of cluttered HTML that gets generated. It sometimes reminds of my early web development days when Dreamweaver was the development tool of choice. That was a long time ago!

By default when using a Checkbox or Radio button list, the following markup is generated:

<table id="MainContent_TestCheckList">
    <tbody>
            <tr>
                <td>
                    <input type="checkbox" value="1" name="ctl00$MainContent$TestCheckList$0" id="MainContent_TestCheckList_0"><label for="MainContent_TestCheckList_0">Item 1</label>
                </td>
                <td>
                    <input type="checkbox" value="2" name="ctl00$MainContent$TestCheckList$1" id="MainContent_TestCheckList_1"><label for="MainContent_TestCheckList_1">Item 2</label>
                </td>
                <td>
                    <input type="checkbox" value="3" name="ctl00$MainContent$TestCheckList$2" id="MainContent_TestCheckList_2"><label for="MainContent_TestCheckList_2">Item 3</label>
                </td>
                <td>
                    <input type="checkbox" value="4" name="ctl00$MainContent$TestCheckList$3" id="MainContent_TestCheckList_3"><label for="MainContent_TestCheckList_3">Item 4</label>
                </td>
            </tr>
    </tbody>
</table>

Yuck!

Thankfully, this control contains a property called “RepeatLayout” that gives us the option to render our list of checkboxes or radio buttons in a much nicer way.

Flow

Rendered within a <span> container.

<span id="MainContent_TestCheckList">
    <input type="checkbox" value="1" name="ctl00$MainContent$TestCheckList$0" id="MainContent_TestCheckList_0"><label for="MainContent_TestCheckList_0">Item 1</label>
    <input type="checkbox" value="2" name="ctl00$MainContent$TestCheckList$1" id="MainContent_TestCheckList_1"><label for="MainContent_TestCheckList_1">Item 2</label>
    <input type="checkbox" value="3" name="ctl00$MainContent$TestCheckList$2" id="MainContent_TestCheckList_2"><label for="MainContent_TestCheckList_2">Item 3</label>
    <input type="checkbox" value="4" name="ctl00$MainContent$TestCheckList$3" id="MainContent_TestCheckList_3"><label for="MainContent_TestCheckList_3">Item 4</label>
</span>

OrderedList or UnorderedList

Rendered within a <ul> (unordered list) or <ol> (ordered list). Note: Multi-column layouts (RepeatColumns attribute) are not supported when using this option.

<ul id="MainContent_TestCheckList">
    <li><input type="checkbox" value="1" name="ctl00$MainContent$TestCheckList$0" id="MainContent_TestCheckList_0"><label for="MainContent_TestCheckList_0">Item 1</label></li>
    <li><input type="checkbox" value="2" name="ctl00$MainContent$TestCheckList$1" id="MainContent_TestCheckList_1"><label for="MainContent_TestCheckList_1">Item 2</label></li>
    <li><input type="checkbox" value="3" name="ctl00$MainContent$TestCheckList$2" id="MainContent_TestCheckList_2"><label for="MainContent_TestCheckList_2">Item 3</label></li>
    <li><input type="checkbox" value="4" name="ctl00$MainContent$TestCheckList$3" id="MainContent_TestCheckList_3"><label for="MainContent_TestCheckList_3">Item 4</label></li>
</ul>

Table

We won’t be using this option.

At the moment I am working on a Survey that contains tonnes of RadioButtonList controls that users will use to respond to the numerous questions I have on the website. All was going well until I thought about how I would find a quick and efficient way to enter all the RadioButtonList entries into my SQL database without having to do the following:

_rblBLL.InsertResults(1, rblist1.SelectedValue);
_rblBLL.InsertResults(2, rblist2.SelectedValue);
_rblBLL.InsertResults(3, rblist3.SelectedValue);
...
...
...
...

(InserResults() is my BLL function)

As you can see above, this is indeed a long winded way of inserting all my RadioButtonList entries to the database.

But I found a better way by using the FindControl() method:

for (int i=1; i < questionNo; i++)
{      
    RadioButtonList rbl = (RadioButtonList)this.FindControl("rblist" + i);

    if(rbl != null)
    {
         _rblBLL.InsertResults(i, rbl.SelectedValue);
    }
} 

As you can see, I created a for loop that will iterate through all the RadioButtonLists by incrementing the end value of RadioButtonList ID. So you will have to adopt a naming convention that has a number at the end as shown I have used above.