ASP.NET RadioButtonList: the element 'br' cannot be nested within the element 'listitem'

Question

for example i have this radio button.

(o) item1  (o) item 2

however, i want it to be like:

(o) item1   (o) item2
  line here   line here

My current markup is:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" Width="650px" Font-Size="Smaller">
    <asp:ListItem Selected="True" Value="0">Relax<br>(MY MAN)</asp:ListItem>
    <asp:ListItem Value="1">Relax Again<br>(My Man)</asp:ListItem>
    <asp:ListItem Value="2">Relax Again 2<br>(MyMan)</asp:ListItem>
    <asp:ListItem Value="3">Relax 3<br>(My Man)</asp:ListItem>
    <asp:ListItem Value="4">Relax 4<br>(My Man)</asp:ListItem>
    <asp:ListItem Value="5">Relax 5<br>(My Man)</asp:ListItem>
    <asp:ListItem Value="6">Relax 6<br>(My Man)</asp:ListItem>
</asp:RadioButtonList>

But it generates the following validation error messages: the element 'br' cannot be nested within the element 'listitem'.

I posted my answer. Although your markup shows errrors, it actually works, doesn't it? — ConnorsFan, May 02 '16 at 15:49
yes it works perfectly the way it should but then again getting these yellow warnings which is something i am trying to avoid. — JT4U, May 02 '16 at 15:50

score 2 · Answer 1 · edited May 23 '17 at 12:01

Note: the solution given here actually works but is more complicated than necessary. See J Talati's answer to his own post for the best answer.

If you want to have a markup without errors, you can reproduce the RadioButtonList with separate RadioButtons sharing the same GroupName, in a table (which is the way it is rendered by the RadioButtonList):

<table id="RadioButtonTable1" runat="server" class="radioList">
    <tr>
        <td>
            <asp:RadioButton runat="server" GroupName="RadioList" Checked="true" Value="0" Text="Relax<br />(MY MAN)" />
        </td>
        <td>
            <asp:RadioButton runat="server" GroupName="RadioList" Value="1" Text="Relax Again<br />(My Man)" />
        </td>
        <td>
            <asp:RadioButton runat="server" GroupName="RadioList" Value="2" Text="Relax Again 2<br />(MyMan)" />
        </td>
        ...
    </tr>
</table>

The radioList class style allows to customize the layout:

.radioList td
{
    text-align: left;
    width: 80px;
}

Now, getting the selected value is not as simple as for a RadioButtonList. You can use the class provided by Jimmy in Better way to find control in ASP.NET:

ControlFinder<RadioButton> radios = new ControlFinder<RadioButton>();
radios.FindChildControlsRecursive(RadioButtonTable1);
foreach (RadioButton rb in radios.FoundControls)
{
    if (rb.Checked)
    {
        string value = rb.Attributes["Value"];
        ...
        break;
    }
}

The RadioButtons don't have a Value property but the attribute can be added in markup and retrieved in code-behind as indicated.

Hey i posted an answer and found a work around messing around with my code. Thanks though man! — JT4U, May 02 '16 at 18:09

score 1 · Accepted Answer · answered May 02 '16 at 18:08

<asp:radiobuttonlist id="RadioButtonList1" runat="server" repeatdirection="Horizontal" width="650px" font-size="Smaller" xmlns:asp="#unknown">
<asp:listitem selected="True" value="0" text="Relax <br>(MY MAN)"></asp:listitem>
<asp:listitem value="1" text="Relax Again<br>(My Man)"></asp:listitem>
<asp:listitem value="2" text="Relax Again 2<br>(MyMan)"></asp:listitem>
<asp:listitem value="3" text="Relax 3<br>(My Man)"></asp:listitem>
<asp:listitem value="4" text="Relax 4<br>(My Man)"></asp:listitem>
<asp:listitem value="5" text="Relax 5<br>(My Man)"></asp:listitem>
<asp:listitem value="6" text="Relax 6<br>(My Man)"></asp:listitem>

Got this to work! Woohoo! just add text property thats all.

Well done! You can accept your own answer. It will help future users who face the same problem. — ConnorsFan, May 02 '16 at 18:35
Yes, it is apparently the way it works: https://blog.stackoverflow.com/2009/01/accept-your-own-answers/. — ConnorsFan, May 02 '16 at 18:41

ASP.NET RadioButtonList: the element 'br' cannot be nested within the element 'listitem'

2 Answers2