如何在 .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 页面上没有任何错误消息。

为什么 UI 中没有显示错误消息，我的错在哪里？

Answer 1

可能是您将validate和validate.unobtrusive jQuery 放置在错误的位置，或者您可能缺少表单标签。 因此，请将此 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>

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

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