Populate A Html List Control Using .net

I have a list defined like so:

• Item 1
• Item 2

Solution 1:

you can even use that HTML, adding runat="server" you will be able to treat it as a HTMLControl no mater what control it is, I do this often with div's

<ulid="myList"runat="server"class="myClass"><liclass="myItemClass">Item 1</li><liclass="myItemClass">Item 2</li></ul>

then you get that HTMLControl and play with it

HtmlGenericControl li;

for (int x = 3; x <= 10; x++)
{
    li = newHtmlGenericControl("li");
    li.Attributes.Add("class", "myItemClass");
    li.InnerText = "Item " + x;

    myList.Controls.Add(li);
}

you will end up with:

<ulid="myList"runat="server"class="myClass"><liclass="myItemClass">Item 1</li><liclass="myItemClass">Item 2</li><liclass="myItemClass">Item 3</li><liclass="myItemClass">Item 4</li><liclass="myItemClass">Item 5</li><liclass="myItemClass">Item 6</li><liclass="myItemClass">Item 7</li><liclass="myItemClass">Item 8</li><liclass="myItemClass">Item 9</li><liclass="myItemClass">Item 10</li></ul>

of course that you can use an ordered or unorderer list, they also below to the ASP.NET Web Controls.

<asp:BulletedList runat="server" ...

Solution 2:

You could use asp:BulletedList like

<asp:BulletedListID="MyList1"CssClass="MyClass"runat="server"><asp:ListItemText="Item1"class="MyClass" /></asp:BulletedList>

Add add code like

ListItemitem=newListItem("Item2");
item.Attributes.Add("class", "MyClass");
MyList1.Items.Add(item);

Or if for some specific reason you need to use the ul tag then you can add a runat="server" to it. E.g.

<ulid="MyList2"class="MyClass"runat="server"><liclass="MyClass">Item1</li></ul>

With code like

HtmlGenericControlli=newHtmlGenericControl("li");
li.Attributes.Add("class", "MyClass");
li.InnerText = "Item2";
MyList2.Controls.Add(li);

Solution 3:

The simplest way you can solve this problem is by using the asp repeater control

<ulid="myList"class='myClass'><asp:RepeaterID="repeaterMyList"Runat="server"><ItemTemplate><liclass="myItemClass">
   <%# Eval("Item") %>
  </li></ItemTemplate></asp:Repeater></ul>

[Edit] - Do remember to set the datasource on repeaterMyList and call databind on the repeater control in the codebehind.

repeaterMyList.DataSource = someDataTable;
repeaterMyList.DataBind();

Solution 4:

I'm assuming that there is a valid reason for you not to use the BulletedList webserver control. Anyway, this is an interesting programming exercise that illustrates the internals of the Htmlservercontrol architecture and how they map to simple HTML tags.

The HTML ul and li tags are not directly mapped as HTMLServercontrols. This means that even if you add a runat="server" attribute to the list, it's contents will not be directly accessible as listitems.

However, all controls not directly mapped as Html server controls are accessible via the HtmlGenericControl class. This makes it possible to create and modify such controls dynamically.

The solution, therefore, is twofold:

• Make the unordered list runat="server" so that you can access it in server-side code. Also, you should make the existing items in the list runat="server", else they will be only be accessible as an LiteralControl that contains the first two listitems as plain text.
• In code, access the contents of the list and add a new HtmlGenericControl of type "li" to it.

The following (bare-bones simple) page demonstrates this procedure :

---

<%@ Page Language="VB" AutoEventWireup="false" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

  PrivateShared addedItems As List(Of HtmlGenericControl)

  ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load
    IfNot Page.IsPostBack Then'On first load, instantiate the List.
      addedItems = New List(Of HtmlGenericControl)
    EndIfEndSubProtectedSub btn1_Click(ByVal sender AsObject, ByVal e As System.EventArgs)
    'Add the previously created items to the UL list.'This step is necessary because'...the previously added items are lost on postback.For i AsInteger = 0To addedItems.Count - 1
      myList.Controls.Add(addedItems.Item(i))
    Next'Get the existing no. of items in the listDim count AsInteger = myList.Controls.Count

    'Create a new list item based on input in textbox.Dim li As HtmlGenericControl = CreateBulletItem()

    'Add the new list item at the end of the BulletedList.
    myList.Controls.AddAt(count, li)
    'Also add this newly created list item to the generic list.
    addedItems.Add(li)
  EndSubPrivateFunction CreateBulletItem() As HtmlGenericControl
    Dim li AsNew HtmlGenericControl("li")
    li.InnerText = txtNewItem.Value
    li.Attributes("class") = "myItemClass"Return li
  EndFunction
</script>

<html>
<head runat="server">
  <title>Test Page</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <ul id="myList"class='myClass' runat="server">
        <li runat="server"class="myItemClass">Item 1</li>
        <li runat="server"class="myItemClass">Item 2</li>
      </ul>
      <input type="text" id="txtNewItem" runat="server" />
      <asp:Button ID="btn1" runat="server"Text="Add" OnClick="btn1_Click" />
    </div>
  </form>
</body>
</html>

Share