C#•14mo ago

❔ I would like to use an SQL query on a consecutive Select HTML element.

I have this form were I can add a product, a Product is made with this structure:

    public class Product
    {
        [Key]
        public int Id { get; set; }
                ...
        [Required]
        public int SubCategoryId { get; set; }
        [ForeignKey("SubCategoryId")]
        public SubCategory SubCategory { get; set; }
        ...
    }

    public class Product
    {
        [Key]
        public int Id { get; set; }
                ...
        [Required]
        public int SubCategoryId { get; set; }
        [ForeignKey("SubCategoryId")]
        public SubCategory SubCategory { get; set; }
        ...
    }

But in the creation form i pass a ViewModel ProductVM, which contains a SelectListItem with all Categories and SubCategories.

    public class SubCategory
    {
        [Key]
        public int Id { get; set; }

        ...
        public int CategoryId { get; set; }

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

    public class SubCategory
    {
        [Key]
        public int Id { get; set; }

        ...
        public int CategoryId { get; set; }

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

So each SubCategory element contains a foreign key to a Category element. I have a Create.cshtml view for the Products, I would like to apply some filtering, but I have no idea how to do it, since I should send back and forward data from View to Controller multiple times. I would like to : - Display all the categories in a HTML Select at the start while the Select for the SubCategories is disabled. - Once I've selected the Category, I want to enable the SubCategories Select and show only the SubCategories which contains the previously selected CategoryId. Yesterday I tried my best to implement this logic, but I feel like I'm missing some pieces. The ViewModel of the Product:

    public class ProductVM
    {
        public Product Product { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> CategoryList { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> SubCategoryList { get; set; }
    }

    public class ProductVM
    {
        public Product Product { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> CategoryList { get; set; }
        [ValidateNever]
        public IEnumerable<SelectListItem> SubCategoryList { get; set; }
    }

Could you help me please?

4 Replies

JakenVeina•14mo ago

what framework are we using here?

PagliuOP•14mo ago

ASP .NET, by the way I solved! Executed this JS script on my GET rest API

@section Scripts{
    <script>
        var categorySelect = document.getElementById("categorySelect");
        var subCategorySelect = document.getElementById("subCategorySelect");

        categorySelect.addEventListener("change", function () {
            var selectedCategoryValue = categorySelect.value;
            $.ajax({
                url: '/Admin/Product/GetSubCategoriesBasedOnCategory?id=' + selectedCategoryValue,
                method: 'GET',
                success: function (data) {
                    subCategorySelect.innerHTML = '';

                    if (data.length > 0) {
                        subCategorySelect.disabled = false;
                    } else {
                        subCategorySelect.disabled = true;
                    }

                    data.forEach(function (item) {
                        var option = document.createElement("option");
                        option.text = item.text;
                        option.value = item.value;
                        subCategorySelect.appendChild(option);
                    });
                }
            });
        });
    </script>

    @{
        <partial name="_ValidationScriptsPartial" />
    }
}

@section Scripts{
    <script>
        var categorySelect = document.getElementById("categorySelect");
        var subCategorySelect = document.getElementById("subCategorySelect");

        categorySelect.addEventListener("change", function () {
            var selectedCategoryValue = categorySelect.value;
            $.ajax({
                url: '/Admin/Product/GetSubCategoriesBasedOnCategory?id=' + selectedCategoryValue,
                method: 'GET',
                success: function (data) {
                    subCategorySelect.innerHTML = '';

                    if (data.length > 0) {
                        subCategorySelect.disabled = false;
                    } else {
                        subCategorySelect.disabled = true;
                    }

                    data.forEach(function (item) {
                        var option = document.createElement("option");
                        option.text = item.text;
                        option.value = item.value;
                        subCategorySelect.appendChild(option);
                    });
                }
            });
        });
    </script>

    @{
        <partial name="_ValidationScriptsPartial" />
    }
}

GET API

        [HttpGet]
        public IActionResult GetSubCategoriesBasedOnCategory(int id)
        {
            IEnumerable<SubCategory> all = _unitOfWork.SubCategory.GetAll();
            IEnumerable<SubCategory> subCategories = _unitOfWork.SubCategory.GetList(u => u.CategoryId == id);
            IEnumerable<SelectListItem> listItems = subCategories.Select(subCategory => new SelectListItem
            {
                Text = subCategory.Name,
                Value = subCategory.Id.ToString()
            });

            return new JsonResult(listItems);
        }

        [HttpGet]
        public IActionResult GetSubCategoriesBasedOnCategory(int id)
        {
            IEnumerable<SubCategory> all = _unitOfWork.SubCategory.GetAll();
            IEnumerable<SubCategory> subCategories = _unitOfWork.SubCategory.GetList(u => u.CategoryId == id);
            IEnumerable<SelectListItem> listItems = subCategories.Select(subCategory => new SelectListItem
            {
                Text = subCategory.Name,
                Value = subCategory.Id.ToString()
            });

            return new JsonResult(listItems);
        }

JakenVeina•14mo ago

great that is definitely the way to do it, if you are okay with JS if there's not TOO many categories, you could also just fetch them all up-front, and group them, and only use JS to pick out which group to show, at any given time so, no server/client chatting

Accord•14mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ I would like to use an SQL query on a consecutive Select HTML element.