Cascading DropDownList: Updating an existing value

Question

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

Here 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 DepartmentList = new List();
        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

form asp-action="Create" role="form">

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
    <div class="form-group">
        <label asp-for="DepartmentID" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="DepartmentID" class="form-control"
                    asp-items="@(new SelectList(@ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">District</label>
        <div class="col-md-10">
            <select class="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.

<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">
        $('#modal-action-store').on('shown.bs.modal', function (e) {
            var items = "<option value='0'>Select</option>";
            $('#DistrictID').html(items);
        });
</script>
<script type="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.

IDEA: I suspect that I must change the 2nd part of the JavaScript to:

• Add a conditional if I'm seeing a new or an existing store.
• If it is new, do what you are doing now,
  • Else, instead of 'Select', put the corresponding District (and show this) and fill the dropdown with the rest of districts corresponding with that Department.
• After this point, if the user change the Department dropdown, do what you have been doing up until now.

 

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; }
}

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 DistrictList = new List();
        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"));
    }

Thanks for any reply that helps!