单个下拉列表中的类别和子类别 - ASP.NET MVC

Question

我想列出图片中的类别：

现在我只能使用 VievComponent 列出所有类别。

我有一个这样的模型类

public class CategoryModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public string Image { get; set; }

    public int? ParentId { get; set; }
}

ViewComponent 类

public class CategoryListViewComponent : ViewComponent
{
    private ICategoryService _categoryService;
    public CategoryListViewComponent(ICategoryService categoryService)
    {
        _categoryService = categoryService;
    }
    public IViewComponentResult Invoke()
    {
        return View(new CategoryListModel()
        {
            SelectedCategory = RouteData.Values["category"]?.ToString(),
            Categories = _categoryService.GetAll()
        });
    }

查看组件文件

@foreach (var item in Model.Categories)
{
    <li class="menu-item menu-item-submenu" data-menu-toggle="hover" aria-haspopup="true">
        <a asp-controller="Admin" asp-action="CategoryList" asp-route-category="@item.Name.ToLower()" class="menu-link @(Model.SelectedCategory==item.Name.ToLower()?"active":"")">
            <span class="menu-text">@item.Name</span>
            <i class="menu-arrow"></i>
        </a>
    </li>
}

和控制器

public IActionResult CategoryList()
{
    return View(new CategoryListModel()
    {
        Categories = _categoryService.GetAll()
    });
}

这样我可以列出我所有的类别，但是我怎样才能列出图片中的主要和子类别呢？

结果： enter image description here

Answer 1

我认为您应该为子类别项目设置另一个模型，如下所示：

型号：

public class CategoryModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<SubCategoryModel> SubCategories { get; set; }
}

public class SubCategoryModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class CategoryListModel
{
    public string SelectedCategory { get; set; }
    public List<CategoryModel> Categories { get; set; }
}

ViewComponent 页面：

<ul>
    @foreach (var item in Model.Categories)
    {
        <li class="menu-item menu-item-submenu" data-menu-toggle="hover" aria-haspopup="true">
            <a asp-controller="Admin" asp-action="CategoryList" asp-route-category="@item.Name.ToLower()" class="menu-link @(Model.SelectedCategory==item.Name.ToLower()?"active":"")">
                <span class="menu-text">@item.Name</span>
                <i class="menu-arrow"></i>
            </a>
        </li>
        @if (item.SubCategories != null && item.SubCategories.Count > 0)
        {
            foreach (var subitem in item.SubCategories)
            {
                <li class="menu-item menu-item-submenu" data-menu-toggle="hover" aria-haspopup="true">
                    <a asp-controller="Admin" asp-action="CategoryList" asp-route-category="@subitem.Name.ToLower()" class="menu-link">
                        <span class="menu-text">@item.Name > @subitem.Name</span>
                        <i class="menu-arrow"></i>
                    </a>
                </li>
            }
        }
    }
</ul>

ViewComponent 类：

public class CategoryListViewComponent : ViewComponent
{
    private ICategoryService _categoryService;
    public CategoryListViewComponent(ICategoryService categoryService)
    {
        _categoryService = categoryService;
    }
    public IViewComponentResult Invoke()
    {
        return View(new CategoryListModel()
        {
            Categories = _categoryService.GetAll()
        });
    }
}

分类服务：

public class CategoryService : ICategoryService
{
    public List<CategoryModel> GetAll()
    {
        var categories = new List<CategoryModel>
        {
            new CategoryModel{ Id = 1, Name = "AA", SubCategories = new List<SubCategoryModel>
                {
                    new SubCategoryModel{ Id = 1, Name = "A1"},
                    new SubCategoryModel{ Id = 2, Name = "A2"},
                } 
            },
            new CategoryModel{ Id = 2, Name = "BB" , SubCategories = new List<SubCategoryModel>
                {
                    new SubCategoryModel{ Id = 1, Name = "B1"},
                    new SubCategoryModel{ Id = 2, Name = "B2"},
                } 
            },
            new CategoryModel{ Id = 3, Name = "CC"},
            new CategoryModel{ Id = 4, Name = "DD"},
        };
        return categories;
    }
}

结果：

更新：

public List<CategoryModel> GetAll()
{
    var categories = new List<CategoryModel>
    {
        new CategoryModel{ Id = 1, Name = "AA"},
        new CategoryModel{ Id = 2, Name = "BB"},
        new CategoryModel{ Id = 3, Name = "CC", ParentId = 1},
        new CategoryModel{ Id = 4, Name = "DD", ParentId = 1},
        new CategoryModel{ Id = 5, Name = "EE", ParentId = 2},
        new CategoryModel{ Id = 6, Name = "FF", ParentId = 2},
    };

    return categories;
}

查看：

<ul>
    @foreach (var item in Model.Categories)
    {
        @if (item.ParentId == null)
        {
            <li class="menu-item menu-item-submenu" data-menu-toggle="hover" aria-haspopup="true">
                <a asp-controller="Admin" asp-action="CategoryList" asp-route-category="@item.Name.ToLower()" class="menu-link @(Model.SelectedCategory==item.Name.ToLower()?"active":"")">
                    <span class="menu-text">@item.Name</span>
                    <i class="menu-arrow"></i>
                </a>
            </li>
        }

        foreach (var subitem in Model.Categories.Where(s => s.ParentId == item.Id))
        {
            <li class="menu-item menu-item-submenu" data-menu-toggle="hover" aria-haspopup="true">
                <a asp-controller="Admin" asp-action="CategoryList" asp-route-category="@subitem.Name.ToLower()" class="menu-link">
                    <span class="menu-text">@item.Name > @subitem.Name</span>
                    <i class="menu-arrow"></i>
                </a>
            </li>
        }

    }
</ul>