Add <ul> <li> list in aspx from code-behind

Question

I am trying to make nested ul & li tags in code behind. For that i wrote priliminary code in my .aspx page

<ul class="dropdown" runat="server" id="tabs"> </ul>

My C# Code

DatTable dtOutput = Generix.getData("Get Some Data");

foreach (DataRow drOutput in dtOutput.Rows)
{
    HtmlGenericControl li = new HtmlGenericControl("li");                    
    tabs.Controls.Add(li);
    HtmlGenericControl anchor = new HtmlGenericControl("a");
    anchor.Attributes.Add("href", "#");
    anchor.InnerText = Convert.ToString(drOutput["ModuleGroup"]);
    li.Controls.Add(anchor);
    HtmlGenericControl ul = new HtmlGenericControl("ul");

    DatTable dtOutputList = Generix.getData("Get another set of Data");

    foreach (DataRow drOutputList in dtOutputList.Rows)
    {                        
        HtmlGenericControl ili = new HtmlGenericControl("li");
        ul.Controls.Add(ili);
        HtmlGenericControl ianchor = new HtmlGenericControl("a");
        foreach (DataColumn dcOutputList in dtOutputList.Columns)
        {
            ianchor.Attributes.Add("href", Convert.ToString(drOutputList["ModuleFileName"]));
        }
        ianchor.InnerText = Convert.ToString(drOutputList["ModuleName"]);
        ili.Controls.Add(ianchor);                        
    }
    //tabs.Controls.Add(li);
}

When i run my project and do inspect element on my menu i see something like

<ul id="ctl00_tabs" class="dropdown">
    <li class="">
        <a href="#">Master</a>
    </li>
    <li class="">
        <a href="#">Cards Management</a>
    </li>
    <li class="">
        <a href="#">Authorization</a>
    </li>
    <li class="">
        <a href="#">Loyalty</a>
    </li>
    <li class="">
        <a href="#">Reports</a>
    </li>
</ul>

No Nested ul tags are created inside li ?? Why ??

For example :-

<ul id="ctl00_tabs" class="dropdown">
    <li class="">
        <a href="#">Master</a>
        <ul>
            <li><a href="Some.aspx"><span>Some Name</span></a></li>
            <li><a href="Some1.aspx"><span>Some Name 1</span></a></li>
        </ul>
    </li>
</ul>

Answer 1

You can try this code:

aspx:

<form id="form1" runat="server">
        <div>


            <asp:PlaceHolder ID="ControlContainer"
                runat="server" />
        </div>
</form>

cs:

HtmlGenericControl tabs = new HtmlGenericControl("ul");
            tabs.ID = "myTopnav";
            tabs.Attributes.Add("class", "topnav");

            HtmlGenericControl li = new HtmlGenericControl("li");
            HtmlGenericControl ianchor = new HtmlGenericControl("a");

            li = new HtmlGenericControl("li");
            ianchor = new HtmlGenericControl("a");
            ianchor.ID = "Home";
            ianchor.Attributes.Add("href", "#home");
            ianchor.Attributes.Add("class", "active");
            ianchor.InnerText = "Home";
            li.Controls.Add(ianchor);
            tabs.Controls.Add(li);


            li = new HtmlGenericControl("li");
            ianchor = new HtmlGenericControl("a");
            ianchor.ID = "News";
            ianchor.Attributes.Add("href", "#");
            ianchor.InnerText = "News";
            li.Controls.Add(ianchor);
            tabs.Controls.Add(li);

            ControlContainer.Controls.Add(tabs);

Answer 2

You can add LI items to UL item using the c# code by the following

<ul class="respond" id="feedbackTab" runat="server"></ul> 

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

HtmlGenericControl anchor = new HtmlGenericControl("a");
anchor.Attributes.Add("href", "aboutme.aspx");
anchor.InnerText = "Tab Text";

For More info you can visit this link: http://www.sharepointsol.com/2014/09/dynamically-adding-li-to-ul.html

Answer 3

You see where you're calling li.Controls.Add(anchor)? You're not calling li.Controls.Add(ul) anywhere so your created uls aren't actually being added anywhere on the page.

Answer 4

The problem here is that you are adding multiple Href attributes to your anchor. Possibly overriding the href each time. Change your code to this:

foreach (DataRow drOutput in dtOutput.Rows)
{
    HtmlGenericControl li = new HtmlGenericControl("li");
    tabs.Controls.Add(li); // tabs is id of ul tag which is runat=server
    foreach (DataColumn dcOutput in dtOutput.Columns)
    {
        HtmlGenericControl anchor = new HtmlGenericControl("a");
        anchor.Attributes.Add("href", Convert.ToString(drOutput["ModuleFileName"]));
        anchor.InnerText = Convert.ToString(drOutput["ModuleName"]);
        li.Controls.Add(anchor);
    }
}