在ASP.NET Core Razor Pages 中进行前端页面验证

admin

2022-03-04

在ASP.NET Core Razor Pages 中进行前端页面验证

导航：

ASP.NET Core 6 RazorPages与EF Core入门视频目录
视频课程更佳：ASP.NET Core 6 RazorPages与EF Core入门视频

在本视频中，我们将讨论ASP.NET Core Razor Pages中进行前端页面验证。

在ASP.NET Core Razor Pages中实现客户端验证非常简单。我们要做的就是按照指定的顺序引用以下3个js脚本文件。

jquery.js
jquery.validate.js
jquery.validate.unobtrusive.js

布局文件或单个 Razor Pages

我们应该将这些js脚本文件加载到_Layout.cshtml页面还是单个 Razor Pages上呢？

这个问题的答案实际上取决于您需要在哪里进行客户端验证。如果需要在应用程序中的多个页面上进行客户端验证，请使用布局文件加载它们。

如果仅在一两个 Razor Pages上需要它们，则仅在这些 Razor Pages上加载它们。使用这种方法，如果用户从不访问那些1或2个特定的 Razor Pages，则不必下载js脚本文件。

_ValidationScriptsPartial.cshtml

如果您已使用Web应用程序模板并使用VisualStudio创建了一个新的ASP.NET Core项目。您很可能在Shared文件夹中具有以下部分视图。该文件的名称为_ValidationScriptsPartial.cshtml，其中包含以下2个脚本引用


<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

_Layout.cshtml已经加载了jQueryjs脚本文件。因此，我们不必再次加载它。

在我们的情况下，我们仅需要在编辑学生 Razor Pages中进行客户端验证。在编辑学生 Razor Pages上包括以下脚本部分以呈现部分视图。

我们将在即将到来的视频中讨论部分观点。我们使用局部标签助手即partial taghelper，以呈现分部视图。

//两种写法
@section Scripts {
       @*<partial name="_ValidationScriptsPartial" />*@
    @*@Html.PartialAsync("_ValidationScriptsPartial")*@

}

我们在ASP.NET Core 教程的第29部分中讨论了布局部分。

客户端验证在ASP.NET Core中如何工作

考虑以下Name的input标签。我们已经使用asp-for标记助手来绑定到Student类的Name属性。


<input asp-for="Student.Name">

我们在Student类的Name属性上使用了[Required]属性。此属性使名称输入字段成为必填字段。以下是生成的HTML。

<input class="form-control" placeholder="Name" type="text" data-val="true"  data-val-required="请输入名字" id="Student_Name"  name="Student.Name" value="">

注意，我们有几个特殊的data- *属性。这些属性使我们可以向HTML元素添加额外的信息。 data-val =true表示启用客户端验证。

data-val-required属性指定验证失败时显示的必需验证错误消息。这些data-*属性包含执行客户端验证所需的所有信息。

读取这些data-*属性并执行客户端验证的是非侵入式库（即jquery.validate.unobtrusive.js）