级联下拉错误 ASP.Net Core 2.0答案

【问题标题】：Cascading Dropdown Error ASP.Net Core 2.0级联下拉错误 ASP.Net Core 2.0
【发布时间】：2018-04-29 21:08:52
【问题描述】：

我正在尝试使用 jQuery 根据省为城市创建级联下拉列表，但我一直收到错误消息：

加载资源失败：net::ERR_SPDY_PROTOCOL_ERROR

我的 Javascript 正在触发。

$(function () {
    $('#provinceList').change(function () {
        var url = '@Url.Content("~/")' + "Cities/GetCityByProvince";
        var ddlSource = "#provinceList";
        $.getJSON(url, { provID: $(ddlSource).val() }, function () {
            $("#cityList").append("<option value=1> Hi + </option>")
            // });
            //$("#cityList").html(items);
        })
    });
});

并且我类的返回对象已正确填充

public ActionResult GetCityByProvince(int provID)
{
    List<City> cities = new List<City>();
    cities = _context.Cities.Where(m => m.ProvinceId == provID).ToList();
    cities.Insert(0, new City { ID = 0, CityName = "Please select your nearest city" });
    var x = Json(new SelectList(cities, "Id", "CityName"));
    return Json(x);
}

但是我仍然收到此错误。

【问题讨论】：

可以帮助你stackoverflow.com/questions/42952906/…
@FelipeOriani 我看不出您发布的链接与问题有何关联。
你可以试试不同的浏览器吗？还可以查看浏览器开发者工具的网络选项卡，看看请求是否正确完成。还可以尝试在 JavaScript 代码之外单独重现请求。

标签： javascript c# jquery asp.net-mvc asp.net-core

【解决方案1】：

您可以使用此解决方案。换个浏览器试试。

jQuery(function ($) {
            $('select').on('change', function () {
                if ($(this).attr('data-parent') != null) {
                    var parent = $(this).attr('data-parent').replace(".", "\\\\.");
                    if (parent != null && param != undefined) {
                        var data = $.extend(
                        {
                            render: $(this).attr('data-parent'),
                            url: $(parent).attr('data-url'),
                            type: "get",
                            dataType: "html",
                            data:
                                    {
                                        "value": ($(this).val() == $(this).attr('data-master') ? null : $(this).val())
                                    }
                        }, data);
                        FromJson(data);
                        if ($(this).val() != "-Select-") {
                            $(parent).show();
                        }
                        else {
                            $(parent).hide();
                        }
                    }
                }
            });
        });


function FromJson(param) {

    $.ajax({
        url: param.url,
        type: 'GET',
        data: param.data,
        dataType: 'json',
        async: true,
        success: function (data) {
            var options = $(param.render);
            $(param.render).empty();
            options.append($('<option value=""/>').text("-Select-"));
            if (data.length > 0) {
                $.each(data, function () {
                    if (param.dataText == null) {
                        options.append($('<option />').val(this.Value).text(this.Text));
                    }
                    else {
                        options.append($('<option />').val(this.Value).text(this.str));
                    }
                });
            }
            else {
                options.append($('<option />').text("-Error-"));
            }

            if (param.selected != null && param.selected != 0) {
                $(param.render).val(param.selected);
            }
        }
    });
}

那么;

<select data-parent="#state" id="city" name="city" class="form-control valid" data-url="/Json/city" data-type="live">
</select>

<select data-parent="#town" id="state" name="state" class="form-control valid"  data-url="/Json/state">
</select>

<select data-parent="#zip" id="town" name="town" class="form-control valid"  data-url="/Json/town">
</select>

<select id="zip" name="zip" class="form-control valid"  data-url="/Json/zip">
</select>

【讨论】：