Loading
Cascading DropDownList: Updating an existing value   

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.

  1. "~/js/store-index.js" asp-append-version="true">  
  2. "text/javascript">  
  3.         $('#modal-action-store').on('shown.bs.modal', function (e) {  
  4.             var items = "Select";  
  5.             $('#DistrictID').html(items);  
  6.         });  
  7.   
  8. "text/javascript">  
  9.     $('#modal-action-store').on('shown.bs.modal', function (e) {  
  10.         $('#DepartmentID').change(function () {  
  11.             var url = '@Url.Content("~/")' + "Stores/GetDistrict";  
  12.             var ddlsource = "#DepartmentID";  
  13.             $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {  
  14.                 var items = '';  
  15.                 $("#DistrictID").empty();  
  16.                 $.each(data, function (i, district) {  
  17.                     items += " + district.value + "'>" + district.text + "";  
  18.                 });  
  19.                 $('#DistrictID').html(items);  
  20.             });  
  21.         });  
  22.     });  
  23.   
 

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:

 

Thanks in advance.

EDIT: Additional info

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

  1. public class StoreIndexData  
  2. {  
  3.     public int DepartmentID { get; set; }  
  4.     public string DepartmentName { get; set; }  
  5.   
  6.     public int DistrictID { get; set; }  
  7.     public string DistrictName { get; set; }  
  8.   
  9.     public int StoreID { get; set; }  
  10.     public int StoreChainID { get; set; }  
  11.     public string StoreName { get; set; }  
  12.     public string StoreAddress { get; set; }  
  13.     public int StoreArea { get; set; }  
  14. }  
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:
  1. public JsonResult GetDistrict(int DepartmentID)  
  2.     {  
  3.         List DistrictList = new List();  
  4.         DistrictList = (from district in _context.Districts  
  5.                         where district.DepartmentID == DepartmentID  
  6.                         select district).ToList();  
  7.         DistrictList.Insert(0, new District { DistrictID = 0, DistrictName = "Select" });  
  8.         return Json(new SelectList(DistrictList, "DistrictID", "DistrictName"));  
  9.     }  
Thanks for any reply that helps! 

2 Replies

Know the answer? Post it — somebody with the same question will find it here.