second drop down in cascading drop down list not loading(ASP.NET CORE)

Question

please can anyone help me resolve this, i get no errors but the second drop down does not load and it seems the data is not binding?

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>

THE CONTROLLER

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();

        }

THE 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,"CitiesId", "CitiesName"))"></select>

                    </div>

I cannot seem to figure out what is wrong.

Answer 1

Here is a demo:

Cities:

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

Province:

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

DefaultController(I use fake data to test):

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();

    }

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,"CitiesId", "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>
}

result: