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>

在这里，我将区域下拉列表设置为空列表，因为我将用JS填充它。

之后我将以下J包含在Populate the 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值放在下拉列表中，但是区域下拉列表不会填充该商店具有的值或其他可能的值以防用户想要更新此值特别是商店区。

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

Answer 2

另一个选项在Json中发送。

在您的控制器中：

获取部门的地区列表：

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

以Json格式发送：

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

在您的jQuery代码中：

清除下拉列表：
```
$("#ddlMotivo").empty();
```

使用DistrictList项目填充下拉列表（在AJAX成功：部分中）：

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

级联DropDownList：更新现有值

2 个答案: