无法使用组件创建按类别的子类别下拉列表

Question

我正在尝试在菜单栏中动态创建一个按类别划分的子类别下拉列表。但我不明白如何为下拉菜单创建正确的相互关系（类别和子类别）。我可以使用包含我的数据库的“类别”列表创建动态菜单栏。但我不明白如何将类别子类别菜单栏创建为下拉列表。

这是我的代码：

_Layout.cshtml

//other code
 
                            @(await Component.InvokeAsync("CategoryWiseMenu"))
                        </ul>
                    </div>
                </div>
            </nav>


//other code

CategoryWiseMenu.cs

public class CategoryWiseMenu:ViewComponent
{
    private readonly ApplicationDbContext _db;

    public CategoryWiseMenu(ApplicationDbContext db)
    {
        _db = db;
    }

    public IViewComponentResult Invoke()
    {
        var c = _db.Category.OrderBy(p => p.CategoryName).Include(p=>p.SubCategories);
        return View(c);
    }
}

~/Views/Shared/Components/CategoryWiseMenu/Default.cshtml

<ul class="navbar-nav flex-grow-1">

    @foreach (var category in Model)
    {
    <li class="nav-item text-dark">
        
        <div class="btn-group">
            <a asp-controller="ShopShow" asp-area="Customer" class="text-dark mt-2">@category.CategoryName</a>
            <a class="dropdown-toggle dropdown-toggle-split mt-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </a>

            @for (int i = 0; i < category.CategoryName.Length; i++)
            {
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">@category.SubCategories.SubCategoryName[i]</a>
            </div>
            }
            
        </div>
    </li>
    }
</ul>

这是 Category 和 SubCategory 之间的关系：

类别和子类别模型：

//Category.cs

public class Category
{
    public int Id { get; set; }

    [Required]
    [Display(Name = "Category Name")]
    public string CategoryName { get; set; }

    public ICollection<SubCategory> SubCategories { get; set; }
}

//SubCategory.cs

public class SubCategory
{
    public int Id { get; set; }

    [Required]
    [Display(Name = "SubCategory Name")]
    public string SubCategoryName { get; set; }

    public int CategoryID { get; set; }

    [JsonIgnore]
    public Category Category { get; set; }
}

当我运行我的应用程序时，我发现了一个错误：

实际上，我不明白，我的实现是否适用于按类别的子类别下拉列表。我如何解决这个问题。我是一个绝对的初学者，请帮助。

Answer 1

你可以试试下面的代码：

@for (int i = 0; i < category.SubCategories.Count; i++)
{
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">@category.SubCategories.ToList()[i].SubCategoryName</a>
    </div>
}

更新：

<div class="dropdown-menu">
    @for (int i = 0; i < category.SubCategories.Count; i++)
    {
        <a class="dropdown-item" href="#">@category.SubCategories.ToList()[i].SubCategoryName</a>
    }
</div>