How to allow html control inside a listitem?

Question

The following compile error occurs:

Parser Error Message: The 'Text' property of 'asp:ListItem' does not allow child objects.

Source Error:

Line 468: </asp:ListItem>
Line 469: <asp:ListItem Value="3">
Line 470: Search only continuing stories with at least&nbsp; <input runat="server" id="episodetb" Value="0" style="width:50px" />
Line 471: episodes
Line 472: </asp:ListItem>

When my original code is like this:

< asp:RadioButtonList ID="ContStoryRadioButtonList" DataTextFormatString=" {0}" CellPadding="2" runat="server">
<asp:ListItem Value="0">
Search singular and continuing stories
</asp:ListItem>
<asp:ListItem Value="1">
Search only singular stories
</asp:ListItem>
<asp:ListItem Value="2">
Search only continuing stories
</asp:ListItem>
<asp:ListItem Value="3">
Search only continuing stories with at least&nbsp; <input runat="server" id="episodetb" Value="0" style="width:50px" />
episodes
</asp:ListItem>
</asp:RadioButtonList >

Please help me with this. thx in advance

Answer 1

You can create this using the literal control and adding the controls to a panel or placeholder.

VB

Dim list_startul as New Literal
list_startul.text = "<ul>"

Dim list_li as New Literal
lisstt_li.text = "<li><label>Hello!</label></li>"

Dim list_endul as New Literal
list_endul.text = "</ul>"

panel.controls.add(list_startul)
panel.controls.add(list_li)
panel.controls.add(list_endul)

Answer 2

Unfortunately a ListItem object doesn't have any child controls. You could write your own control doing something similar. Basically you just have to write a <ul> tag with <li/> subitems.

Answer 3

You cannot have a server control inside a ListItem. You could have a text control beside the RadioButtonList and fake it, or you could write you own control.

Answer 4

You can't have HTML in a ListItem, and that's it. You'll have to make your thing out of separate radiobuttons.

Answer 5

One work around is to take the runat="server" off the input control. You can have client side controls in there (although the parser may suggest not). Capture the keyup of the input control with jQuery and store the value from the textbox in a server hidden field.

<asp:RadioButtonList ID="Services" runat="server">
    <asp:ListItem Text="Option 1" Value="1">
        Enter data:  <input id="test" type="text"/>
    </asp:ListItem>
<%--(...more listitems)--%>
</asp:RadioButtonList>
<asp:HiddenField ID="NewValue" runat="server />

JQuery -

$('#test').keyup(function() {
    $('#<%=NewValue.ClientID%>').val(this.value);
});