有没有办法以相应的形式显示错误?

Is is any way to show errors in the corresponding form?

我有一个 ASP.NET Core 3.1 Razor Pages 应用程序。 一个页面只有一个表单时很简单,但是表单很少时如何正确显示错误?

示例: /ManageUser.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:请不要建议将错误设置为字段绑定:事实并非如此,示例中的字段只是为了简单起见。

以字段验证为例,您可以试试下面的代码

查看:

    <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();
        
    }

结果: