Невозможно получить список таблицы Chil в раскрывающемся списке каскадных данных в ASP. NET MVC - C#

Question

У меня есть три таблицы, Student таблица CountryId, Country таблица имеет CityId на SQL сервере. Я могу получить всю страну в раскрывающемся списке «Создать студенческое представление» по JQuery Ajax, но невозможно получить все города одинаковым образом. Город не загружен, и консоль возвращает эту ошибку:

jquery -3.3.1. js: 9600 POST http://localhost: 4007 / Students / GetCityByCountries / 2 500 (Внутренняя ошибка сервера)

Здесь, в моем Students коде контроллера:

private StudentCountryFileDBEntities1 db = new StudentCountryFileDBEntities1();

public JsonResult GetCountries()
{
        return Json(db.Countries.Select(c => new
        {
            countryId=c.CountryId,
            countryName=c.CountryName
        }).ToList(),JsonRequestBehavior.AllowGet);
}

public JsonResult GetCityByCountries(int countryId)
{
        //var cityList = this.GetCitiesByConId(countryId);

        var cities = db.Cities.Where(c=>c.CountryId==countryId).Select(ct => new {
            cityId = ct.CityId,
            cityName = ct.CityName
        }).ToList();
        return Json(cities);

}

Вот мой взгляд:

<div class="form-group">
    <label for="CountryId" class="control-label col-md-2"><b>Country</b></label>
    <div class="col-md-10">
        <select class="form-control" id="CountryId" name="CountryName"></select>
        @Html.ValidationMessageFor(model => model.CountryId, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
      <label for="CityId" class="control-label col-md-2"><b>City</b></label>
      <div class="col-md-10">
          <select class="form-control" id="CityId" name="CityName"></select>
          @*@Html.DropDownList("City", ViewBag.Cities as SelectList, "Choose City", new { @class = "inputBox", @id = "CityId" })*@

          @Html.ValidationMessageFor(model => model.CityId, "", new { @class = "text-danger" })
      </div>
</div>

и код Jquery ajax:

<script>    
$(document).ready(function () {
        $.ajax({
            type: "Get",

            url: "/Students/GetCountries",
            data: "{}",
            success: function (data) {
                var countries = "<option value=''>Select Country</option>";
                for (var i = 0; i < data.length; i++) {
                    countries += "<option value='" + data[i].countryId + "'>" + data[i].countryName + "</option>";
                }

                $('#CountryId').html(countries);
        }
});

$('#CountryId').change(function () {
            $.ajax({
                type: "POST",

                url: "/Students/GetCityByCountries/" + $('#CountryId').val(),
                data: "{id:$('#CountryId').val()}",
                success: function (res) {
                    var cities = "<option value=''>Select Cities</option>";
                    $('#CityId').html('');
                    for (var i = 0; i < res.length; i++) {
                        cities += "<option value='" + res[i].cityId + "'>" + res[i].cityName + "</option>";
                    }
                    $('#CityId').html(cities);
                }
            });
});
</script>

Answer 1

Пример в jQuery. Вы должны передать объект контроллеру.

        var objParam = new Object();
        objParam.countryId = $('#CountryId').val();

        $.ajax({
            type: "POST",
            url: "/Students/GetCityByCountries/",
            contentType: "application/json",
            data: JSON.stringify(objParam),
            async: false,
            success: function (res) {

                $('#CountryId').empty();
                if (res.length > 0) {
                    $.each(res, function (key, Data) {
                        $('#CountryId').append($("<option></option>").val(Data.countryId).html(Data.countryName));
                    });
                }
                else {
                    $('#CountryId').empty();
                }

            },
            error: function (res) {
                responseData = null;
            }
        });