如何在 .NET Core 2.0 中显示数据注释错误消息？验证消息未显示

Question

我正在使用 .NET Core 2.0 编写应用程序。我想用数据注释控制输入元素。

在模型端，我使用了数据注释，在 UI 端，我使用了 asp-validation-for 标签助手。代码如下。

在模型类中；

namespace ExampleApp
{
    public class UserViewModel
    {
        [Required(ErrorMessage="Please fill this field"),
            Display(Name="Your Name:")]
            public string Firstname { get; set; }

        [Required(ErrorMessage = "Please fill this field")]
        public string Lastname { get; set; }
        }
    }

在文件UserAdd.cshtml：

@model UserViewModel
<div class="form-group">
   <label class="control-label mb-10">First name</label>
   <input asp-for="@Model.Firstname" class="form-control">
   <span asp-validation-for="@Model.Firstname" class="text-danger">
   </span>
</div>

<div class="form-group">
   <label class="control-label mb-10">Soyadı</label>
   <input asp-for="@Model.Lastname" class="form-control">
   <span asp-validation-for="@Model.Lastname" class="text-danger">
   </span>
</div>

在 Startup.cs 文件中配置方法；

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();
    app.UseCookiePolicy();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

在我的控制器端；

当我单击带有空输入值的提交按钮时，模型的 Isvalid 值等于 false。但是UI页面上没有任何错误信息。

为什么用户界面中没有显示错误消息，我的错在哪里？

Answer 1

可能是您将 validate 和 validate.unobtrusive jQuery 放置在错误的位置，或者您可能缺少 form 标记。因此，请将此 jQuery 代码放在 HTML 页面的 head 部分，并确保在它之前没有任何其他 jQuery 并使用我的设计代码。

jQuery 验证插件

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>

.cshtml 代码

<form asp-action="YourActionName">
    <div class="form-group">
        <label asp-for="Firstname" class="control-label"></label>
        <input asp-for="Firstname" class="form-control" />
        <span asp-validation-for="Firstname" class="text-danger"></span>
    </div>
 <button type="submit" >Submit</button>
</form>

Answer 2

确保您的Shared 文件夹中有_ValidationScriptsPartial.cshtml。此文件包含部分视图形式的验证脚本。默认情况下，此文件包含以下代码：

<environment include="Development">
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
            asp-fallback-src="~/lib/jquery-validation/dist/jquery.validate.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"
            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"
            asp-fallback-src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"
            crossorigin="anonymous"
            integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY=">
    </script>
</environment>

现在，如果必须在任何视图中使用此验证脚本，则可以使用 RenderParttailAsync 方法完成，如下所示（在您的情况下，将代码添加到 UserAdd.cshtml 的底部文件）：

@section Scripts {
  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}