级联下拉列表：更新现有值

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
    }

然后我将它传递给View，这是一个名为_Create的PartialView

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

在这里，我将 District 下拉列表设置为 Empty 列表，因为我将使用 JS 填充它。

之后我包括以下 Js 来填充 District 下拉列表，首先使用 Select，然后根据选择的部门使用所需的值。

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

当我创建新商店时，这很好。

问题：

当我想更新现有商店时，我可以将 Department 值放在下拉列表中，但 District 下拉列表不会填充该 Store 具有的值或其他可能的值，以防用户想要更新它特定的商店区。

IDEA：我怀疑我必须将 JavaScript 的第二部分更改为：

• 如果我看到新或现有商店，请添加条件。
• 如果是新的，做你现在正在做的，
  • 否则，不要选择“选择”，而是放置相应的地区（并显示此内容）并在下拉列表中填写与该部门对应的其他地区。
• 此后，如果用户更改了“部门”下拉菜单，请执行您到现在为止一直在做的事情。

提前致谢。

编辑：附加信息

我正在使用 ViewModel，因为我需要几个模型的属性：Department、District 和 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; }
}

这是我获取已编辑商店信息的 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.ListofDepartment 的ViewBag.ListofDistrict 填充选择。

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>

Answer 2

另一个选项在 Json 中发送。

在您的控制器中：

1. 获取部门的地​​区列表：

   List<SelectListItem> DistrictList = GeneralService.Mt_DistrictList_x_DepartmentID (DepartmentID );
   

2. 以Json格式发送：

   return Json(new { data = salida, DistrictList }, JsonRequestBehavior.AllowGet);
   

在您的 jQuery 代码中：

1. 清理下拉菜单：

   $("#ddlMotivo").empty();
   

2. 用 DistrictList 项填充下拉列表（在 AJAX 成功：部分）：

   for (var i = 0; i < data.DistrictList.length; i++) 
   {
     $("#ddlMotivo").append("<option value='" + data.DistrictList[i].Value + "'>" + 
     data.DistrictList[i].Text + "</option>");
   }