Cascading Dropdownlist & ViewModel

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:

publicIActionResultCreate(){//Departaments ListList<Department>Departmentlist= _context.Departments.ToList();Departmentlist.Insert(0,newDepartment{DepartmentID=0,DepartmentName="Select"});ViewBag.DepartmentList=newSelectList(Departmentlist,"DepartmentID","DepartmentName");returnView();}

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:

@section Scripts {<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<District> 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:

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