級聯DropDownList：更新現有值

Question

我有以下JS，我用它來填充下拉列表（District），具體取決於用戶選擇哪個Department。

下面的代碼：

首先我填充部下拉列表和我插入一個「選擇」的值用它作爲默認：

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 
    } 

然後我把它傳遞給觀，這是一個部分視圖_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> 

在這裏，我設置的區域下降ownlist作爲一個空列表，因爲我會用JS填充它。

之後我包括以下Js填充區下拉列表，首先與一個選擇，然後與所需的值取決於哪個部門選擇。

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

當我創建一個新的商店這工作罰款。

問題：

當我想更新現有的商店，我可以把係數值下拉列表中，但區下拉列表不會與那家商店有值或其他填充如果用戶想要更新這個特定的商店區域，可能的值。

IDEA：我懷疑我必須更改JavaScript來第2部分：

• 添加一個條件，如果我看到一個新或現有商店。
• 如果它是新的，你現在在做什麼，
  • 否則，而不是「選擇」，使相應的區（並出示），並與該部相應地區的其餘部分填充下拉。
• 在此之後，如果用戶更改部門下拉列表，請執行您迄今爲止所做的工作。

在此先感謝。

編輯：附加信息

我使用一個ViewModel，因爲我需要從幾個模型中的屬性：部門，地區和商店：

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

這是我的GET方法來獲得被修改的商店信息：

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

最後，這是我在第二個JScript中使用的Json來獲取列表的地區，一旦部一直選擇創建一個新的店：

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

Answer 1

在編輯模式下，你可以只填充選擇與ViewBag.ListofDistrict類似ViewBag.ListofDepartment。

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; 
    ViewBag.ListofDistrict = string.Empty; // Render blank 
    //...etc 
} 

public IActionResult Edit(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; 

    // Get district list for given department Id 
    ViewBag.ListofDistrict = DistrictList; 
    //...etc 
} 

<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID" 
    asp-items="@(new SelectList(@ViewBag.ListofDistrict,"DistrictID","DistrictName"))"> 
</select>