Razor 页面中的流畅验证

Question

基于此 page 我正在尝试制作一个使用流畅验证的剃刀页面。它似乎已经检查过，但我不确定为什么不显示错误消息。

这是我到目前为止所做的：

cshtml.cs:

CreateCommandValidator CreateValidator = new CreateCommandValidator();
var createCheck = CreateValidator.Validate(NewItem);
foreach (ValidationFailure fail in createCheck.Errors)
{
     ModelState.AddModelError(fail.PropertyName, fail.ErrorMessage);
}
return Page();

cshtml:

<label class="col-form-label">Name</label>
<input asp-for="NewItem.Name" type="text" class="form-control mb-2"/>
<span asp-validation-for="NewItem.Name" class="text-danger"></span>

创建命令验证器：

RuleFor
     (Item => Item.Name)
     .NotEmpty().WithMessage("The name cannot be empty")
     .Length(1, 100);

ValidationFailure 能够检测到错误消息，但不确定为什么它不会显示在页面上。任何想法为什么？提前致谢！

Answer 1

如果不存在，您需要有用于非侵入式验证的脚本。

例子

视图(cshtml):

@{
    ViewData["Title"] = "Log in";
}
<section>
    <div class="container">

    </div>
</section>


@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
            crossorigin="anonymous"
            integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A=">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"
            crossorigin="anonymous"
            integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY=">
    </script>
}

共享布局(_Layout.cshtml)应该有脚本部分

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


 </head>
<body>
    <div class="main-container">
        @RenderBody()
    </div>



    @RenderSection("Scripts", required: false)


</body>
</html>

Answer 2

The ValidationFailure is able to detect the error message but not sure why it won't be displayed out on the page. Any ideas why?

那是因为你的data-valmsg-for键名是NewItem.Name.

您的 cshtml 文件如下：

<span asp-validation-for="NewItem.Name" class="text-danger"></span>

将在浏览器中生成 html，如下所示：

<span data-valmsg-for="NewItem.Name" class="text-danger field-validation-valid" data-valmsg-replace="true"></span>

1.The 第一种方法，您可以像下面这样更改键名：

ModelState.AddModelError("NewItem.Name", fail.ErrorMessage);

2.The 第二种方式，如果你不想手动添加键名，你可以安装 FluentValidation.AspNetCore 包并更改你的代码如下：

CreateCommandValidator CreateValidator = new CreateCommandValidator();
var createCheck = CreateValidator.Validate(NewItem);

//AddToModelState(ModelStateDictionary modelState, string prefix);
createCheck.AddToModelState(ModelState, "NewItem");

return Page();

Razor 页面中的流畅验证

Fluent Validation in Razor Page

asp.net-core

razor

error-handling

razor-pages

fluentvalidation