向模型添加验证 - 如何实现启用输入验证所需的支持

项目
07/13/2023

这是一个初学者教程，介绍 ASP.NET MVC 的基础知识。你将创建一个从数据库读取和写入的简单 Web 应用程序。请访问 ASP.NET MVC 学习中心，查找其他 ASP.NET MVC 教程和示例。

在本部分中，我们将实现在应用程序中启用输入验证所需的支持。我们将确保数据库内容始终正确，并在最终用户尝试输入无效的 Movie 数据时向其提供有用的错误消息。首先，我们将向 Movie 类添加一些验证逻辑。

右键单击“模型”文件夹，然后选择“添加类”。将课堂命名为电影。

之前创建 Movie 实体模型时，IDE 创建了 Movie 类。事实上，Movie 类的一部分可以位于一个文件中，而在另一个文件中。这称为分部类。我们将从另一个文件扩展 Movie 类。

我们将创建一个分部电影类，该类指向具有一些属性的“buddy 类”，这些属性将为系统提供验证提示。我们将标题和价格标记为必需，并坚持价格在一定范围内。右键单击“模型”文件夹，然后选择“添加类”。将课堂命名为“电影”，然后单击“确定”按钮。下面是部分 Movie 类的外观。

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

Re-Run应用程序并尝试输入价格超过 100 的电影。提交表单后，将收到错误。此错误在服务器端捕获，并在窗体为 POSTed 之后发生。请注意 ASP.NET MVC 的内置 HTML 帮助程序如何足够智能地显示错误消息并在文本框元素中维护值：

这非常有效，但如果我们可以在服务器参与之前立即在客户端告诉用户，那会很好。

让我们使用 JavaScript 启用一些客户端验证。

添加Client-Side验证

由于 Movie 类已具有一些验证属性，因此只需将一些 JavaScript 文件添加到 Create.aspx 视图模板，并添加一行代码即可进行客户端验证。

在 VWD 中，转到“视图/电影”文件夹并打开 Create.aspx。

打开解决方案资源管理器中的 Scripts 文件夹，将以下三个脚本拖动到 head> 标记内<。

MicrosoftAjax.js
MicrosoftMvcValidation.js

你希望这些脚本文件按此顺序显示。

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

此外，在 Html.BeginForm 上方添加以下单行：

<% Html.EnableClientValidation(); %>

下面是 IDE 中显示的代码。

运行应用程序并再次访问 /Movies/Create，然后单击“创建”，而无需输入任何数据。错误消息会立即显示，而不会显示与将数据一直发送回服务器关联的翻页。这是因为 ASP.NET MVC 现在使用 JavaScript) 验证客户端 (和服务器上的输入。

这看起来不错！现在，让我们向数据库添加一个附加列。

向模型添加验证 - 如何实现启用输入验证所需的支持

添加Client-Side验证

反馈

反馈

其他资源