Razor视图foreach中表单验证异常的最优解决方案咨询

在Razor视图中通过foreach循环渲染多个Person表单时，使用@Html.TextBoxFor(m => p.Name)生成的输入元素name属性均为p.Name，所有表单的验证消息也绑定到同一个ModelState键。当单个表单提交验证失败后，所有Person表单都会显示错误信息，且需要保留现有的SavePerson Post处理程序（参数为Person person）。

核心思路是通过TempData传递错误信息+匹配Person ID，确保仅提交失败的表单显示错误，同时保持Post方法签名不变。

步骤1：修改Razor视图代码 #

将自动生成的验证消息替换为基于TempData的条件显示，同时为每个表单添加Person ID隐藏字段：

@foreach (Person p in Model.Persons)
{
    <form asp-action="SavePerson">
        <!-- 隐藏字段传递当前Person的ID -->
        <input type="hidden" name="Id" value="@p.Id" />

        <!-- 姓名输入框 -->
        @Html.TextBox("Name", p.Name)
        <!-- 仅当前提交失败的Person显示姓名错误 -->
        @if (TempData.ContainsKey("Error_Name") && (int)TempData["Error_PersonId"] == p.Id)
        {
            <span class="text-danger">@TempData["Error_Name"]</span>
        }

        <!-- 姓氏输入框 -->
        @Html.TextBox("Surname", p.Surname)
        <!-- 仅当前提交失败的Person显示姓氏错误 -->
        @if (TempData.ContainsKey("Error_Surname") && (int)TempData["Error_PersonId"] == p.Id)
        {
            <span class="text-danger">@TempData["Error_Surname"]</span>
        }

        <button type="submit">Save</button>
    </form>
}

说明：直接使用@Html.TextBox指定输入框的name为Name和Surname，确保提交时能正确绑定到SavePerson方法的Person参数。

步骤2：调整Post处理程序逻辑 #

验证失败时，将错误信息和当前Person的ID存入TempData，返回视图时仅对应ID的表单显示错误：

[HttpPost]
public IActionResult SavePerson(Person person)
{
    if (!ModelState.IsValid)
    {
        // 存储当前提交失败的Person ID
        TempData["Error_PersonId"] = person.Id;

        // 提取姓名错误信息
        if (ModelState.ContainsKey("Name") && ModelState["Name"].Errors.Any())
        {
            TempData["Error_Name"] = ModelState["Name"].Errors.First().ErrorMessage;
        }

        // 提取姓氏错误信息
        if (ModelState.ContainsKey("Surname") && ModelState["Surname"].Errors.Any())
        {
            TempData["Error_Surname"] = ModelState["Surname"].Errors.First().ErrorMessage;
        }

        // 重新获取包含所有Person的视图模型（需自行实现数据查询逻辑）
        var viewModel = new YourViewModel 
        { 
            Persons = GetAllPersonsFromDatabase() 
        };
        return View(viewModel);
    }

    // 执行Person保存逻辑
    SavePersonToDatabase(person);
    return RedirectToAction("Index");
}

替代方案（AJAX提交） #

如果允许使用AJAX，可以实现无刷新提交，仅更新当前表单的错误信息，体验更优：

@foreach (Person p in Model.Persons)
{
    <form id="form-@p.Id" data-person-id="@p.Id">
        <input type="hidden" name="Id" value="@p.Id" />
        @Html.TextBox("Name", p.Name)
        <span class="text-danger error-name-@p.Id"></span>

        @Html.TextBox("Surname", p.Surname)
        <span class="text-danger error-surname-@p.Id"></span>

        <button type="submit">Save</button>
    </form>
}

<script>
    $('form').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var personId = form.data('person-id');
        $.ajax({
            url: '@Url.Action("SavePerson")',
            method: 'POST',
            data: form.serialize(),
            success: function() {
                // 保存成功后的逻辑，比如刷新页面或提示
                location.reload();
            },
            error: function(xhr) {
                // 清空当前表单的旧错误
                $(`.error-name-${personId}`).text('');
                $(`.error-surname-${personId}`).text('');
                // 显示新错误
                var errors = xhr.responseJSON;
                if (errors.Name) {
                    $(`.error-name-${personId}`).text(errors.Name);
                }
                if (errors.Surname) {
                    $(`.error-surname-${personId}`).text(errors.Surname);
                }
            }
        });
    });
</script>

对应的Post处理程序需要返回JSON格式的错误信息：

[HttpPost]
public IActionResult SavePerson(Person person)
{
    if (!ModelState.IsValid)
    {
        var errors = ModelState.ToDictionary(
            kvp => kvp.Key,
            kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).FirstOrDefault()
        );
        return BadRequest(errors);
    }

    SavePersonToDatabase(person);
    return Ok();
}

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