cascading the dropdown list in the View which is using Multiple Model to populate the data

Question

I am having three Models of Name Faculty Department Program

I have created another ViewModel having name Report which is using data from all three models and implementing in view Model name Report

I want to show the data of dropdown list of Department based on Faculty and Program based on Department.

However In My ReportController I am not able to create JsonResult list as it is taking the list of faculty and department and program?

Is there any other way to populate and cascade dropdown list From different Models?

here is my Report Model

namespace StudentAttendanceManagement.Models
{
    [Keyless]
    public class Reports
    {
        
        public List<Faculty> faculties { get; set; }
        public List<Department> departments { get; set; }
        public List<Programme> programs { get; set; }
       

    }
}

My ReportController

public class ReportController : Controller
    {
        StudentAttendanceDatabaseContext db=new StudentAttendanceDatabaseContext();
      
        public JsonResult GetFaculties()
        {
            var rs= db.Faculties.ToList();
            return new JsonResult(rs);
        }
        public List<Department> GetDepartments(int id)
        {
            return db.Departments.Where(e => e.FacultyId == id).ToList();    

        }
        public List<Programme> GetPrograms()
        {
             
            return db.Programs.ToList();
        }
       
        public IActionResult index()
        {
            var facult = GetFaculties();
            var dept = GetDepartments(1);`your text`
           
            var prog = GetPrograms();
           
            Reports data = new Reports();
            
            data.faculties = facult;
            data.departments = dept;
          
            data.programs = prog;


            return View(data);
        }
    }

My Report view

@using StudentAttendanceManagement.Models;
@model Reports

<h1>Index</h1>
<div class="container" style="margin-left:250px">
<div class="row " >
    <div class="col-md-6">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            
               
            <div class="form-group">
                <label asp-for="faculties" class="control-label">select faculty</label>
                    <select name="faculty" id="facultyid" style="width:412px; height:35px">
                @foreach (var item in Model.faculties){
                        <option value="@item.FacultyCode">@item.FacultyName</option>
                }</select>             
            </div>
                <div class="form-group">
                    <label asp-for="departments" class="control-label">select department</label>

                    <select name="department" id="departmentid" style="width:412px; height:35px">

                        @foreach (var item in Model.departments)
                        {
                            <option value="@item.DepartmentCode">
                                @item.DepartmentName
                            </option>
                        }
                    </select>

                </div>
                <div class="form-group">
                    <label asp-for="programs" class="control-label">select programs</label>
                    <select name="programs" id="programid" style="width:412px; height:35px">
                    @foreach (var item in Model.programs)
                    {
                        <option value="@item.ProgramId">@item.ProgramName</option>
                    }</select>
                </div>
                
            <div class="form-group">
                <input type="submit" value="create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

</div>