CODEWITHSUNDEEP
c#asp.netrazor
KellCOMnet
KellCOMnet

Reputation: 1859

Given a simple Dictionary, build a nested unordered list

Given a Dictionary build a nested html unordered list.

I have found other examples where there is a parentid etc but I am not wrapping my head around the format of the data. Also some "menu" items are treated differently if they have sub items. My initial thought was to get the first level aka Schedule, Performers, Home then send that list through a function with all elements that hav

var dict2 = new Dictionary<string, string>() {
"Schedule|Friday","/Date/Classification?date=2020-03-06"
"Schedule|Saturday","/Date/Classification?date=2020-03-07"
"Schedule|Sunday","/Date/Classification?date=2020-03-08"
"Schedule|Regional","/Schedule/Classification?classification=Regional"
"Schedule|Culinary","/Schedule/Classification?classification=Culinary"
"Schedule|Storytellers","/Schedule/Classification?classification=Storytellers"
"Schedule|National","/Schedule/Classification?classification=National"
"Schedule|Urchin Street","/Schedule/Classification?classification=Urchin%20Street"
"Schedule|Horses and Sheep","/Schedule/Classification?classification=Horses%20and%20Sheep"
"Schedule|Dance","/Schedule/Classification?classification=Dance"
"Performers|Regional|SomeMenuText0","/Performers/Index/b905cf6f-6c63-4b48-9988-10eba9799c23"
"Performers|Regional|SomeMenuText1","/Performers/Index/f9de249a-5026-4d1f-803c-1cf1574fdb9c"
"Performers|Culinary|SomeMenuText2","/Performers/Index/9724e1a5-48b2-46ee-a3cd-8878eb4c4f45"
"Performers|Culinary|SomeMenuText3","/Performers/Index/6efbe6ae-fd01-4895-9a25-74722053f7e1"
"Performers|Regional|SomeMenuText4","/Performers/Index/bbcff599-7ec7-4cbe-911b-27c8bf2cc6fc"
"Performers|Storytellers|SomeMenuText5","/Performers/Index/4ada12f6-06e7-4112-9f7a-73d028777c29"
"Performers|National|SomeMenuText6","/Performers/Index/9650749d-de27-4c6f-8804-7c3b70eae78a"
"Performers|Urchin Street|SomeMenuText7","/Performers/Index/a5197e3e-60cc-4076-b1be-4d14d6c4455e"
"Performers|Urchin Street|SomeMenuText8","/Performers/Index/aa9f52dd-0fe2-4450-bc0e-5e756e2ff236"
"Performers|Culinary|SomeMenuText9","/Performers/Index/6e572975-5f8c-494a-9906-546d54c96671"
"Home","/Home/ViewContent/051ec1ce-386b-4070-957a-7515331b7bff"
}

I would like to generate an unordered list. like so

 <ul class="nav navbar-nav mr-auto">
    <li class="nav-item"><a href="/Home/ViewContent/051ec1ce-386b-4070-957a-7515331b7bff">Home</a></li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle removecaret">Performers</a>
        <ul class="dropdown-menu">
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle">Culinary</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/Performers/Index/9724e1a5-48b2-46ee-a3cd-8878eb4c4f45">SomeMenuText2</a></li>
                    <li><a class="dropdown-item" href="/Performers/Index/6efbe6ae-fd01-4895-9a25-74722053f7e1">SomeMenuText3</a></li>
                    <li><a class="dropdown-item" href="/Performers/Index/6e572975-5f8c-494a-9906-546d54c96671">SomeMenuText9</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle">National</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/Performers/Index/9650749d-de27-4c6f-8804-7c3b70eae78a">SomeMenuText6</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle">Regional</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/Performers/Index/b905cf6f-6c63-4b48-9988-10eba9799c23">SomeMenuText0</a></li>
                    <li><a class="dropdown-item" href="/Performers/Index/f9de249a-5026-4d1f-803c-1cf1574fdb9c">SomeMenuText1</a></li>
                    <li><a class="dropdown-item" href="/Performers/Index/bbcff599-7ec7-4cbe-911b-27c8bf2cc6fc">SomeMenuText4</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle">Storytellers</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/Performers/Index/4ada12f6-06e7-4112-9f7a-73d028777c29">SomeMenuText5</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-item dropdown-toggle">Urchin Street</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/Performers/Index/a5197e3e-60cc-4076-b1be-4d14d6c4455e">SomeMenuText7</a></li>
                    <li><a class="dropdown-item" href="/Performers/Index/aa9f52dd-0fe2-4450-bc0e-5e756e2ff236">SomeMenuText8</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle removecaret">Schedule</a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=Culinary">Culinary</a></li>
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=Dance">Dance</a></li>
            <li><a class="dropdown-item" href="/Date/Classification?date=2020-03-06">Friday</a></li>
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=Horses%20and%20Sheep">Horses and Sheep</a></li>
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=National">National</a></li>
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=Regional">Regional</a></li>
            <li><a class="dropdown-item" href="/Date/Classification?date=2020-03-07">Saturday</a></li>
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=Storytellers">Storytellers</a></li>
            <li><a class="dropdown-item" href="/Date/Classification?date=2020-03-08">Sunday</a></li>
            <li><a class="dropdown-item" href="/Schedule/Classification?classification=Urchin%20Street">Urchin Street</a></li>
        </ul>
    </li>
</ul>

Upvotes: 1

Views: 46

Answers (1)

Oguz Ozgul
Oguz Ozgul

Reputation: 7187

Using LinQ to make it elegant, the following code block will achieve the splitting, grouping, and sorting. It will transform the dictionary to a grouped collection of anonymous types.

Each instance will have three properties;

  1. LevelCount: The number of informational levels in the dictionary entry key
  2. Levels: The splitted version of a|b|c as string[] { a, b, c }
  3. Url: The value of the dictionary entry, which is the target URL
var groupedList = dict2
    .Select((x) => new { Levels = x.Key.Split('|'), LevelCount = x.Key.Split('|').Length, Url = x.Value })
    .OrderBy((x) => x.LevelCount)
    .OrderBy((x) => x.LevelCount > 1 ? x.Levels[1] : x.Levels[0])
    .GroupBy((x) => x.LevelCount)
    .ToList();

And this code block is to print out the collection.

groupedList.ForEach((x) =>
{
    x.ToList().ForEach((y) =>
    {
        Console.WriteLine
        (
            y.LevelCount > 2 ? (y.Levels[1] + " / " + y.Levels[0] + " [Text=" + y.Levels[2] + "] => " + y.Url) :
            y.LevelCount > 1 ? (y.Levels[0] + " of " + y.Levels[1] + " => " + y.Url) :
            y.Levels[0] + " => " + y.Url
        );
    });
});

Which prints out the following:

Schedule of Culinary => /Schedule/Classification?classification=Culinary
Schedule of Dance => /Schedule/Classification?classification=Dance
Schedule of Friday => /Date/Classification?date=2020-03-06
Schedule of Horses and Sheep => /Schedule/Classification?classification=Horses%20and%20Sheep
Schedule of National => /Schedule/Classification?classification=National
Schedule of Regional => /Schedule/Classification?classification=Regional
Schedule of Saturday => /Date/Classification?date=2020-03-07
Schedule of Storytellers => /Schedule/Classification?classification=Storytellers
Schedule of Sunday => /Date/Classification?date=2020-03-08
Schedule of Urchin Street => /Schedule/Classification?classification=Urchin%20Street
Culinary / Performers [Text=SomeMenuText2] => /Performers/Index/9724e1a5-48b2-46ee-a3cd-8878eb4c4f45
Culinary / Performers [Text=SomeMenuText3] => /Performers/Index/6efbe6ae-fd01-4895-9a25-74722053f7e1
Culinary / Performers [Text=SomeMenuText9] => /Performers/Index/6e572975-5f8c-494a-9906-546d54c96671
National / Performers [Text=SomeMenuText6] => /Performers/Index/9650749d-de27-4c6f-8804-7c3b70eae78a
Regional / Performers [Text=SomeMenuText0] => /Performers/Index/b905cf6f-6c63-4b48-9988-10eba9799c23
Regional / Performers [Text=SomeMenuText1] => /Performers/Index/f9de249a-5026-4d1f-803c-1cf1574fdb9c
Regional / Performers [Text=SomeMenuText4] => /Performers/Index/bbcff599-7ec7-4cbe-911b-27c8bf2cc6fc
Storytellers / Performers [Text=SomeMenuText5] => /Performers/Index/4ada12f6-06e7-4112-9f7a-73d028777c29
Urchin Street / Performers [Text=SomeMenuText7] => /Performers/Index/a5197e3e-60cc-4076-b1be-4d14d6c4455e
Urchin Street / Performers [Text=SomeMenuText8] => /Performers/Index/aa9f52dd-0fe2-4450-bc0e-5e756e2ff236
Home => /Home/ViewContent/051ec1ce-386b-4070-957a-7515331b7bff

You can change the printing out logic to render HTML or whatever it is you need.

Hope this helps.

Upvotes: 1

Related Questions