Cascading Dropdownlist & ViewModel

Question

Hello,

I have the following models: Department (as city), District and Store.

Department has one to many Districts

Districts has one to many Stores

I'm constructing a view where I create a new Store and the user can choose the Department(city) and then the District dropdownlist updates instantly with the corresponding districts.

For this I created this ViewModel: StoreIndexData

public class StoreIndexData
{
public Store Stores { get; set; }
public Department Departments { get; set; }
}

This is the Controller where I populate the dropdownlist for the Department:

public IActionResult Create() {
   //Departaments List
   List Departmentlist = _context.Departments.ToList();
   Departmentlist.Insert(0, new Department { DepartmentID = 0,
                                 DepartmentName = "Select" });
 ViewBag.DepartmentList = new SelectList(Departmentlist,
                                 "DepartmentID", "DepartmentName");
return View(); }

And this is the View:

@model Application.Models.ApplicationviewModels.StoreIndexData

<form asp-action="Create">
<div class="form-horizontal">
    <h4>Store</h4>
    <hr />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group">
        <label asp-for="Departments.DepartmentID" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="Departments.DepartmentID"
             class="form-control" asp-items="ViewBag.DepartmentList"></select>
        </div>
    </div>

    <div class="form-group">
        <label asp-for="Stores.DistrictID" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Stores.DistrictID, new SelectList(" "), "Select", new { @class = "form-control"})
        </div>
    </div>

 

And in the end of the view, this is my JS section:

<script src="~/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#DepartmentID").change(function () {
            $.get("/Stores/GetDistrictList", { DepartmentID: $("#DepartmentID").val() }, function (data) {
                $("#DistrictID").empty();
                $.each(data, function (index, row) {
                    $("#DistrictID").append("<option value='" + row.DepartmentID + "'>" + row.DepartmentName + "</option>")
                });
            });
        })
    });
</script>

 

This section calls this action:

    public JsonResult GetDistrictList(int DepartmentID)
{
    List DistrictList = _context.Districts.Where(x => x.DepartmentID == DepartmentID).ToList();
    return Json(DistrictList);
}

And that's it.

When I run the application, well, the District dropdownlist don't populate

_Questions:

• Is it possible that I can't access this properties inside the JScript

  "#DepartmentID"

  like this since I'm using a viewmodel? Maybe I need to change it to something like "#Departments.DepartmentID"?

• Could this work using a ViewModel? I'm not adding the Department property inside the Store model because it would be irrelevant since it gets its Department thru the District.

• I saw in the example that I followed that they added this line ProxyCreationEnabled = false Inside the JsonResult action. I didn't add it because I don't know what it does and don't know the consecuences in my application if I add it.

Thanks in advance for any help.

Regards,

_Update:

I put a break point on this line, inside the JsonResult:

List<District> DistrictList = _context.Districts.
      Where(x => x.DepartmentID == DepartmentID).ToList();

But the application did not stopped there when I used the Department dropdownlist that is supossed to call that JsonResult. I believe the script section is what might be wrong.