如何通过JQuery保存ASP.Net Core MVC中动态追加的表单内容

一、修正HTML结构，将动态元素纳入表单范围 #

原代码中动态生成的表格行不在表单标签内，提交时无法被后端接收。需要把表格、新增按钮全部放到<form>标签中，同时修改按钮类型避免误触提交：

<form asp-action="edit" method="post">
    <div class="form-group">
        <table id="supTable" class="table table-sm">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Supplier</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="form-group">
                            <span id="supplierId"></span>
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <button onclick="DeleteSup(0)" type="button" class="btn btn-danger">&#x2613;</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="form-group">
        <button type="button" class="btn btn-success" onclick="AddSup()">Add supplier</button>
    </div>

    <hr />

    <button type="submit" class="btn btn-warning" onclick="Save(event)">Save</button>
</form>

二、修正动态生成元素的脚本，确保表单字段可被后端识别 #

原脚本存在HTML语法错误，且动态生成的下拉框缺少正确的name属性，导致后端无法接收数据。修改后的脚本如下：

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 初始化第一个下拉框并设置name属性
        $('#supplierId').load("/AgentService/SuppliersList", function() {
            $(this).find('select').attr('name', 'SupplierIds[]');
        });
    });

    function AddSup() {
        let rowCount = $('#supTable tbody tr').length;
        // 修复HTML语法错误，生成带正确结构的表格行
        let newRow = `<tr id="${rowCount}tr">
                        <td>
                            <div class="form-group">
                                <span id="supplierId${rowCount}"></span>
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <button onclick="DeleteSup(${rowCount})" type="button" class="btn btn-danger">&#x2613;</button>
                            </div>
                        </td>
                    </tr>`;
        $("#supTable tbody").append(newRow);
        // 加载下拉框后设置统一的name属性
        $('#supplierId' + rowCount).load("/AgentService/SuppliersList", function() {
            $(this).find('select').attr('name', 'SupplierIds[]');
        });
    }

    function DeleteSup(id) {
        $('#' + id + 'tr').remove();
    }

    function Save(event) {
        // 阻止默认提交行为，弹框确认后再提交表单
        event.preventDefault();
        Swal.fire({
            title: 'Service agent',
            text: 'Edited',
            icon: 'success',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.isConfirmed) {
                $('form').submit();
            }
        });
    }
</script>

关键修改点：

• 给所有下拉框添加name="SupplierIds[]"，让后端可以批量接收选中的供应商ID
• 修复动态生成HTML时的引号语法错误
• 将删除、新增按钮的type改为button，避免触发表单默认提交
• 调整Save函数逻辑，先弹框确认再提交表单

三、后端控制器接收数据 #

在AgentServiceController的Edit POST方法中，通过集合类型接收动态提交的供应商ID：

直接接收集合 #

[HttpPost]
public IActionResult Edit(IEnumerable<int> SupplierIds)
{
    // 编写保存逻辑，将SupplierIds存入数据库
    // ...
    
    return RedirectToAction("Index");
}

绑定到ViewModel #

如果使用ViewModel，可在模型中添加对应属性：

public class AgentEditViewModel
{
    // 其他业务属性...
    public IEnumerable<int> SupplierIds { get; set; }
}

[HttpPost]
public IActionResult Edit(AgentEditViewModel model)
{
    // 处理model.SupplierIds的保存逻辑
    // ...
    
    return RedirectToAction("Index");
}

四、确保SuppliersList接口返回正确的下拉框结构 #

SuppliersList方法需要返回带选项的select元素，示例如下：

public IActionResult SuppliersList()
{
    var suppliers = _supplierRepository.GetAll(); // 从数据源获取供应商列表
    var selectList = new SelectList(suppliers, "Id", "Name");
    return PartialView("_SupplierSelect", selectList);
}

对应的_SupplierSelect.cshtml部分视图：

@model SelectList
<select class="form-control" asp-items="Model">
    <option value="">Select supplier</option>
</select>

内容的提问来源于stack exchange，提问作者Анвар Курбанов