Get value from database on dropdown value change in ASP.NET Core

Question

I have a drop down list where I have semesters lets say "Semester 1, Semester 2". Each semester has some course code. I want to get data of course code and show in a text field on dropdown change using jquery.

in .cshtml file I have

 <div class="row">
                <div class="input-field col s12">
                    <select asp-for="Course.SemesterNumber" asp-items="Model.Semesters" id="cc">
                        <option value="" disabled selected>Choose your option</option>
                    </select>
                    <label asp-for="Course.SemesterNumber">Select desired semester to enroll</label>
                </div>
            </div>

            <div class="row" id="viewCourseCodeField">
            </div>

controller method

  public JsonResult GetCourseOfSemester(string semester)
    {
        var courses = _context.Course.Where(cat => cat.SemesterNumber == semester).ToListAsync();
        return Json(courses);
    } 

jquery

$(document).ready(function () {
$("#cc").change(function () {
    var courses = $("#viewCourseCodeField");
    var semesterName = $("#cc option:selected").text();
    $.getJSON('/Student/GetCourseOfSemester', {semester: semesterName}, function (response) {
        var courseField = "";
        $.each(response, function (key, value) {
            if (value == null) {
                $("#viewCourseCodeField").empty();
            } else {
                courseField += "<div class=\"input-field col s12 l12\">\n" +
                    "                        <input id=\"" + value.courseId + "\" type=\"text\" value=\"" + value.courseCode + "\">\n" +
                    "                        <label class=\"active\" for=\"course\">" + value.courseCode + "</label>\n" +
                    "                    </div>";
            }
        });
        courses.html(courseField);
    })
});

});

In response its returning my desired data. But I can't put the data in text fields. Its showing undefined. Please help what I am doing wrong here.

Answer 1

I have run your sample in my system and there were two problems. First, you should change your action to this to allow get JSON result in your action :

public JsonResult GetCourseOfSemester(string semester)
{
    var courses = _context.Course.Where(cat => cat.SemesterNumber == semester).ToListAsync();
    return Json(courses, JsonRequestBehavior.AllowGet);
} 

Second, your response ajax data is uppercase by default so change your jquery code like this :

$(document).ready(function () {
        $("#cc").change(function () {
            var courses = $("#viewCourseCodeField");
            var semesterName = $("#cc option:selected").text();
            $.getJSON('/Home/GetCourseOfSemester', { semester: semesterName }, function (response) {
                console.log(response);
                var courseField = "";
                $.each(response, function (key, value) {
                    if (value == null) {
                        $("#viewCourseCodeField").empty();
                    } else {
                        courseField += "<div class=\"input-field col s12 l12\">\n" +
                            "                        <input id=\"" + value.CourseId + "\" type=\"text\" value=\"" + value.CourseCode + "\">\n" +
                            "                        <label class=\"active\" for=\"course\">" + value.CourseCode + "</label>\n" +
                            "                    </div>";
                    }
                });
                courses.html(courseField);
            })
        });
    });