Dynamically Category wise subcategory's dropdown list

Question

I want to create a dynamical separate product-related category wise sub category's dropdown list and show product separately. already I created a dynamically category-wise product. but I don't understand how I will create dynamically subcategory which is category wise. already I made a relationship between category, subcategory, and product model.

Here is my code:

Model

//Product's model

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

        [Required]
        [Display(Name = "product name")]
        public String Name { get; set; }
        [Required]
        public int Price { get; set; }


        public String Image { get; set; }
        public String Image1 { get; set; }

        public List<Photo1> Photos { get; set; }

        [Required]
        public int Quantity { get; set; }

        [Required]
        public bool IsAvailable { get; set; }

        [Display(Name = "Category")]

        public int? CategoryTypeId { get; set; }

        [ForeignKey("CategoryTypeId")]
        public Category Category { get; set; }

        [Display(Name = "SubCategory")]

        public int? SubCategoryTypeId { get; set; }

        [ForeignKey("SubCategoryTypeId")]
        public SubCategory SubCategory { get; set; }
    }


//SubCategory Model

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

//Category Model

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

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

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

Component

  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);
            return View(c);
        }
    }

Default.cshtml

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


    @foreach (var category in Model)
    {
        <li class="nav-item text-dark">
            <a asp-controller="ShopShow" asp-action="ListCategories"
               asp-route-cate="@category.CategoryName" class="nav-link text-dark">@category.CategoryName</a>
        </li>
    }
    
</ul>

ShopShow Controller and its view

//Controller

  public IActionResult ListCategories(string cate)
        {
            var c = _db.Shop.Where(x => x.Category.CategoryName == cate).ToList();
            ViewBag.t = c;
            return View();
        }



  //....................//
 //ListCagories.cshtml//
//..................//


@model DigitalShop.Models.Shop



<h1 class="text-center text-danger">Buy Now!!</h1>
<br /><br />
<div class="row">

    @foreach (var laptop in ViewBag.t)
    {
        <div class="col-4 ml-5">
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="my-4 font-weight-normal">
                        <label style="font-size:23px; color:black;text-align:center">@laptop.Name</label>
                    </h4>
                </div>
                <img src="~/@laptop.Image" alt="Card Image" class="card-img-top" style="height:200px;" />

                @*@if (laptop.Photos != null && laptop.Photos.Count != 0)
                    {
                        <img src="~/@laptop.Photos[0].Image" alt="Card Image" class="card-img-top" style="height:200px;" />
                    }*@

                @*<video src="~/@laptop.Image1" alt="Card Image" class="card-img-top" controls height="300px" loop />*@

                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <label style="font-size:20px;color:darkblue"><b>Price:@laptop.Price</b></label>
                        </div>


                        <a asp-action="Details" asp-controller="ShopShow" asp-route-id="@laptop.Id" class="btn btn-primary pull-right btn-outline-light">Details</a>
                    </div>
                </div>
            </div>
        </div>

    }
</div>

Output :

I already use @(await Component.InvokeAsync("CategoryWiseMenu")) in Layout page.in the above output, I successfully created a dynamically category wise product. but I want dynamical separate product-related category wise sub category's dropdown list. What's the solution.

Answer 1

Get shops from db with categoryName,and then get subcategories from the shops.

  //pass CategoryName 

     public IActionResult ListSubCategories(string cate)
            {
                //get shops with subcategory related to categoryName
                var c = _db.Shop.Include(c => c.Category.Where(x => x.Category.CategoryName == 
                cate)).Include(c => c.SubCategory).ToList();
                List<SelectListItem> SubCategories= new List<SelectListItem>();
                //get subcategories from shops
                for(int i=0;i<c.Count();i++){
                   s.Add(new SelectListItem { Value = c[i].SubCategory.Id, Text = c[i].SubCategory.SubCategoryName  });
                }
                ViewBag.SubCategories = SubCategories;
                return View();
            }

View:

@model Shop
    @Html.DropDownListFor(m => m.SubCategoryTypeId, (IEnumerable<SelectListItem>)ViewBag.SubCategories, "select")