Каскадные два выпадающих в asp.net MVC с использованием AJAX не работает

Question

Я пытаюсь показать список тренеров в раскрывающемся списке, когда выбран город.Вот мои 2 выпадающих списка;

<td>
    <select id="ddlCity" class="form-control" onchange="getCoaches();">
        @foreach (var item in ViewBag.Cities)
        {
           <option value="@item.id">@item.City_Name</option>
        }
    </select>
</td>
<td>
   <select id="ddlCoach" class="form-control">

   </select>
</td>

Вот функция, которая возвращает список тренеров.он работает нормально и возвращает список тренеров;

[HttpPost]
public JsonResult getCoaches(string cityId)
{
    int intcityId = Convert.ToInt32(cityId);

    var coaches = db.tbl_Coordinators.Where(x => x.fk_cityid == intcityId).ToList();

    return Json(coaches);
}

Вот код ajax.Вместо того, чтобы заполнять список тренеров, он переходит к ошибке.

function getCoaches(){

    $('#ddlCoach option').remove();
    alert('in function');
    var selected_City = $("#ddlCity :selected").text();
    var selected_City_Value = $("#ddlCity :selected").val();
    alert(selected_City_Value);
    $.ajax({

        type: "POST",
        url: "/Admin/getCoaches",
        datatype: "Json",
        data: { cityId: selected_City_Value },
        success: function (data) {
            debugger;
            console.log(data);
            alert('success' + data);

            $.each(data, function (index, value) {
                $('#ddlCoach').append('<option value="' + value.id + '">' + value.Cordinator_Name + '</option>');
            });

        }
        ,error: function(jqXHR, status,err){

            alert("Error");
        }
    });
} 

Я пробовал много других решений, но ни одно из них не работает.Я думаю, что-то не так в коде ajax, и я не знаю, как его отладить.

Answer 1

Сначала напишите ваш getCoaches контроллер POST метод следующим образом:

[HttpPost]
public JsonResult getCoaches(int cityId)
{
    var coaches = db.tbl_Coordinators.Where(x => x.fk_cityid == cityId).ToList();
    var coachSelectList = new SelectList(coaches , "Id", "Cordinator_Name"); // ensure that your coach model class primary key name is `Id`
    return Json(coachSelectList);
}

Затем напишите ваш GetCoaches метод javaScript следующим образом:

function getCoaches(){
    var ddlCoachSelector = $('#ddlCoach');
    ddlCoachSelector.empty();

    var selectedCity = $("#ddlCity").val();

    $.ajax({
        type: "POST",
        url: "/Admin/getCoaches",
        data: { cityId: selectedCity },
        success: function (data) {
            if(data.length> 0){
                 ddlCoachSelector.append($("<option>").val("").text("Select Coach"));
                 $(data).each(function(index, item) {
                       ddlCoachSelector.append($("<option>").val(item.Value).text(item.Text));
                 });
            } else{
                ddlCoachSelector.append($("<option>").val("").text("Coach list empty!"));
            }

        },
        error: function(jqXHR, status,err){

            alert("Error");
        }
    });
} 

Надеюсь, он будет работатьдля вас.