如何在ASP.NET Framework中通过POST方法动态提交用户列表？

前端实现 #

1. 表单基础结构 #

在AddUsers.cshtml视图中构建表单，包含用户数量输入框、生成按钮和动态输入项容器，同时保留防伪令牌确保请求安全：

@using (Html.BeginForm("AddUsers", "YourController", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    
    <div class="mb-3">
        <label for="userCount">用户数量:</label>
        <input type="number" id="userCount" min="1" value="1" class="form-control w-25" />
        <button type="button" id="generateInputs" class="btn btn-primary mt-2">生成Email输入项</button>
    </div>

    <div id="emailInputsContainer" class="mb-3"></div>

    <button type="submit" class="btn btn-success">提交用户列表</button>
}

2. 动态生成输入项的JavaScript逻辑 #

编写脚本根据用户输入的数量生成符合ASP.NET模型绑定规则的Email输入框，同时保留模型验证的相关属性：

document.getElementById('generateInputs').addEventListener('click', function() {
    const userCount = parseInt(document.getElementById('userCount').value);
    const container = document.getElementById('emailInputsContainer');
    container.innerHTML = '';

    for (let i = 0; i < userCount; i++) {
        // 创建输入组容器
        const inputGroup = document.createElement('div');
        inputGroup.className = 'mb-2';

        // 生成Email标签
        const emailLabel = document.createElement('label');
        emailLabel.setAttribute('for', `users_${i}__Email`);
        emailLabel.textContent = 'Email地址';
        inputGroup.appendChild(emailLabel);

        // 生成Email输入框，关键是name属性必须为`users[index].Email`格式
        const emailInput = document.createElement('input');
        emailInput.type = 'email';
        emailInput.name = `users[${i}].Email`;
        emailInput.id = `users_${i}__Email`;
        emailInput.className = 'form-control';
        // 绑定模型验证规则
        emailInput.required = true;
        emailInput.setAttribute('data-val', 'true');
        emailInput.setAttribute('data-val-email', 'El formato del correo electrónico no es válido.');
        emailInput.setAttribute('data-val-required', 'Debe de introducir un Correo Electrónico.');
        inputGroup.appendChild(emailInput);

        // 生成验证消息显示区域
        const validationMsg = document.createElement('span');
        validationMsg.className = 'text-danger field-validation-valid';
        validationMsg.setAttribute('data-valmsg-for', `users[${i}].Email`);
        validationMsg.setAttribute('data-valmsg-replace', 'true');
        inputGroup.appendChild(validationMsg);

        container.appendChild(inputGroup);
    }

    // 重新初始化Unobtrusive验证，确保动态添加的输入项支持客户端验证
    if (typeof $.validator !== 'undefined' && typeof $.validator.unobtrusive !== 'undefined') {
        $.validator.unobtrusive.parse($('form'));
    }
});

后端处理优化 #

你的控制器方法已基本符合要求，可添加模型状态验证确保接收的数据合法：

[HttpPost]
[ValidateAntiForgeryToken]
[AllowAnonymous]
public async Task<ActionResult> AddUsers(List<User> users)
{
    if (ModelState.IsValid)
    {
        // 执行用户列表的业务逻辑，比如保存到数据库
        // await _userService.AddUsersAsync(users);
        return RedirectToAction("UserList"); // 跳转至成功页面或用户列表页
    }

    // 验证失败时返回视图，可根据需要添加提示逻辑
    return View();
}

关键说明 #

ASP.NET模型绑定识别列表的核心是输入框的name属性格式：必须使用列表参数名[索引].属性名（如users[0].Email），且索引需从0开始连续，这样框架才能自动将所有输入项映射为List<User>对象。

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