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

问题描述

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

这是我的代码：

_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.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; }
    }

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

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

解决方法

您可以尝试以下代码：

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