Confusing creating HTML List base on array

Question

I has a problem to creating HTML-list base on array in c#. I tried using split.string, foreach, and etc,. but still can't figured out the logic... :(..
Anyone can help me to solve my problem ?
Here is my Array

        List<string> listMenu = new List<string>();
        listMenu.Add("Dashboard~View1");
        listMenu.Add("Dashboard~View2");
        listMenu.Add("Customer");
        listMenu.Add("Part");
        listMenu.Add("Part~Part1~Part11");
        listMenu.Add("Part~Part1~Part12");
        listMenu.Add("Part~Part2~Part21");
        listMenu.Add("Part~Part2~Part22");
        listMenu.Add("Part~Part3~Part31~Part311");
        listMenu.Add("Part~Part3~Part31~Part312");
        listMenu.Add("Branch");

And I want to create HTML list like this :

<div id=menu>
    <ul>
    <li>Dahboard
        <ul> 
            <li> View1 </li>
            <li> View2 </li>
        </ul>
    </li>
    <li> Customer 
    </li>
    <li> Part
        <ul>
            <li> Part1
                <ul>
                    <li> Part11 
                    </li>
                    <li> Part12 
                    </li>
                </ul>
                </li>
            <li> Part2
                <ul>
                    <li> Part21 
                    </li>
                    <li> Part22 
                    </li>
                </ul>
            </li>
            <li> Part3
                <ul>
                    <li> Part31 
                        <ul>
                            <li> Part 311 
                            </li>
                        </ul>
                    </li>
                    <li> Part 312 
                    </li>
                </ul>
            </li>
        </ul>   
    </li>
    <li> Branch 
    </li>
    </ul>
</div>

You are trying to represent a hierarchical menu structure using a flat list data structure, which is not ideal. If you have control over the listMenu data structure, then consider using some type of tree/linked list data structure. This will make it easier to display it as an hierarchical HTML menu. — Polyfun, Sep 22 '16 at 11:00

score 0 · Answer 1 · edited May 23 '17 at 12:32

There are two ways you can use to create this list dynamically:

You can use HtmlGenericControl structure as below:

    HtmlGenericControl c = new HtmlGenericControl("div");
    c.Attributes.Add("id", "menu");
    HtmlGenericControl ul1 = new HtmlGenericControl("ul");
    c.Controls.Add(ul1);
    HtmlGenericControl li1 = new HtmlGenericControl("li");
    li1.InnerText = "Dashboard";
    ul1.Controls.Add(li1);

    mainDiv.Controls.Add(c);

You can create a string with StringBuilder and assign this string as InnerHtml to your main div, as below:

    StringBuilder s = new StringBuilder();
    s.Append(@"<div id=menu>
                <ul>
                <li>Dahboard
                    <ul>
                        <li> View1 </li>
                        <li> View2 </li>
                    </ul>
                </li>
                </ul>
            </div> "); //you can alter this string dynamically
    mainDiv.InnerHtml = s.ToString();

You should add System.Web.UI.HtmlControls as using to use HtmlControls

You should add System.Text as using in order to use StringBuilder.

Bonus: You can find from here why you should use StringBuilder instead of adding string with '+'.

Confusing creating HTML List base on array

1 Answers1