ASP.NET Core编辑页面级联下拉框SubAccount数据不显示问题

我用ASP.NET Core开发项目，Index列表页点击Edit按钮跳转至Edit页面后，其他数据详情都能正常展示，但SubAccount下拉框的已有数据无法显示。相关代码如下：

控制器代码 #

public async Task<IActionResult> Edit(string id, string nomor)
{
    if (id == null || nomor == null || _context.Mfbnkcoms == null)
    {
        return NotFound();
    }

    var model = await _context.Mfbnkcoms.Where(x => x.MfbnkcomBankId == id && x.MfbnkcomNoRekening == nomor).SingleOrDefaultAsync();
    if (model == null)
    {
        return NotFound();
    }

    var glaccountselect =
      _context.Mfcoas
        .Select(s => new
        {
            AccId = s.MfcoaAccount,
            AccDescription = $"{s.MfcoaAccount} -- £{s.MfcoaDes}"
        })
        .ToList();
    return View(model);
}

public IActionResult GetSubAccount(string sid)
{
    var SubAccountList = _context.Mfsoas.Where(s => s.MfsoaAcc == sid).Select(c => new { Id = c.MfsoaAccount, Name = string.Format("{0}-- £{1}", c.MfsoaAccount, c.MfsoaDes) }).ToList();
    return Json(SubAccountList);
}

视图代码 #

表单部分 #

<div class="form-group row">
<label for="GLAccount" class="col-md-2 col-form-label">GL Account</label>
<div class="col-md-6">
    <select asp-for="MfbnkcomAccount" asp-items="ViewBag.Glaccount" class="form-control select2" name="GLAccount" id="GLAccount" data-live-search="true" data-size="11">
        <option value="">-- Select Account --</option>
    </select>
</div>

<label for="SubAccount" class="col-md-2 col-form-label">Sub Account</label>
<div class="col-md-6">
    <select asp-for="MfbnkcomSubAcc" class="form-control select2" name="SubAccount" id="SubAccount" data-live-search="true" data-size="11">
        <option value="">-- Select SubAccount --</option>
    </select>
</div>

脚本与样式部分 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" integrity="sha512-CbQfNVBSMAYmnzP3IC+mZZmYMP2HUnVkV4+PwuhpiMUmITtSpS7Prr3fNncV1RBOnWxzz4pYQ5EAGG4ck46Oig==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script>
    $('.select2').select2({
        theme: "bootstrap"
    });
</script>

<script>
    $(function () {
        $("select#GLAccount").change(function () {
            var sid = $(this).val();

            $("select#SubAccount").empty();

            $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
                $.each(data, function (i, item) {
                    $("select#SubAccount").append(`<option value="${item.id}">${item.name}</option>`);
                });
            });
        })
    });
</script>

问题原因分析 #

• 页面初始化未加载SubAccount选项：当前仅GLAccount变更时才会异步加载SubAccount数据，但Edit页面初始化时GLAccount已有选中值，却未触发加载逻辑，导致SubAccount下拉框为空，无法显示已有选中值。
• 字段大小写不匹配：控制器返回的JSON字段是Id和Name，但脚本中使用item.id和item.name（小写），可能导致选项无法正确添加。
• GLAccount下拉框未绑定初始数据：控制器中glaccountselect变量未赋值给ViewBag.Glaccount，导致GLAccount下拉框无初始选项，后续SubAccount加载逻辑也无法触发。

解决步骤 #

1. 修复控制器GLAccount数据传递 #

在控制器Edit方法的return View(model);前添加代码，将GLAccount列表绑定到ViewBag：

ViewBag.Glaccount = new SelectList(glaccountselect, "AccId", "AccDescription");

2. 修改脚本，初始化时加载SubAccount #

重构JS逻辑，页面加载时自动根据GLAccount的初始值加载对应SubAccount，并设置选中状态：

$(function () {
    // 封装加载SubAccount的函数
    function loadSubAccounts(sid, selectedSubAcc) {
        $("select#SubAccount").empty();
        $.getJSON(`/BankCompanies/GetSubAccount?sid=${sid}`, function (data) {
            $.each(data, function (i, item) {
                // 匹配控制器返回的字段大小写
                const option = `<option value="${item.Id}" ${item.Id === selectedSubAcc ? 'selected' : ''}>${item.Name}</option>`;
                $("select#SubAccount").append(option);
            });
            // 更新Select2状态
            $("select#SubAccount").trigger("change");
        });
    }

    // GLAccount变更事件
    $("select#GLAccount").change(function () {
        var sid = $(this).val();
        loadSubAccounts(sid, "");
    });

    // 页面初始化时自动加载
    const initialGlAcc = $("select#GLAccount").val();
    const initialSubAcc = "@Model.MfbnkcomSubAcc";
    if (initialGlAcc) {
        loadSubAccounts(initialGlAcc, initialSubAcc);
    }
});

3. 确保Select2初始化逻辑正确 #

保持Select2初始化代码不变，通过trigger("change")让Select2在选项更新后重新渲染状态。

内容的提问来源于stack exchange，提问作者Haminteu