首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >给定一个简单的字典,构建一个嵌套的无序列表

给定一个简单的字典,构建一个嵌套的无序列表
EN

Stack Overflow用户
提问于 2020-04-16 03:00:08
回答 1查看 41关注 0票数 1

给定一个字典,构建一个嵌套的html无序列表。

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

代码语言:javascript
复制
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"
}

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

代码语言:javascript
复制
 <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>
EN

回答 1

Stack Overflow用户

发布于 2020-04-16 06:47:59

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

每个实例都有三个属性;

  1. LevelCount:字典条目
  2. 级别中的信息层数: a|b|c的拆分版本,如string[] { a,b,c }
  3. Url:字典条目的值,即目标URL

代码语言:javascript
复制
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();

此代码块用于打印集合。

代码语言:javascript
复制
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
        );
    });
});

这将输出以下内容:

代码语言:javascript
复制
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或您需要的任何内容。

希望这能有所帮助。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61236561

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档