在ASP.NET MVC中使用jquery ajax级联下拉列表

Question

我只是MVC和JQuery的初学者。 我正在尝试使用Country，State和City作为三个下拉列表创建一个简单的层叠下拉列表应用程序。 我已经使用JQuery ajax作为脚本来处理Dropdown更改事件。

在这里输入代码

国家从数据库正常加载，状态在下拉列表中正确加载，但是城市甚至不加载，我已经调试了很多，但是找不到解决方案。

谁能帮我这个忙。

以下是控制器部分中定义的功能

public JsonResult GetCityByStateId(int stateId)
        {
            using (MyDbContext db = new MyDbContext())
            {
                List<tblCity> lstCities = new List<tblCity>();
                lstCities = db.tblCities.Where(x => x.StateId == stateId).ToList();


                var lstToReturn = lstCities.Select(s => new { id = s.Id, Name = s.Name });
                return Json(lstToReturn, JsonRequestBehavior.AllowGet);

            }
        }


   public JsonResult GetStatesByCountryId(int countryId)
        {
            using (MyDbContext db = new MyDbContext())
            {
                List<tblState> lstStates = new List<tblState>();
                lstStates = db.tblStates.Where(x => x.CountryId == countryId).ToList();

                var lstToReturn = lstStates.Select(s => new { id = s.Id, Name = s.Name });
                return Json(lstToReturn, JsonRequestBehavior.AllowGet);


            }
        }

这是我的看法

<div class="row">
                        <div class="col-sm-12 col-md-6">

                            <div class="form-group" style="margin-left:10px;">
                                <label>Country</label>
                                <select id="CountryId" name="CountryId" required class="form-control show-tick">
                                    <option value="-1">Select Country</option>
                                    @if (lstCountry.Count > 0 && lstCountry != null)
                                    {
                                        foreach (var item in lstCountry)
                                        {
                                            <option value="@item.Id">@item.Name</option>
                                        }
                                    }
                                </select>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-6">

                            <div class="form-group" style="margin-right:10px;">
                                <label>Province</label>
                                <select id="SateId" required name="SateId" class="form-control"></select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">

                            <div class="form-group" style="margin-left:10px;">
                                <label>City</label>
                                <select id="CityId" name="CityId" class="form-control" required></select>
                            </div>
                        </div>
                    </div>

下面是我的脚本

 $(document).ready(function () {

    var ddlcountries = $('#CountryId');
    var ddlstates = $('#SateId');
    var ddlCities = $('#CityId');

    var txtConfirmPassword = $('#ConfirmPassword');
    var txtPassword = $('#Password');

    txtConfirmPassword.change(function () {
        if (!(txtPassword.val() == txtConfirmPassword.val())) {
            $('#lblPassword').text('Password & Confirm password does not match');
            $('#lblPassword').css('color', 'red');
        }
    })

    ddlcountries.change(function () {
        if ($(this).val() == '-1') {
            ddlstates.empty();
            ddlCities.empty();
            ddlstates.append($('<option/>', { value: -1, text: 'Select States' }));
            ddlCities.append($('<option/>', { value: -1, text: 'Select City' }));
            ddlcountries.val('-1');
            ddlstates.val('-1');
            ddlCities.val('-1');
            ddlstates.prop('disabled', true);
            ddlCities.prop('disabled', true);

        }
        else {
            alert(ddlcountries.val());
            $.ajax({
                url: '/Employer/GetStatesByCountryId',
                method: 'post',
                data: { countryId: $(this).val() },
                dataType: 'json',
                success: function (data) {
                    ddlstates.empty();
                    ddlstates.append($('<option/>', { value: -1, text: 'Select States' }))
                    ddlstates.prop('disabled', false);
                    $(data).each(function (index, item) {
                        ddlstates.append($('<option/>', { value: item.Id, text: item.Name }))
                    })
                }
            });

        }
    })

    ddlstates.change(function () {
        if ($(this).val() == '-1') {
            alert(ddlstates.val());
            ddlCities.empty();
            ddlCities.append($('<option/>', { value: -1, text: 'Select City' }));
            ddlCities.val('-1');
            ddlCities.prop('disabled', true);

        }
        else {
            alert(ddlstates.val());
            $.ajax({
                url: '/Employer/GetCityByStateId',
                method: 'post',
                data: { stateId: $(this).val() },
                dataType: 'json',
                success: function (data) {
                    ddlCities.empty();
                    ddlCities.append($('<option/>', { value: -1, text: 'Select City' }))
                    $(data).each(function (index, item) {
                        ddlCities.append($('<option/>', { value: item.Id, text: item.Name }))
                    })
                    ddlCities.prop('disabled', false);
                    ddlCities.val('-1');
                },
                error: function (err) {
                    alert(err + ' ' + $(this).val());
                }
            });

        }
    })



})

当我更改国家/地区下拉菜单并提醒其值时，它为我提供了正确的值，但是在相同情况下，如果对州/省/自治区/直辖市/自治区/直辖市/自治区/直辖市/自治区/直辖市/自治区/直辖市/自治区/直辖市......

Answer 1

从您对它未触发的评论来看，我猜您的问题与网址有关。 从这里https://msdn.microsoft.com/zh-cn/library/system.web.mvc.urlhelper.action(v=vs.118).aspx我建议您更改

url: '/Employer/GetStatesByCountryId',

至

url: '@Url.Action("GetStatesByCountryId", "Employer")',

这将建立一个URL，并将您的服务器位置添加到前面