How to generate Classes and sub Classes list of check box razor page ?

Question

I work on asp.net  core razor pages . i face issue i can't generate classes and subclasses view and action for class and subclass

so my secnario is 

click button will load classes list with checkbox beside every class and status will be unchecked

when user select any class from classes list then it will display sub classes list  related to class id selected from first list class

with checkbox beside every sub class using jquery ajax

my desired result will be 

my classes csharp as below 

public string ClassItems
{
public int ItemClassId {get;set;}
public string ItemClassName {get;set;}
}

public string SubClassItems
{
public int ItemSubClassId {get;set;}
public string ItemSubClassName {get;set;}
public int ItemClassId {get;set;}
}

ASP.NET (C#)

Copy

so what i write on InventoryClasses page model to implement logic above

InterntoryClassItems.cs

 public class InterntoryClassItemsModel : PageModel
 {

}

InterntoryClassItems.cshtml

@page
@using System.Data;
@model UC.ADC.Host.Pages.Assets.InterntoryClassItemsModel

Answer 1

Index.cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Index";
}

<h1>Classes</h1>

<div id="classesList">
    @foreach (var item in Model.Classes)
    {
        <div>
            <input type="checkbox" class="classCheckbox" value="@item.Id" />
            <label>@item.Name</label>
        </div>
    }
</div>

<h1>Subclasses</h1>

<div id="subclassesList">
    <!-- Subclasses list will be displayed here -->
</div>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.classCheckbox').change(function () {
                var selectedClassIds = [];
                $('.classCheckbox:checked').each(function () {
                    selectedClassIds.push($(this).val());
                });

                if (selectedClassIds.length > 0) {
                    $.ajax({
                        url: '/Index?handler=Subclasses',
                        type: 'GET',
                        traditional: true,
                        data: { classIds: selectedClassIds },
                        success: function (response) {
                            $('#subclassesList').html(response);
                        }
                    });
                } else {
                    $('#subclassesList').empty();
                }
            });
        });
    </script>
}

Index.cshtml.cs:

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyCoreWebApp.Pages
{
    public class IndexModel : PageModel
    {
        public List<Class> Classes { get; set; } = new List<Class>
        {
            new Class { Id = 1, Name = "Class A" },
            new Class { Id = 2, Name = "Class B" },
            new Class { Id = 3, Name = "Class C" }
        };

        public void OnGet()
        {
        }

        public IActionResult OnGetSubclasses(int[] classIds)
        {
            var allSubclasses = new List<Subclass>();
            foreach (var classId in classIds)
            {
                var subclasses = GetSubclasses(classId);
                allSubclasses.AddRange(subclasses);
            }

            return Partial("_SubclassesPartial", allSubclasses);
        }

        private List<Subclass> GetSubclasses(int classId)
        {
            // Retrieve subclasses based on classId
            List<Subclass> listSubClasses = new List<Subclass>
            {
                new Subclass { Id = 1, Name = "Subclass 1 for Class A", ClassId = 1 },
                new Subclass { Id = 2, Name = "Subclass 2 for Class A", ClassId = 1 },
                new Subclass { Id = 3, Name = "Subclass 1 for Class B", ClassId = 2 },
                new Subclass { Id = 4, Name = "Subclass 2 for Class B", ClassId = 2 },
                new Subclass { Id = 5, Name = "Subclass 1 for Class C", ClassId = 3 },
                new Subclass { Id = 6, Name = "Subclass 2 for Class C", ClassId = 3 }
            };

            return listSubClasses.Where(c => c.ClassId == classId).ToList();
        }
    }

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

    public class Subclass
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int ClassId { get; set; }
    }
}

_SubclassesPartial.cshtml:

@model List<Subclass>

@foreach (var item in Model)
{
    <div>
        <input type="checkbox" value="@item.Id" />
        <label>@item.Name</label>
    </div>
}