ASP.NET Core模态框下拉框选中值获取异常求助

问题描述 #

通过AJAX加载PartialView到模态框后，三个绑定相同数据源的下拉框渲染正常，但点击保存按钮调用savemodal函数获取选中值时：

• #thebankid1和#thebankid3始终返回第一条数据的值
• #thebankid2返回空值

相关代码 #

Controller代码 #

ViewData["Banks"] = new SelectList(bankslist, "Id", "banks");
ViewBag.Banks = new SelectList(bankslist, "Id", "banks");

视图/PartialView代码 #

<select class="form-control" asp-items="ViewBag.Banks" id="thebankid1"></select>

@Html.DropDownList("Id", ViewBag.Banks as SelectList, "Select----", new { @id = "thebankid2", @class = "form-control"})

<select class="form-control" asp-items="@(ViewData["Banks"] as SelectList)" id="thebankid3"></select>

AJAX加载模态框代码 #

function View(e) {
    var departement_id = e;
    $.ajax
    ({
        url: '/DashBoard/UserPageView' + "?date=" + e,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $('.modal-body').html(data);
            $("#myModal").modal("show");
            initializeFlatpickr();
            $("#kt_datepicker_11").flatpickr(
                {
                    static: true
                }
            );
        }
    });
}

模态框HTML代码 #

<div class="modal fade " data-bs-backdrop="static" id="myModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" onclick="savemodal()" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

jQuery获取选中值代码 #

function savemodal(e) {
    var selectedBankId = $("#thebankid1").val();
    var selectedBankId2 = $("#thebankid2").val();
    var selectedBankId3 = $("#thebankid3").val();

    alert(selectedBankId);
    alert(selectedBankId2);
    alert(selectedBankId3);
}

UserPageView Action代码 #

public IActionResult UserPageView(DateTime date)
{
    var gert = new List<verss>();
    gert.Clear();

    List<SqlParameter> sqlParms = new List<SqlParameter>
    {
        new SqlParameter { ParameterName = "@regie", Value = 22 },
        new SqlParameter { ParameterName = "@date ", Value = date },
    };

    var bankslist = _context.Banks.ToList();

    gert = _context.Versses
       .FromSqlRaw("EXECUTE dbo.gettap2 @regie, @date", sqlParms.ToArray())
       .AsNoTracking()
   .ToList();

    ViewData["Banks"] = new SelectList(bankslist, "Id", "banks");
    ViewBag.Banks = new SelectList(bankslist, "Id", "banks");

    return PartialView("_vers2", gert );
}

解决方案 #

问题根源 #

1. 重复ID冲突：多次加载PartialView后，页面残留旧的下拉框元素，相同ID导致jQuery获取到最早加载的元素而非当前模态框内的元素。
2. 绑定名称冲突：@Html.DropDownList("Id", ...)的名称与模型verss的Id属性重名，框架自动绑定模型空值，覆盖用户选中项。
3. Tag Helper无绑定字段：未设置asp-for的下拉框在动态场景下易被框架填充默认值，导致选中状态异常。

修复步骤 #

1. 清理模态框旧内容，避免重复ID

修改AJAX回调，先清空再插入新内容，并添加模态框关闭时的清理逻辑：

function View(e) {
    var departement_id = e;
    $.ajax({
        url: '/DashBoard/UserPageView?date=' + e,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $('.modal-body').empty().html(data);
            $("#myModal").modal("show");
            initializeFlatpickr();
            $("#kt_datepicker_11").flatpickr({ static: true });
        }
    });
}

// 模态框关闭时清空内部内容
$('#myModal').on('hidden.bs.modal', function () {
    $(this).find('.modal-body').empty();
});

2. 修改DropDownList绑定名称，避免冲突

将@Html.DropDownList的第一个参数改为非模型属性名称：

@Html.DropDownList("SelectedBankId2", ViewBag.Banks as SelectList, "Select----", new { @id = "thebankid2", @class = "form-control"})

3. 为Tag Helper下拉框添加绑定字段

给asp-items下拉框添加asp-for属性，指定临时存储选中值的字段：

<select class="form-control" asp-for="SelectedBankId1" asp-items="ViewBag.Banks" id="thebankid1"></select>
<select class="form-control" asp-for="SelectedBankId3" asp-items="@(ViewData["Banks"] as SelectList)" id="thebankid3"></select>

在UserPageView方法中添加对应ViewData：

ViewData["SelectedBankId1"] = "";
ViewData["SelectedBankId3"] = "";

4. 限定选择器范围，确保获取当前模态框内元素

修改savemodal函数，通过模态框ID定位元素：

function savemodal() {
    var $modal = $("#myModal");
    var selectedBankId = $modal.find("#thebankid1").val();
    var selectedBankId2 = $modal.find("#thebankid2").val();
    var selectedBankId3 = $modal.find("#thebankid3").val();

    alert(selectedBankId);
    alert(selectedBankId2);
    alert(selectedBankId3);
}

5. 验证SelectList数据源正确性

确认bankslist的Id为唯一标识，banks为正确显示文本，避免option的value重复：

var bankslist = _context.Banks.ToList();
// 确保Id是主键或唯一值，banks是显示字段
ViewData["Banks"] = new SelectList(bankslist, "Id", "banks");
ViewBag.Banks = new SelectList(bankslist, "Id", "banks");

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