如何在AJAX成功后向表格追加含多列和下拉列表列的行及替代方案

根因说明 #

原实现无法生效的核心原因：@Html.ListBoxFor是Razor服务端渲染语法，仅会在页面首次加载时在服务端执行并转换为HTML字符串，写在客户端AJAX回调代码中时，Razor渲染阶段已经结束，代码不会被解析执行，无法生成可用的下拉框元素。

方案1：预渲染模板法（推荐新手使用） #

提前在视图中渲染好下拉框作为隐藏模板，AJAX追加行时直接克隆模板元素即可：

1. 页面中新增隐藏的下拉框模板

@model Sampleapplication.Models.samplemodel
<body>
    <!-- 新增下拉框模板，默认隐藏 -->
    <div id="deptListTemplate" style="display:none;">
        @Html.ListBoxFor(m => m.sDepartmentList, Model.lstToDepartment, new { @class = "dept-select", placeholder = "选择部门" })
    </div>
    <table id="tabledetails" class="table table-bordered loaded-table">
        <thead>
            <tr>
                <th><p>Id</p></th>
                <th><p>Name</p></th>
                <th><p>Department</p></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

2. 修改AJAX成功回调逻辑

success: function (data) {
    $.each(data, function (i, item) {
        // 克隆模板下拉框，生成唯一id避免冲突
        const $deptSelect = $("#deptListTemplate select").clone().attr("id", `Departmentlst_${item.Id}`).attr("name", `Departmentlst_${item.Id}`);
        // 构造表格行
        const $row = $("<tr>")
            .append(`<td class='prtoducttd1'>${item.Id}</td>`)
            .append(`<td class='prtoducttd2'>${item.Name}</td>`)
            .append($("<td class='prtoducttd11'>").append($deptSelect));
        $('#tabledetails tbody').append($row);
    });
}

方案2：纯JS动态生成法 #

如果部门选项需要动态更新，可先把服务端的选项数据序列化到前端，再通过JS动态生成下拉框：

1. 在页面Script中提前序列化部门选项

// 把服务端的部门选项转换为前端可用的JS数组
const deptOptions = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.lstToDepartment.Select(x => new { value = x.Value, text = x.Text })));

2. 修改AJAX成功回调逻辑

success: function (data) {
    $.each(data, function (i, item) {
        // 生成下拉框元素，列表框保留multiple属性，单选下拉框删除该属性即可
        let $deptSelect = $("<select>", {
            id: `Departmentlst_${item.Id}`,
            name: `Departmentlst_${item.Id}`,
            class: "dept-select",
            multiple: "multiple"
        });
        // 追加占位符选项
        $deptSelect.append($("<option>", { value: "", text: "选择部门" }));
        // 批量追加部门选项
        deptOptions.forEach(opt => {
            $deptSelect.append($("<option>", { value: opt.value, text: opt.text }));
        });
        // 构造表格行
        const $row = $("<tr>")
            .append(`<td class='prtoducttd1'>${item.Id}</td>`)
            .append(`<td class='prtoducttd2'>${item.Name}</td>`)
            .append($("<td class='prtoducttd11'>").append($deptSelect));
        $('#tabledetails tbody').append($row);
    });
}

注意事项 #

• 如果需要单选下拉框，将服务端的ListBoxFor替换为DropDownListFor即可，JS生成的元素删除multiple属性
• 每行的下拉框必须使用唯一ID，禁止复用固定ID，否则会导致表单提交、DOM操作异常
• 表单提交时可通过行索引、关联的业务ID来获取对应行的下拉框选中值

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