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

Question

Currently my data looks like this.

id----- title----- ParentId
1----- GRE ----- --- 0
2 -----GMATE ----- 0
4 -----Quant ----- -- 1
3----- Quant ----- -- 2
9 -----Verbal ----- -- 1
10----- Profit ----- -- 4
11 -----Algebra ----- 3
12 -----Verbal ----- --2

Here is my Navbar code

 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>

}

Answer 1

Try this here. I am not into asp/razor etc. but you can adapt the logic

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

Answer 2

This solution is making use of a component to handle the recursive data. I would expect that the data is validated against loops and is not huge, in that case, I would expand each node on click.

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

Output

Data I used to test:

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

Answer 3

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

 }