ansaurus

Question

Is there a way to programmatically add items to <UL> element?

Answer 1

+3 A:

The easiest way to add items to an unordered list is to use the repeater control.

You can bind your list of items to the repeater and then output each list item as required.

 <asp:Repeater ID="rpt1" Runat="server">
 <HeaderTemplate>
  <ul>
 </HeaderTemplate>

  <ItemTemplate>
    <li>
      <%# DataBinder.Eval(Container.DataItem, "Item") %>
   </li>
  </ItemTemplate>

  <FooterTemplate>
    </ul>
  </FooterTample>
 </asp:Repeater>

Then in your C# (or whatever server-side language you're using) you do:

DataSet listItems = GetTheListItemsMethod();

rptr1.DataSource = listItems;
rptr1.DataBind();

Jamie Dixon 2010-07-01 14:47:56

Although this is often a good approach, the question asks for a programmatic solution, not a declarative one. I assume this implies that it should be done from the code-behind.

Greg 2010-07-01 14:51:12

Even better, put the <ul> and </ul> into the repeater's <HeaderTemplate> and <FooterTemplate> elements. That way you won't get an empty <ul> when you've got no list items... Yep, just like that :)

Olly Hodgson 2010-07-01 14:52:04

Hmm. I hear you Greg and it's a fair if someone semantic point.

Jamie Dixon 2010-07-01 14:52:23

Good point Olly. I've updated the code. :)

Jamie Dixon 2010-07-01 14:54:21

@Olly - I just tried that and it still created the `<ul></ul>`. That was doing a `repeater.DataSource = new List<class>();`. So it seems that if `list.Count == 0`, the header/footer are rendered anyway and if `repeater.DataSource = null`, they aren't rendered.

Nelson 2010-07-01 14:54:36

Using a HeaderTemplate and FooterTemplate is a good idea as making the entire `Repeater` invisible via the codebehind is more intuitive when it is done that way. However, as Nelson said an empty `Repeater` will still spit out the header and footer. There are some databound controls which have support for special behavior when empty.

Brian 2010-07-01 15:00:10

@Nelson and @Brian - Learn something new everyday...

Olly Hodgson 2010-07-01 15:28:57

Answer 2

+8 A:

You can just create new HtmlGenericControls and add them into the Controls property of the UL control? So, given markup as follows:

<ul runat="server" id="foo_bar">
    <li>Item</li>
</ul>

You can do this (where itemList is a list of things you want to add as LIs):

foreach (var item in itemList)
{
    HtmlGenericControl newLi = new HtmlGenericControl("li");
    newLi.InnerText = item.DisplayText;
    foo_bar.Controls.Add(newLi);
}

If you were rending out an array of strings, i.e:

string[] itemList = new string[] { "1", "2", "3" };
foreach (string item in itemList)
{
    HtmlGenericControl newLi = new HtmlGenericControl("li");
    newLi.InnerText = item;
    foo_bar.Controls.Add(newLi);
}

You would see the following results (with my original markup):

Item
1
2
3

GenericTypeTea 2010-07-01 14:53:01

Answer 3

A:

there is also System.Web.UI.WebControls.BulletedList

you can either bind to a datasource

var bulletedList = new BulletedList();
bulletedList.DataSource = myData;
bulletedList.DataBind();

or add items individually to the Items collection

bulletedList.Items.Add( "item1" );
bulletedList.Items.Add( "item2" );

don't forget to add it to something on the page, or you'll never see it

Page.Controls.Add( bulletedList );

dave thieben 2010-07-01 15:53:18

Answer 4

A:

//Define a unordered list inside a div tag and add an id field and runat=server to the //tag so you can get to the control from the code behind page.

//Code behind code example

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim y As ArrayList = New ArrayList()
    y.Add("first")
    y.Add("second")
    y.Add("three")

    For Each z As String In y
        Dim x2 As HtmlGenericControl = New HtmlGenericControl("li")
        x2.InnerText = z.ToString
        ted.Controls.Add(x2)
    Next

End Sub

Chuckie 2010-07-02 02:37:28

ansaurus

tags:

views:

answers:

Is there a way to programmatically add items to <UL> element?

related questions