C# 我想在侧导航栏blazor C中显示分层类别#

当前我的数据如下所示。

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

这是我的导航条形码

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

public IEnumerable Categories{get；set；}

@foreach（类别中的变量父项）
{


家

//??????????????????
//如何处理子类别
@{
var children=Categories.Where（e=>e.Parent\u Id==Parent.Id）.OrderBy（e=>e.Id）；
}
@foreach（儿童中的变量类别）
{   
递归代码？？？？？
}           

}

在这里试试这个。我不喜欢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);
        }
    }

foreach（类别中的变量类别
.Where（cat=>cat.ParentId==0）
.OrderBy（cat=>cat.Name））//需要吗？否则就换，或者干脆放下这行
{
分类（范畴）；
}
公共无效分类（类别，整数深度=0）
{
深度++；
//在这里，你需要做你的html魔术，而不是记录
Console.WriteLine（$“{category.Name}”）；
var subs=类别
.其中（cat=>cat.ParentId==category.Id）；
foreach（子系统中的var子系统）
{
分类（细分、深度）；
}
}

此解决方案利用组件处理递归数据。我希望数据是根据循环验证的，并且不是很大，在这种情况下，我会在单击时展开每个节点

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

输出

我用于测试的数据：

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

公共类类别
{
公共int Id{get；set；}
public int ParentId{get；set；}
公共字符串标题{get；set；}
}
公共静态类类别帮助器
{
公共静态IEnumerable Categories=new[]
{
新类别{ParentId=0，Id=1，Title=“Gre”}，
新类别{ParentId=0，Id=2，Title=“GMATE”}，
新类别{ParentId=1，Id=4，Title=“Quant”}，
新类别{ParentId=1，Id=9，Title=“verball”}，
新类别{ParentId=2，Id=3，Title=“Quant”}，
新类别{ParentId=2，Id=12，Title=“verball”}，
新类别{ParentId=3，Id=11，Title=“Algebra”}，
新类别{ParentId=4，Id=10，Title=“profice”}，
};
}

@{
foreach（启动模式。类别中的类别）
{
if（category.Parent_Id==0）
{


@category.category\u名称
@{getChild（类别）；}


}
}
void getChild（启动\u models.Categories父级）
{
var children=Categories.Where（e=>e.Parent\u Id==Parent.Id）.OrderBy（e=>e.Id）；
if（children==null）返回；

@foreach（启动\模型.Categories子项中的子项）
{

@child.Category\u名称
@{getChild（child）；}

}

}
}

是，递归。类似“while（var children=Categories.Where（e=>e.Parent_Id==Parent.Id）.OrderBy（e=>e.Id）！=null）{foreach（var children中的类别）}”这样的函数应该在进入无限循环时执行@尼尔斯克，请你用正确的密码回复。

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

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

 }