级联下拉列表中的第二个下拉列表未加载ASP.NET CORE

问题描述

请问有人可以帮助我解决这个问题，我没有收到任何错误消息，但是第二个下拉列表没有加载，并且似乎数据没有绑定？

The JQUERY

<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
    $(document).ready(function () {
        var items = "<option value= '0'>Select</option>";
        $('#CitiesId').html(items);
    });

    $('#ProvinceId').change(function () {
               
        $.getJSON("vendors / GetCityList",{ ProvinceId: $("#ProvinceId").val() },function (data) {
            var items = '';
            $("#CitiesId").empty();
            $.each(data,function (index,Cities) {
                items += "<option value='" + Cities.value + "'>" + Cities.text + "</option>";
            });
            $('#CitiesId').html(items);
        });
    });
</script>

控制器

public JsonResult GetCity(int ProvinceId)
        {
            List<Cities> CitiesList = new List<Cities>();
            CitiesList = (from Cities in _context.Cities where Cities.ProvinceId == ProvinceId select   Cities).ToList();
            CitiesList.Insert(0,new Cities { CitiesID = 0,CitiesName = "Select" });
            return Json(new SelectList(CitiesList,"CitiesId","CitiesName"));

        }
 public IActionResult Create()
        {
           
           
            List<Province> ProvinceList = new List<Province>();
            ProvinceList = (from Province in _context.Provinces select Province).ToList();

            ProvinceList.Insert(0,new Province { ProvinceId = 0,ProvinceName = "Select" });
            ViewBag.listofProvince = ProvinceList;
            return View();

        }

视图

 <div class="form-group">
                        <label asp-for=" Province" class="control-label"></label>
                        <select asp-for="ProvinceId" class="form-control" asp-items="@(new SelectList(@ViewBag.listofProvince,"ProvinceId","ProvinceName"))"></</select>
                    </div>

                    <div class="form-group">
                        <label class="control-label">City</label>
                        <select class="form-control" id="CitiesId" name="CitiesId" asp-for="CitiesId" asp-items="@(new SelectList(string.Empty,"CitiesName"))"></select>

                    </div>

我似乎无法弄清楚哪里出了问题。

解决方法

这是一个演示：

城市：

 public class Cities
    {
        public int CitiesId { get; set; }
        public string CitiesName { get; set; }
    }

省：

public class Province {
        public int ProvinceId { get; set; }
        public string ProvinceName { get; set; }
    }

DefaultController（我使用虚假数据进行测试）：

public JsonResult GetCity(int ProvinceId)
    {
        List<Cities> CitiesList = new List<Cities>();
        CitiesList.Insert(0,new Cities { CitiesId = 0,CitiesName = "Select" });
        CitiesList.Insert(1,new Cities { CitiesId = 1,CitiesName = "Select1" });
        CitiesList.Insert(2,new Cities { CitiesId = 2,CitiesName = "Select2" });

        return Json(new SelectList(CitiesList,"CitiesId","CitiesName"));

    }
    public IActionResult Create()
    {


        List<Province> ProvinceList = new List<Province>();
        ProvinceList.Insert(0,new Province { ProvinceId = 0,ProvinceName = "Select" });
        ProvinceList.Insert(1,new Province { ProvinceId = 1,ProvinceName = "Select1" });
        ProvinceList.Insert(2,new Province { ProvinceId = 2,ProvinceName = "Select2" });
        ViewBag.ListofProvince = ProvinceList;
        return View();

    }

查看：

<div class="form-group">
    <label id="Province" class="control-label"></label>
    <select id="ProvinceId" class="form-control" asp-items="@(new SelectList(@ViewBag.ListofProvince,"ProvinceId","ProvinceName"))"></select>
</div>

<div class="form-group">
    <label class="control-label">City</label>
    <select class="form-control" id="CitiesId" name="CitiesId" asp-items="@(new SelectList(string.Empty,"CitiesName"))"></select>

</div>
@section scripts{
    <script>
        $(document).ready(function () {
            var items = "<option value= '0'>Select</option>";
            $('#CitiesId').html(items);
        });

        $('#ProvinceId').change(function () {
            //I use DefaultController,so I change the Url,If you use a controller named Vendors,you can use url like `/Vendors/GetCity`
            $.getJSON("/Default/GetCity",{ ProvinceId: $("#ProvinceId").val() },function (data) {
                var items = '';
                $("#CitiesId").empty();
                $.each(data,function (index,Cities) {
                    items += "<option value='" + Cities.value + "'>" + Cities.text + "</option>";
                });
                $('#CitiesId').html(items);
            });
        });
    </script>
}

结果：