Problem with cascading dropdown in Asp.net core mvc

Question

I m implementing Student Information System. In Student class (Id, Name, CurrentGradeId, CurrentClassroomId and other info). Want to implement cascading dropdown are grade and classroom. Here Problem! at modal popup bootstrap cascading dropdown has some misses. Cascading dropdown are working in content page, but I want to work with modal popup .

<div class="form-group">
                <label asp-for="CurrentGradeId" class="col-form-label">Grade Name</label>
                <select asp-for="CurrentGradeId" asp-items="@Model.SelectListGrades" class="form-control" id="GradeDropdown">
                    <option value="0" selected disable">Choose...</option>
                </select>
                <span asp-validation-for="CurrentGradeId" class="text-danger"></span>
</div>
<div class="form-group">
                <label asp-for="CurrentClassroomId" class="col-form-label">Classroom Name</label>
                <select asp-for="CurrentClassroomId" class="form-control" id="classroom-dropdown">
                    <option value="" selected disabled>Select Classroom</option>
                </select>
                <span asp-validation-for="CurrentClassroomId" class="text-danger"></span>
</div>

    @section Scripts {
    <script>
        $(document).ready(function () {
            $('#GradeDropdown').change(function () {
                var gradeId = $(this).val();
                if (gradeId) {
                    $.ajax({
                        url: '@Url.Action("GetClassroomByGrade", "Students")?gradeId=' + gradeId,
                        type: 'GET',
                        success: function (data) {
                            $('#classroom-dropdown').empty();
                            $('#classroom-dropdown').append('<option value="" selected disabled>Select Classroom</option>');
                            $.each(data, function (index, classroom) {
                                $('#classroom-dropdown').append('<option value="' + classroom.id + '">' + classroom.name + '</option>');
                            });
                        },
                        error: function () {
                            console.log("Error loading classrooms.");
                        }
                    });
                } else {
                    $('#classroom-dropdown').empty();
                    $('#classroom-dropdown').append('<option value="" selected disabled>Select Classroom</option>');
                }
            });
        });



    </script>
}

public async Task<IActionResult> GetClassroomByGrade(int gradeId)
{
    var classrooms = await _db.Classrooms.Where(c => c.GradeId == gradeId).ToListAsync();
    var result = classrooms.Select(c => new { id = c.Id, name = c.SectionInfo });
    return Json(result);
}
    

Answer 1

Your codes worked well in myside. See my codes below.

@model WebAppMvc.Controllers.GradeGlass

@* <div class="form-group">
    <label asp-for="CurrentGradeId" class="col-form-label">Grade Name</label>
    <select asp-for="CurrentGradeId" asp-items="@Model.SelectListGrades" class="form-control" id="GradeDropdown">
        <option value="0" selected disable">Choose...</option>
    </select>
    <span asp-validation-for="CurrentGradeId" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="CurrentClassroomId" class="col-form-label">Classroom Name</label>
    <select asp-for="CurrentClassroomId" class="form-control" id="classroom-dropdown">
        <option value="" selected disabled>Select Classroom</option>
    </select>
    <span asp-validation-for="CurrentClassroomId" class="text-danger"></span>
</div> *@

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                
                <div class="form-group">
                    <label asp-for="CurrentGradeId" class="col-form-label">Grade Name</label>
                    <select asp-for="CurrentGradeId" asp-items="@Model.SelectListGrades" class="form-control" id="GradeDropdown">
                        <option value="0" selected disable">Choose...</option>
                    </select>
                    <span asp-validation-for="CurrentGradeId" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="CurrentClassroomId" class="col-form-label">Classroom Name</label>
                    <select asp-for="CurrentClassroomId" class="form-control" id="classroom-dropdown">
                        <option value="" selected disabled>Select Classroom</option>
                    </select>
                    <span asp-validation-for="CurrentClassroomId" class="text-danger"></span>
                </div>

            </div>

        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {
            $('#GradeDropdown').change(function () {
                var gradeId = $(this).val();
                if (gradeId) {
                    $.ajax({
                        url: 'https://localhost:7064/modal/GetClassroomByGrade?gradeId=' + gradeId,
                        type: 'GET',
                        success: function (data) {
                            $('#classroom-dropdown').empty();
                            $('#classroom-dropdown').append('<option value="" selected disabled>Select Classroom</option>');
                            $.each(data, function (index, classroom) {
                                $('#classroom-dropdown').append('<option value="' + classroom.id + '">' + classroom.name + '</option>');
                            });
                        },
                        error: function () {
                            console.log("Error loading classrooms.");
                        }
                    });
                } else {
                    $('#classroom-dropdown').empty();
                    $('#classroom-dropdown').append('<option value="" selected disabled>Select Classroom</option>');
                }
            });
        });



    </script>
}

This is the controller and model

public class ModalController : Controller
 {
     public IActionResult Index()
     {
         var model = new GradeGlass { 
             SelectListGrades = new List<SelectListItem> {
                 new SelectListItem{
                     Text = "Grade 1", Value = "g1",Selected = false
                 },
                 new SelectListItem{
                     Text = "Grade 2", Value = "g2",Selected = false
                 },
                 new SelectListItem{
                     Text = "Grade 3",Value = "g3",Selected = false
                 }
             },
         };
         return View(model);
     }

     public async Task<IActionResult> GetClassroomByGrade(int gradeId)
     {
         var res = new List<GradeGlass>
         {
             new GradeGlass{ Id = "c1", name = "class 1"},
             new GradeGlass{ Id = "c2", name = "class 2"}
         };
         return Json(res);
     }

 }

 public class GradeGlass {
     public string CurrentGradeId { get; set; }
     public string CurrentClassroomId { get; set; }
     public string Id { get; set; }
     public string name { get; set; }
     public List<SelectListItem> SelectListGrades { get; set; }
 }

At first, I used the codes not in modal, whiching working fine. But it doesn't work in the modal popup, I thought I reproduced your issue, later I noticed that I used the same html content which having the same DOM Id, then I comment the main content part, then the modal cascading dropdown worked for me.