Cascading dropdown in .NET 6

Question

I want to develop a cascading dropdown list. There are two individual dropdown list called "ProductCategorie" and "ProductSubCategorie". When I will select "ProductCategorie", then "ProductSubCategorie" will load based on "ProductCategorie".

How can I develop it as cascading?

ProductController.cs

    [HttpGet]
    public async Task<IActionResult> AddEdit(int id)
    {
        try
        {
            ProductCRUDViewModel vm = new ProductCRUDViewModel();
            ViewBag._LoadddlProductCategorie = new SelectList(_iCommon.LoadddlProductCategorie(), "Id", "Name");
            ViewBag._LoadddlProductSubCategorie = new SelectList(_iCommon.LoadddlProductSubCategorie(), "Id", "Name");

            if (id > 0)
            {
                vm = await _context.Product.Where(x => x.Id == id).SingleOrDefaultAsync();
                vm.listCommentCRUDViewModel = await _iCommon.GetCommentList(id).ToListAsync();
                return PartialView("_Edit", vm);
            }
            else
            {
                vm.ProductId = "AST-" + StaticData.RandomDigits(6);
                return PartialView("_Add", vm);
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

ICommon.cs

IQueryable<ItemDropdownListViewModel> LoadddlProductCategorie();
IQueryable<ItemDropdownListViewModel> LoadddlProductSubCategorie();
IQueryable<ItemDropdownListViewModel> LoadddlProductSubCategorieByCategorieId(Int64 CategorieId);

Common.cs

public IQueryable<ItemDropdownListViewModel> LoadddlProductCategorie()
    {
        return (from tblObj in _context.ProductCategorie.Where(x => x.Cancelled == false).OrderBy(x => x.Id)
                select new ItemDropdownListViewModel
                {
                    Id = tblObj.Id,
                    Name = tblObj.Name,
                });
    }
    public IQueryable<ItemDropdownListViewModel> LoadddlProductSubCategorie()
    {
        return (from tblObj in _context.ProductSubCategorie.Where(x => x.Cancelled == false).OrderBy(x => x.Id)
                select new ItemDropdownListViewModel
                {
                    Id = tblObj.Id,
                    Name = tblObj.Name,
                });
    }
    public IQueryable<ItemDropdownListViewModel> LoadddlProductSubCategorieByCategorieId(Int64 CategorieId)
    {
        return (from tblObj in _context.ProductSubCategorie.Where(x => x.Cancelled == false).Where(x => x.ProductCategorieId == CategorieId).OrderBy(x => x.Id)
                select new ItemDropdownListViewModel
                {
                    Id = tblObj.Id,
                    Name = tblObj.Name,
                });
    }

_Add.chtml

                                    <div class="form-group row">
                                        <label asp-for="Category" class="col-sm-3 col-form-label"></label>
                                        <div class="col-sm-9">
                                            <select asp-for="Category" asp-items="@ViewBag._LoadddlProductCategorie" id="Category" class="form-control" style="width:100%;">
                                                <option disabled selected>--- SELECT ---</option>
                                            </select>
                                            <span asp-validation-for="Category" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label asp-for="SubCategory" class="col-sm-3 col-form-label"></label>
                                        <div class="col-sm-9">
                                            <select asp-for="SubCategory" asp-items="@ViewBag._LoadddlProductSubCategorie" id="SubCategory" class="form-control" style="width:100%;">
                                                <option disabled selected>--- SELECT ---</option>
                                            </select>
                                            <span asp-validation-for="SubCategory" class="text-danger"></span>
                                        </div>
                                    </div>

Answer 1

How can I develop it as cascading?

You could handle this using jQuery/Javascript. Here is the working sample pointing your scenario accordingly:

Models:

public class ProductCategorie
    {
        public int ProductCategorieId { get; set; }
        public string? ProductCategorieName { get; set; }
    }
    public class ProductSubCategorie
    {
        public int ProductSubCategorieId { get; set; }
        public string? ProductSubCategorieName { get; set; }
        public int ProductCategorieId { get; set; }
    }

Demo Data:

public static List<ProductCategorie> ListOfProductCategory = new List<ProductCategorie>()
        {
            new ProductCategorie() { ProductCategorieId =101, ProductCategorieName ="Backend", },
            new ProductCategorie() { ProductCategorieId =102, ProductCategorieName ="Frontend", },
            new ProductCategorie() { ProductCategorieId =103, ProductCategorieName ="Database", }
        };
        public static List<ProductSubCategorie> ListOfSubCategorie = new List<ProductSubCategorie>()
        {
            //Backend
            new ProductSubCategorie() { ProductCategorieId =101, ProductSubCategorieId =1, ProductSubCategorieName = "C#" },
            new ProductSubCategorie() { ProductCategorieId =101, ProductSubCategorieId =2, ProductSubCategorieName = "Java" },
            new ProductSubCategorie() { ProductCategorieId =101, ProductSubCategorieId =3, ProductSubCategorieName = "Python" },
            //Frontend
            new ProductSubCategorie() { ProductCategorieId =102, ProductSubCategorieId =4, ProductSubCategorieName = "Javascript" },
            new ProductSubCategorie() { ProductCategorieId =102, ProductSubCategorieId =5, ProductSubCategorieName = "React" },
            new ProductSubCategorie() { ProductCategorieId =102, ProductSubCategorieId =6, ProductSubCategorieName = "Angular" },
            //Database
            new ProductSubCategorie() { ProductCategorieId =103, ProductSubCategorieId =7, ProductSubCategorieName = "SQL Server" },
            new ProductSubCategorie() { ProductCategorieId =103, ProductSubCategorieId =8, ProductSubCategorieName = "My SQL" },
            new ProductSubCategorie() { ProductCategorieId =103, ProductSubCategorieId =9, ProductSubCategorieName = "Postgres SQL" },
        };

Controller:

public IActionResult IndexProduct()
        {
            return View();
        }
        [HttpGet]
        public async Task<ActionResult> LoadCategory()
        {
            var productCategories =  ListOfProductCategory.ToList();

            return Ok(productCategories);

        }
        [HttpGet]
        public async Task<ActionResult> GetSubCategory(int productCategorieId)
        {
            var subCategories = ListOfSubCategorie.Where(cId => cId.ProductCategorieId == productCategorieId).ToList();

            return Ok(subCategories);

        }

View:HTML

<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-6">

        <div class="form-group">
            <label class="col-md-4 control-label">Category</label>
            <div class="col-md-6">
                <select class="form-control" id="ddlCategory"></select><br />
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label">SubCategorie</label>
            <div class="col-md-6">
                <select class="form-control" id="ddlSubCategorie"></select>
                <br />

            </div>
        </div>
        <br />
        <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-6">
                <input id="Submit" value="Submit" class="btn btn-primary" />

            </div>
        </div>
    </div>
    <div class="col-lg-3"></div>


</div>

Note: View page should be added on behalf of IndexProduct controller action

View:Script

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>

        $(document).ready(function () {

            var ddlCategory = $('#ddlCategory');
            ddlCategory.append($("<option></option>").val('').html('Please Select Category'));
            $.ajax({
                url: 'http://localhost:5094/CascadingDropdown/LoadCategory',
                type: 'GET',
                dataType: 'json',
                success: function (d) {
                    console.log(d);
                    $.each(d, function (i, productCategories) {
                        console.log(i);
                        console.log(productCategories);

                        ddlCategory.append($("<option></option>").val(productCategories.productCategorieId).html(productCategories.productCategorieName));
                    });
                },
                error: function () {
                    alert('Error!');
                }
            });

            //State details by country id

            $("#ddlCategory").change(function () {


                var productCategorieId = parseInt($(this).val());
                console.log(productCategorieId);
                if (!isNaN(productCategorieId)) {
                    var ddlSubCategorie = $('#ddlSubCategorie');
                    ddlSubCategorie.empty();
                    ddlSubCategorie.append($("<option></option>").val('').html('Please wait ...'));


                    $.ajax({
                        url: 'http://localhost:5094/CascadingDropdown/GetSubCategory',
                        type: 'GET',
                        dataType: 'json',
                        data: { productCategorieId: productCategorieId },
                        success: function (d) {

                            ddlSubCategorie.empty(); // Clear the please wait
                            ddlSubCategorie.append($("<option></option>").val('').html('Select Sub Categorie'));
                            $.each(d, function (i, subCategories) {
                                ddlSubCategorie.append($("<option></option>").val(subCategories.productSubCategorieId).html(subCategories.productSubCategorieName));
                            });
                        },
                        error: function () {
                            alert('Error!');
                        }
                    });
                }


            });

           
            //On Submit Method

            $("#Submit").click(function () {
                var ddlCategory = parseInt($("#ddlCategory").val());
                var ddlSubCategorie = parseInt($("#ddlSubCategorie").val());
             

                var data = {
                    ddlCategory: ddlCategory,
                    ddlSubCategorie: ddlSubCategorie,

                };
                console.log(data);
                $.ajax({
                    url: 'http://localhost:5094/CascadingDropdown/AddProductCategory',
                    type: 'POST',
                    dataType: 'json',
                    data: data,
                    success: function (d) {
                        alert("Submitted To Database");
                    },
                    error: function () {
                        alert('Error!');
                    }
                });

            });

        });
    </script>
        }

Output: