有什么办法可以在相应的表格中显示错误吗？

Question

我有一个 ASP.NET Core 3.1 Razor Pages 和 MVC 应用程序。 页面只有一个表单的时候很简单，但是表单很少的时候如何正确显示错误呢？

示例： /管理用户.cshtml

<div>
  <form method="post">
    <div class="validation-summary-valid text-danger" asp-validation-summary="All"></div>
    <div class="form-group">
      <label asp-for="OldPassword"></label>
      <input asp-for="OldPassword" class="form-control" />
    </div>
    <div class="form-group">
      <label asp-for="NewPassword1"></label>
      <input asp-for="NewPassword1" class="form-control" />
    </div>
    <div class="form-group">
      <label asp-for="NewPassword2"></label>
      <input asp-for="NewPassword2" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary" asp-page-handler="ChangePassword">Change password</button>
  </form>
</div>

<!-- let's say it is the other "tab" -->
<div>
  <form method="post">
    <div class="validation-summary-valid text-danger" asp-validation-summary="All"></div>
    <div class="form-group">
      <label asp-for="ChangeEmail"></label>
      <input asp-for="ChangeEmail" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary" asp-page-handler="ChangeEmail">Change email</button>
  </form>
</div>

并且，如果在后端发现任何错误：

public async Task<IActionResult> OnPostChangeEmailAsync([FromService] UserManager<User> userManager)
{
  //... skipped for brevity
  ModelState.AddModelError("", "User not found or deleted");

  return Page();
}

然后两种形式都会显示此错误。有什么办法只显示相应的表格吗？

PS：请不要建议将错误字段绑定：事实并非如此，示例中的字段只是为了简单起见。

Answer 1

以字段验证为例，您可以尝试以下代码。

查看：

    <div>
    <form method="post">
        <span class="text-danger">@Html.ValidationMessage("PasswordError")</span>
        <div class="form-group">
            <label asp-for="UserModel.OldPassword"></label>
            <input asp-for="UserModel.OldPassword" class="form-control" />
            <span asp-validation-for="UserModel.OldPassword" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="UserModel.NewPassword1"></label>
            <input asp-for="UserModel.NewPassword1" class="form-control" />
            <span asp-validation-for="UserModel.NewPassword1" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="UserModel.NewPassword2"></label>
            <input asp-for="UserModel.NewPassword2" class="form-control" />
            <span asp-validation-for="UserModel.NewPassword2" class="text-danger"></span>
        </div>
        <button type="submit" class="btn btn-primary" asp-page-handler="ChangePassword">Change password</button>
    </form>
</div>
<div>
    <form method="post">
        <span class="text-danger">@Html.ValidationMessage("EmailError")</span>
        <div class="form-group">
            <label asp-for="UserModel.ChangeEmail"></label>
            <input asp-for="UserModel.ChangeEmail" class="form-control" />
            <span asp-validation-for="UserModel.ChangeEmail" class="text-danger"></span>
        </div>
        <button type="submit" class="btn btn-primary" asp-page-handler="ChangeEmail">Change email</button>
    </form>
</div>

后端（可以去掉属性）：

public async Task<IActionResult> OnPostChangeEmailAsync(UserModel userModel)
    {
        
        if (!ModelState.IsValid)
        {
            ModelState.Remove("UserModel.OldPassword");
            ModelState.Remove("UserModel.NewPassword1");
            ModelState.Remove("UserModel.NewPassword2");
            ModelState.AddModelError("EmailError", "User not found or deleted");
        }
        return Page();
    }
    public async Task<IActionResult> OnPostChangePassword(UserModel userModel)
    {
       
        if (!ModelState.IsValid)
        {
            ModelState.Remove("UserModel.ChangeEmail");
            ModelState.AddModelError("PasswordError", "Password is inconsistent ");
        }
        return Page();
        
    }

结果：