Add to List from codebehind C# Asp.net

I have a UL list in a ASPX page:

<ul id="tabs">
 <li id="tab1"><a href="ztab1.htm" rel="nofollow noreferrer noopener">Tab 1</a></li>
 <li id="tab2"><a href="ztab2.htm" rel="nofollow noreferrer noopener">Tab 2</a></li>
 <li id="tab3"><a href="ztab3.htm" rel="nofollow noreferrer noopener">Tab 3</a></li>
 <li id="tab4"><a href="ztab4.htm" rel="nofollow noreferrer noopener">Tab 4</a></li>
 </ul>

I would like to add list items dynamically from codebehind, including the href entry for each new list item.

How?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You need to mark your ul as a server side control, then treat the ‘new item’ as a HtmlGenericControl and insert it into the control collection:

<ul runat="server" id="tabs">

To add the item, create a new element and add it:

HtmlGenericControl li = new HtmlGenericControl("li");
tabs.Controls.Add(li);

HtmlGenericControl anchor = new HtmlGenericControl("a");
anchor.Attributes.Add("href", "page.htm");
anchor.InnerText = "TabX";

li.Controls.Add(anchor);

Method 2

Use asp:bulletedList and your list will be much easier.

<asp:BulletedList id="blTabs" 
  BulletStyle="Disc"
  DisplayMode="LinkButton" 
  runat="server">
    <asp:ListItem Value="ztab1.htm">tab1</asp:ListItem>
    <asp:ListItem Value="ztab2.htm">tab2</asp:ListItem>
    <asp:ListItem Value="ztab3.htm">tab3</asp:ListItem>
</asp:BulletedList>

Code Behind:

    ListItem li = new ListItem();
    li.Value = "*.html";  //html goes here i.e.  xtab1.html
    li.Text = "New Text";  //text name goes i.e. here tab1
    blTabs.Items.Add(li);

Method 3

This result is the same as GenericTypeTea’s, but the difference is the HTML is ‘written’ in the code behind and injected into the page.

In your markup:

<asp:Literal id="litMarkup" runat="server" />

In your code behind:

List<string> locations  // however this initialized 

StringBuilder sb = new StringBuilder();

sb.Append("<ul id="tabs">");

for (int i = 0; i < locations.Count; i++)
{
   sb.Append("<li id="tab" + i.ToString() + ""><a href="" + locations[i] + "">Tab " + i.ToString() + "</a></li>");
}

sb.Append("</ul>");

litMarkup.Text = sb.ToString();

Method 4

You can create a dynamic UL by using an asp:Repeater Control

You can use repeater in following way, in your .aspx file

<asp:Repeater ID="menu_ul_1" runat="server">
    <HeaderTemplate>
    <ul class="my-menu">
    </HeaderTemplate>
    <ItemTemplate>
        <li>
        <a href='<%# Eval("href_li")%>'>
        <%# Eval("DisplayText")%></a>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

And you can put dynamic data via code behind in .aspx.cs file

protected void Page_Load(object sender, EventArgs e)
{
    DataTable newsDataTable = new DataTable();

    // add some columns to our datatable
    newsDataTable.Columns.Add("href_li");
    newsDataTable.Columns.Add("DisplayText");

    for (int i = 1; i <= 5; i++)
    {
        DataRow newsDataRow = newsDataTable.NewRow();
        newsDataRow["href_li"] = "?sc=item_" + i;
        newsDataRow["DisplayText"] = "List Item # "+i;
        newsDataTable.Rows.Add(newsDataRow);
    }
    menu_ul_1.DataSource = newsDataTable;
    menu_ul_1.DataBind();
}

Result: You will get following html through this code

<ul class="my-menu">
    <li><a href='?sc=item_1'>List Item # 1</a> </li>
    <li><a href='?sc=item_2'>List Item # 2</a> </li>
    <li><a href='?sc=item_3'>List Item # 3</a> </li>
    <li><a href='?sc=item_4'>List Item # 4</a> </li>
    <li><a href='?sc=item_5'>List Item # 5</a> </li>
</ul>

Method 5

nested it with parent child,use your elements as below

Dim newLi = New HtmlGenericControl("li")
        Dim anchor = New HtmlGenericControl("a")
        anchor.Attributes.Add("href", itemrow.Item("reg_url").ToString().Trim())
        anchor.InnerText = itemrow.Item("conf_name")
        newLi.Controls.Add(anchor)
        eventList.Controls.Add(newLi)

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0