ASP.NET Core中如何通过AJAX将动态输入字段数据提交到Controller

一、现有代码的核心问题 #

• 动态生成的输入框仅设置了id属性，ASP.NET Core的模型绑定依赖name属性匹配字段，缺失该属性会导致数据无法正常绑定
• AJAX提交时使用$(this).serializeArray()获取数据，this此时指向提交按钮，只能拿到按钮本身的数据，拿不到整个表单的输入内容
• 删除行后仅修改了总计数，未重新调整剩余输入框的索引，出现索引断层（如删除第2行后索引变为0、2）会导致集合绑定不完整
• 动态生成的元素ID重复，同个页面存在多个inputFormRow和removeRow的ID，会导致选择器逻辑异常

二、前端代码修改 #

1. 动态生成行逻辑修改 #

$("#addRow").click(function () {
    // 该段Razor代码仅在服务端渲染时执行，前端点击无效果可直接删除
    // @{
    //     new VLSM_Model().LansValues.Add(new Lans());
    // }
    var rowCount = parseInt($("#totalLans").val());
    var html = '';
    // 将重复id改为class
    html += '<div class="inputFormRow" style="width: 35%">';
    html += '<div class="input-group mb-3">';
    // 新增name属性，和模型字段保持一致
    html += '<input type="number" name="LansValues[' + rowCount + '].InitialLanValues" id="LansValues[' + rowCount + '].InitialLanValues" class="form-control m-input" placeholder="Enter number of Hosts" autocomplete="off" style="width: 30%" required>';
    html += '<div class="input-group-append">';
    // 将重复id改为class
    html += '<button type="button" class="btn btn-danger removeRow" style="margin-right: 5px">Remove Network</button>';
    html += '</div>';
    html += '</div>';
    html += '</div>';

    $('#newRow').append(html);
    rowCount++;
    $("#totalLans").val(rowCount);
});

2. 删除行逻辑修改 #

$(document).on('click', '.removeRow', function () {
    $(this).closest('.inputFormRow').remove();
    var rowCount = parseInt($("#totalLans").val());
    rowCount--;
    $("#totalLans").val(rowCount);
    // 重新遍历剩余输入框，重置索引避免断层
    $(".inputFormRow").each(function(index){
        $(this).find('input').attr('name', 'LansValues['+index+'].InitialLanValues');
        $(this).find('input').attr('id', 'LansValues['+index+'].InitialLanValues');
    });
});

3. AJAX提交逻辑修改 #

$(document).ready(function () {  
    $("#createButton").click(function (e) {
        // 阻止表单默认提交行为
        e.preventDefault();
        // 序列化整个表单获取全部输入数据
        var inputData = $('form').serializeArray();
        $.ajax({  
            type: "POST",
            // 控制器路径不要带Controller后缀，用Url.Action生成避免路径错误
            url: "@Url.Action("Create", "VLSM")",
            data: inputData,
            success : function(response) {
                console.log(response)
                // 此处可添加计算结果渲染逻辑
            },
            error: function(xhr){
                console.log(xhr.responseText);
            }
        });  
    });  
});

三、后端代码实现 #

1. 模型定义（需和前端字段匹配） #

// 子网参数子实体
public class Lans
{
    public int InitialLanValues { get; set; }
}
// 主参数模型
public class VLSM_Model
{
    public string IP_Address { get; set; }
    public int cidrValue { get; set; }
    public List<Lans> LansValues { get; set; } = new List<Lans>();
}

2. 控制器Action实现 #

public class VLSMController : Controller
{
    [HttpPost]
    public IActionResult Create(VLSM_Model model)
    {
        // 模型已自动绑定所有前端输入数据，可直接用于计算
        // 示例：遍历所有输入的主机数执行计算
        foreach(var lan in model.LansValues)
        {
            int hostCount = lan.InitialLanValues;
            // 此处编写VLSM计算逻辑，比如子网掩码计算、可用地址范围计算等
        }
        // 计算完成后返回结果给前端
        return Json(new { success = true, result = "你的计算结果" });
    }
}

四、额外说明 #

• 提交前可在浏览器控制台打印inputData，确认所有字段已被正确序列化
• 如需参数校验，可在模型属性上加[Required]等验证特性，控制器中通过ModelState.IsValid判断校验结果
• 如需支持未JS环境的普通表单提交，保留现有form结构即可正常工作

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