模型验证不通过时如何返回含局部视图的首页？

核心逻辑 #

验证失败时，不要直接返回Partial View，而是返回包含该局部视图的首页完整视图，同时将带错误信息的模型传递给首页，让首页渲染局部视图时自动带出验证提示。

具体实现方案 #

1. 修改控制器Post方法的返回逻辑 #

在处理注册提交的Post方法中，当ModelState验证不通过时，返回首页视图而非局部视图，同时传入带错误的模型：

[HttpPost]
public IActionResult Register(RegisterViewModel model)
{
    if (ModelState.IsValid)
    {
        // 验证通过，执行数据库存储逻辑
        return RedirectToAction("Index"); // 注册成功后跳转回首页
    }
    // 验证失败，返回首页视图并传递带错误的模型
    return View("Index", model);
}

2. 确保首页正确渲染局部视图 #

在首页的Index.cshtml中，通过模型传递的方式渲染注册滑块的局部视图，确保局部视图能获取到带错误的模型数据：

<!-- 首页中的滑块容器 -->
<div id="register-slider">
    @await Html.PartialAsync("_RegisterSlider", Model)
</div>

局部视图_RegisterSlider.cshtml中保留验证提示代码，确保错误信息能正常显示：

@model RegisterViewModel

<form asp-action="Register" method="post">
    <div asp-validation-summary="All" class="text-danger mb-3"></div>
    
    <div class="form-group">
        <label asp-for="Email" class="form-label"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    
    <!-- 其他表单字段 -->
    
    <button type="submit" class="btn btn-primary">注册</button>
</form>

3. （可选）AJAX提交优化无刷新体验 #

如果不想刷新整个页面，可采用AJAX异步提交表单，验证失败时仅替换局部视图区域：

// 前端AJAX提交代码
$('#register-slider form').on('submit', function(e) {
    e.preventDefault();
    const $form = $(this);
    
    $.post($form.attr('action'), $form.serialize(), function(html) {
        // 用返回的带错误的局部视图HTML替换原容器
        $('#register-slider').html(html);
    });
});

此时控制器Post方法的逻辑无需修改验证失败时返回Partial View的代码，前端会自动在原页面更新滑块区域并显示错误。

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