Razor 页面中的流利验证答案

【问题标题】：Fluent Validation in Razor PageRazor 页面中的流利验证
【发布时间】：2020-08-10 16:15:21
【问题描述】：

基于此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 能够检测到错误消息，但不确定为什么它不会显示在页面上。任何想法为什么？提前致谢！

【问题讨论】：

如果我的回答解决了您的问题，请点赞并标记为回答。

标签： asp.net-core razor error-handling razor-pages fluentvalidation

【解决方案1】：

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

那是因为你的键名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.第一种方法，你可以像下面这样改变键名：

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

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

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

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

return Page();

【讨论】：

【解决方案2】：

如果不存在，您需要有用于不显眼验证的脚本。

示例

查看（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>

【讨论】：

您好，所有这些都已包含在内，但未显示错误消息。