我想在侧面导航栏 Blazor C# 中分层显示类别答案

【问题标题】：I want Display Categories in hierarchical in side navigation bar blazor C#我想在侧面导航栏 Blazor C# 中分层显示类别
【发布时间】：2021-01-30 17:27:48
【问题描述】：

目前我的数据如下所示。

id----- 标题----- ParentId
1----- GRE ----- --- 0
2 -----GMATE ----- 0
4 -----量化 ----- -- 1
3----- 量化 ----- -- 2
9 -----口头 ----- -- 1
10----- 利润 ----- -- 4
11 -----代数 ----- 3
12 -----口头 ----- --2

这是我的导航栏代码

 public IEnumerable<Categories> Categories { get; set; }

@foreach (var parent in Categories)
    {

<ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>

//??????????????????
//What to do for subcategories
 @{
       var children = Categories.Where(e => e.Parent_Id == parent.Id).OrderBy(e => e.Id);
  }
@foreach (var category in children) 
    {   
      recursive code?????     
    }           

    </ul>

}

【问题讨论】：

是的，递归的。 'while (var children = Categories.Where(e => e.Parent_Id == parent.Id).OrderBy(e => e.Id) != null) { foreach (var children in children) }' 应该做它也是
进入无限循环。 @nilsK 你能用正确的代码回复吗？

标签： c# asp.net razor blazor razor-pages

【解决方案1】：

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">

@{

    foreach (Startup_models.Categories category in Categories)
    {

        if (category.Parent_Id == 0)
        {

            <ul class="nav flex-column">
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="@($"{category.Category_Name}/{category.Id}")" Match="NavLinkMatch.All" @onclick="(() => HandleClick(category.Category_Name, category.Id.ToString()))">
                        <span class="oi" aria-hidden="true"></span> @category.Category_Name
                    </NavLink>

                    @{ getChild(category); }
                       

                </li>
            </ul>

        }
    }

    void getChild(Startup_models.Categories parent)
    {

        var children = Categories.Where(e => e.Parent_Id == parent.Id).OrderBy(e => e.Id);

        if (children == null) return;

            <ul class="nav flex-column">

                @foreach (Startup_models.Categories child in children)
                {

                    <li class="nav-item px-3">
                        <NavLink class="nav-link" href="@($"{child.Category_Name}/{child.Id}")" Match="NavLinkMatch.All" @onclick="(() => HandleClick(child.Category_Name, child.Id.ToString()))">
                            <span class="oi" aria-hidden="true"></span> @child.Category_Name
                        </NavLink>
                        @{getChild(child);}
                    </li>
                }

   
                </ul>
    }

 }

【讨论】：

【解决方案2】：

此解决方案使用组件来处理递归数据。我希望数据会针对循环进行验证并且不会很大，在这种情况下，我会在点击时展开每个节点。

<ul class="nav flex-column">

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </li>

    @foreach (var category in SubCategories)
    {
        <CategoryNavLink Category="category" />
    }
</ul>

@code { 
    IEnumerable<Category> SubCategories
        => CategoryHelpers.Categories.Where(a => a.ParentId == 0);
}

CategoryNavLink.razor

<li class="nav-item px-3">
    <NavLink @key="Category" class="nav-link" href=@($"categories/{Category.Id}")>
        <span class="@icon" aria-hidden="true"></span> @Category.Title
    </NavLink>
    @if (HasSubCategories)
    {
        <ul class="pl-1 nav flex-column">
            @foreach (var category in SubCategories)
            {
                <CategoryNavLink Category="category" />
            }
        </ul>
    }
</li>
@code {
    [Parameter]
    public Category Category { get; set; }

    bool HasSubCategories => SubCategories.Any();

    string icon => HasSubCategories ? "oi oi-chevron-bottom" : "oi oi-chevron-right";

    IEnumerable<Category> SubCategories
        => CategoryHelpers.Categories.Where(a => a.ParentId == Category.Id);
}

输出

我用来测试的数据：

public class Category
{
    public int Id { get; set; }
    public int ParentId { get; set; }
    public string Title { get; set; }
}

public static class CategoryHelpers
{
    public static IEnumerable<Category> Categories = new[]
    {
        new Category { ParentId = 0, Id = 1, Title = "Gre" },
        new Category { ParentId = 0, Id = 2, Title = "GMATE" },
        new Category { ParentId = 1, Id = 4, Title = "Quant" },
        new Category { ParentId = 1, Id = 9, Title = "Verbal" },
        new Category { ParentId = 2, Id = 3, Title = "Quant" },
        new Category { ParentId = 2, Id = 12, Title = "Verbal" },
        new Category { ParentId = 3, Id = 11, Title = "Algebra" },
        new Category { ParentId = 4, Id = 10, Title = "Profit" },
    };
}

【讨论】：

【解决方案3】：

在这里试试这个。我不喜欢 asp/razor 等，但你可以调整逻辑

    foreach (var category in Categories
        .Where( cat => cat.ParentId == 0)
        .OrderBy(cat => cat.Name)) // needed? else change or just drop this line
    {
        Categorize(category);
    }

    public void Categorize(Categories category, int depth = 0)
    {
        depth++;
        // here you need to do your html magic instead of logging
        Console.WriteLine($"<h{depth}>{category.Name}</h{depth}>");
        var subs = Categories
            .Where(cat => cat.ParentId == category.Id);
        foreach (var sub in subs)
        {
            Categorize(sub, depth);
        }
    }

【讨论】：