Cascading DropDownList: Updating an existing value

Hello,

I have the following JS which I use to populate a dropdownlist District depending on whichDepartment the user chose.

Here is the code:

First I populate the Department dropdownlist and I insert a 'Select' value to use it as default:

public IActionResult Create(int? id)
    {
        List<Department> DepartmentList = new List<Department>();
        DepartmentList = (from department in _context.Departments
                          select department).ToList();
        DepartmentList.Insert(0, new Department { DepartmentID = 0, DepartmentName = "Select" });
        ViewBag.ListofDepartment = DepartmentList;
        //...etc
    }

Then I pass it to the View, which is a PartialView called _Create

<formasp-action="Create"role="form"><divasp-validation-summary="ModelOnly"class="text-danger"></div><divclass="modal-body form-horizontal"><divclass="form-group"><labelasp-for="DepartmentID"class="col-md-2 control-label"></label><divclass="col-md-10"><selectasp-for="DepartmentID"class="form-control"asp-items="@(new SelectList(@ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select></div></div><divclass="form-group"><labelclass="col-md-2 control-label">District</label><divclass="col-md-10"><selectclass="form-control"id="DistrictID"name="DistrictID"asp-for="DistrictID"asp-items="@(new SelectList(string.Empty,"DistrictID","DistrictName"))"></select></div></div>

Here, I'm setting the District dropdownlist as a Empty list, since I'll populate it with JS.

After that I include the following Js to Populate the District dropdownlist, first with a Select, and then with the values required depending on which Department was chose.

<scriptsrc="~/js/store-index.js"asp-append-version="true"></script><scripttype="text/javascript">$('#modal-action-store').on('shown.bs.modal',function(e){var items ="<option value='0'>Select</option>";$('#DistrictID').html(items);});</script><scripttype="text/javascript">$('#modal-action-store').on('shown.bs.modal',function(e){$('#DepartmentID').change(function(){var url ='@Url.Content("~/")'+"Stores/GetDistrict";var ddlsource ="#DepartmentID";$.getJSON(url,{DepartmentID:$(ddlsource).val()},function(data){var items ='';$("#DistrictID").empty();$.each(data,function(i, district){
                    items +="<option value='"+ district.value +"'>"+ district.text +"</option>";});$('#DistrictID').html(items);});});});</script>

This works fine when I create a new Store.

The problem:

When I want to update an existing Store, I can put the Department value inside the dropdownlist, but the District dropdownlist don't populate with the value which that Store has or the other possible values in case the user wants to update this particular Store district.

I suspect that I must add some functionality to my JS, but I don't really know how.

Thanks in advance.

Edit: Additional info

I'm using a ViewModel since I need the properties from several models: Department, District and Store:

public class StoreIndexData
{
    public int DepartmentID { get; set; }
    public string DepartmentName { get; set; }

    public int DistrictID { get; set; }
    public string DistrictName { get; set; }

    public int StoreID { get; set; }
    public int StoreChainID { get; set; }
    public string StoreName { get; set; }
    public string StoreAddress { get; set; }
    public int StoreArea { get; set; }
}

And this is my Get Method to get the info of the Store that is been edited:

public IActionResult Create(int? id)
    {
        List<Department> DepartmentList = new List<Department>();
        DepartmentList = (from department in _context.Departments
                          select department).ToList();
        DepartmentList.Insert(0, new Department { DepartmentID = 0, DepartmentName = "Select" });
        ViewBag.ListofDepartment = DepartmentList;

        //Lista de Cadena
        List<StoreChain> ChainList = _context.StoreChains.ToList();
        ChainList.Insert(0, new StoreChain { StoreChainID = 0, ChainName = "Select" });

        ViewBag.ChainList = new SelectList(ChainList, "StoreChainID", "ChainName");

        StoreIndexData edit = new StoreIndexData();
        if (id.HasValue)
        {
            var store = new Store();
            store = _context.Set<Store>().Include(d=>d.Districts).SingleOrDefault(c => c.StoreID == id.Value);

            StoreIndexData model = new StoreIndexData()
            {
                StoreID = store.StoreID,
                StoreChainID = store.StoreChainID,
                StoreName = store.StoreName,
                StoreAddress = store.StoreAddress,
                DistrictID = store.DistrictID,
                DepartmentID = store.Districts.DepartmentID,
            };
            return PartialView("~/Views/Shared/Stores/_Create.cshtml", model);
        }

        return PartialView("~/Views/Shared/Stores/_Create.cshtml");
    }

Finally, this is the Json I use in the second JScript to grab the list of Districts once the Department has been choose in the creation of a new store:

public JsonResult GetDistrict(int DepartmentID)
    {
        List<District> DistrictList = new List<District>();
        DistrictList = (from district in _context.Districts
                        where district.DepartmentID == DepartmentID
                        select district).ToList();
        DistrictList.Insert(0, new District { DistrictID = 0, DistrictName = "Select" });
        return Json(new SelectList(DistrictList, "DistrictID", "DistrictName"));
    }