首页 > 解决方案 > 给定一个简单的字典,构建一个嵌套的无序列表

问题描述

给定一个 Dictionary 构建一个嵌套的 html 无序列表。

我发现了其他有 parentid 等的例子,但我并没有围绕数据的格式。此外,如果某些“菜单”项具有子项,则它们的处理方式也会有所不同。我最初的想法是获得第一级,即 Schedule、Performers、Home,然后通过一个包含所有元素的函数发送该列表

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"
}

我想生成一个无序列表。像这样

 <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>


标签: c#asp.netrazor

解决方案


使用 LinQ 使其优雅,下面的代码块将实现拆分、分组和排序。它将字典转换为匿名类型的分组集合。

每个实例将具有三个属性;

  1. LevelCount:字典条目键中的信息级别数
  2. 级别:a|b|c 的拆分版本为 string[] { a, b, c }
  3. Url:字典条目的值,即目标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();

而这个代码块就是打印出集合。

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
        );
    });
});

打印出以下内容:

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

您可以更改打印输出逻辑以呈现 HTML 或您需要的任何内容。

希望这可以帮助。


推荐阅读