使用 ajax 在 asp.net mvc 中级联两个下拉列表不起作用

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>

这里是returns教练列表的函数。一切正常，returns教练名单；

[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");
        }
    });
}

我尝试过很多其他解决方案，但 none 都行得通。我想 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);
}

然后写下你的GetCoachesjavaScript方法如下：

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");
        }
    });
}

希望对你有用。

使用 ajax 在 asp.net mvc 中级联两个下拉列表不起作用

Cascading two dropdowns in asp.net mvc using ajax not working

c#

sql

ajax

asp.net-mvc

asp.net-ajax