Блог

Я хочу перечислить категории, как на картинке:

Теперь я мог только перечислить все категории, используя 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()
    });
}
 

Таким образом, я могу перечислить все свои категории, но как я могу перечислить основные и подкатегории, как на картинке?

результат: введите описание изображения здесь

Я думаю, у вас должна быть другая модель для элементов подкатегории, что-то вроде этого:

Модель:

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

Просмотр страницы компонента:

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

CategoryService:

 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>