Parte 8 da série de tutoriais sobre Razor Páginas

Por Rick Anderson

Nesta seção, a lógica de validação Movie é adicionada ao modelo. As regras de validação são aplicadas sempre que um usuário cria ou edita um filme.

Validação

Um princípio chave do desenvolvimento de software é chamado DRY ("Não Repita You mesmo"). Razor O Pages incentiva o desenvolvimento em que a funcionalidade é especificada uma vez e é refletida em todo o aplicativo. DRY pode ajudar:

• Reduza a quantidade de código em um aplicativo.
• Torne o código menos propenso a erros e mais fácil de testar e manter.

O suporte de validação fornecido pelo Pages e pelo Razor Entity Framework é um bom exemplo do princípio DRY:

• As regras de validação são especificadas declarativamente em um só lugar, na classe de modelo.
• As regras são aplicadas em todos os lugares do aplicativo.

Validação no .NET 10

No .NET 10, as APIs de validação unificadas foram movidas para o Microsoft.Extensions.Validation pacote NuGet. Essa alteração torna as APIs de validação disponíveis fora de ASP.NET cenários HTTP principais.

Para usar as Microsoft.Extensions.Validation APIs:

• Adicione a seguinte referência de pacote:

  <PackageReference Include="Microsoft.Extensions.Validation" Version="10.0.0" />
  

  A funcionalidade permanece a mesma, mas agora requer uma referência explícita ao pacote.

• Registrar serviços de validação com injeção de dependência:

  builder.Services.AddValidation();
  

Adicionar regras de validação ao modelo de filme

O namespace System.ComponentModel.DataAnnotations fornece:

• Um conjunto de atributos de validação internos que são aplicados declarativamente a uma classe ou propriedade.
• Atributos de formatação como [DataType] esse ajudam na formatação e não fornecem nenhuma validação.

Atualize a Movie classe para aproveitar os atributos internos [Required], [StringLength], [RegularExpression]e [Range] de validação.

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }

    [StringLength(60, MinimumLength = 3)]
    [Required]
    public string Title { get; set; } = string.Empty;

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$")]
    [Required]
    [StringLength(30)]
    public string Genre { get; set; } = string.Empty;

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$")]
    [StringLength(5)]
    [Required]
    public string Rating { get; set; } = string.Empty;
}

Os atributos de validação especificam o comportamento a ser imposto nas propriedades do modelo às quais são aplicados:

• Os [Required] atributos e [MinimumLength] indicam que uma propriedade deve ter um valor. Nada impede que um usuário insira um espaço em branco para satisfazer essa validação.

• O [RegularExpression] atributo é usado para limitar quais caracteres podem ser inseridos. No código anterior, Genre:

  • Deve usar apenas letras.
  • A primeira letra deve ser maiúscula. Espaços em branco são permitidos, enquanto números e caracteres especiais não são permitidos.

• O RegularExpressionRating:

  • Requer que o primeiro caractere seja uma letra maiúscula.
  • Permite caracteres especiais e números em espaços subsequentes. "PG-13" é válido para uma classificação, mas falha para um Genre.

• O [Range] atributo restringe um valor a dentro de um intervalo especificado.

• O [StringLength] atributo pode definir um comprimento máximo de uma propriedade string e, opcionalmente, seu comprimento mínimo.

• Tipos de valor, como decimal, int, float, DateTime, são inerentemente necessários e não precisam do [Required] atributo.

As regras de validação anteriores são usadas para demonstração, elas não são ideais para um sistema de produção. Por exemplo, o precedente impede a entrada de um filme com apenas dois caracteres e não permite caracteres especiais no Genre.

Ter regras de validação aplicadas automaticamente pelo ASP.NET Core ajuda:

• Torne a aplicação mais robusta.
• Reduza as chances de salvar dados inválidos no banco de dados.

Interface de erro de validação nas Razor Pages

Execute o aplicativo e navegue até Páginas/Filmes.

Selecione o link Criar novo . Preencha o formulário com alguns valores inválidos. Quando a validação do lado do cliente jQuery deteta o erro, ele exibe uma mensagem de erro.

Observação

Talvez não seja possível inserir vírgulas decimais em campos decimais. Para dar suporte à validação do jQuery para localidades diferentes do inglês que usam uma vírgula (",") para um ponto decimal e formatos de data não US-English, você deve tomar medidas para globalizar seu aplicativo. Consulte este comentário 4076 do GitHub para obter instruções sobre como adicionar vírgula decimal.

Observe como o formulário processou automaticamente uma mensagem de erro de validação em cada campo contendo um valor inválido. Os erros são impostos tanto do lado do cliente, usando JavaScript e jQuery, quanto do lado do servidor, quando um usuário tem o JavaScript desativado.

Um benefício significativo é que nenhuma alteração de código foi necessária nas páginas Criar ou Editar. Uma vez que as anotações de dados foram aplicadas ao modelo, a interface do usuário de validação foi habilitada. As Razor Páginas criadas neste tutorial selecionaram automaticamente as regras de validação, usando atributos de validação nas propriedades da classe de Movie modelo. Validação de teste usando a página Editar, a mesma validação é aplicada.

Os dados do formulário não são postados no servidor até que não haja erros de validação do lado do cliente. Verifique se os dados do formulário não são postados por uma ou mais das seguintes abordagens:

• Coloque um ponto de interrupção no OnPostAsync método. Envie o formulário selecionando Criar ou Salvar. O ponto de interrupção nunca é atingido.
• Use a ferramenta Fiddler.
• Use as ferramentas de desenvolvedor do navegador para monitorar o tráfego da rede.

Validação do lado do servidor

Quando o JavaScript está desativado no navegador, o envio do formulário com erros será enviado para o servidor.

Opcional, teste a validação do lado do servidor:

1. Desative o JavaScript no navegador. O JavaScript pode ser desativado usando as ferramentas de desenvolvedor do navegador. Se o JavaScript não puder ser desativado no navegador, tente outro navegador.

2. Defina um ponto de interrupção no OnPostAsync método da página Criar ou Editar.

3. Envie um formulário com dados inválidos.

4. Verifique se o estado do modelo é inválido:

    if (!ModelState.IsValid)
    {
       return Page();
    }
   

Como alternativa, desative a validação do lado do cliente no servidor.

O código a seguir mostra uma parte da página Create.cshtml gerada anteriormente no tutorial. Ele é usado pelas páginas Criar e Editar para:

• Exiba o formulário inicial.
• Exiba novamente o formulário em caso de erro.

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Movie.Title" class="control-label"></label>
        <input asp-for="Movie.Title" class="form-control" />
        <span asp-validation-for="Movie.Title" class="text-danger"></span>
    </div>

O Input Tag Helper usa os atributos DataAnnotations e produz atributos HTML necessários para a Validação do jQuery no lado do cliente. O Auxiliar de Tag de Validação exibe erros de validação. Consulte Validação para obter mais informações.

As páginas Criar e Editar não têm regras de validação. As regras de validação e as cadeias de caracteres de erro são especificadas somente na Movie classe. Essas regras de validação são aplicadas automaticamente às Razor Páginas que editam o Movie modelo.

Quando a lógica de validação precisa mudar, ela é feita apenas no modelo. A validação é aplicada consistentemente em todo o aplicativo, a lógica de validação é definida em um só lugar. A validação em um só lugar ajuda a manter o código limpo e facilita a manutenção e a atualização.

Utilização de Atributos de Tipo de Dados

Examine a Movie classe. O System.ComponentModel.DataAnnotations namespace fornece atributos de formatação, além do conjunto interno de atributos de validação. O [DataType] atributo é aplicado às ReleaseDate propriedades e Price .

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

[Range(1, 100)]
[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }

Os [DataType] atributos fornecem:

• Indicações para o motor de exibição formatar os dados.
• Fornece atributos como <a> para URLs e <a href="mailto:EmailAddress.com"> para e-mails.

Use o [RegularExpression] atributo para validar o formato dos dados. O [DataType] atributo é usado para especificar um tipo de dados que é mais específico do que o tipo intrínseco do banco de dados. [DataType] atributos não são atributos de validação. No aplicativo de exemplo, apenas a data é exibida, sem hora.

A DataType enumeração fornece muitos tipos de dados, como Date, Time, PhoneNumber, Currency, EmailAddresse muito mais.

Os [DataType] atributos:

• Pode permitir que a aplicação disponibilize automaticamente funcionalidades específicas ao tipo. Por exemplo, um mailto: link pode ser criado para DataType.EmailAddress.
• Pode fornecer um seletor DataType.Date de data em navegadores que suportam HTML5.
• Emitir HTML 5 data-, pronunciado "data dash", atributos que os navegadores HTML 5 consomem.
• Não forneça qualquer validação.

DataType.Date não especifica o formato da data exibida. Por padrão, o campo de dados é exibido segundo os formatos padrão baseados no servidor's CultureInfo.

A [Column(TypeName = "decimal(18, 2)")] anotação de dados é necessária para que o Entity Framework Core possa mapear Price corretamente para a moeda no banco de dados. Para obter mais informações, consulte Tipos de dados.

O [DisplayFormat] atributo é usado para especificar explicitamente o formato de data:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime ReleaseDate { get; set; }

A ApplyFormatInEditMode configuração especifica que a formatação será aplicada quando o valor for exibido para edição. Esse comportamento pode não ser desejado para alguns campos. Por exemplo, em valores de moeda, o símbolo de moeda geralmente não é desejado na interface do usuário de edição.

O atributo [DisplayFormat] pode ser usado sozinho, mas geralmente é uma boa ideia usar o atributo [DataType]. O [DataType] atributo transmite a semântica dos dados em oposição a como renderizá-los em uma tela. O [DataType] atributo fornece os seguintes benefícios que não estão disponíveis com [DisplayFormat]:

• O navegador pode habilitar recursos HTML5, por exemplo, para mostrar um controle de calendário, o símbolo de moeda apropriado à localidade, links de e-mail, etc.
• Por padrão, o navegador processa dados usando o formato correto com base em sua localidade.
• O [DataType] atributo pode permitir que a estrutura ASP.NET Core escolha o modelo de campo certo para renderizar os dados. O DisplayFormat, se usado por si só, usa o modelo de cadeia de caracteres.

Nota: A validação do jQuery não funciona com o [Range] atributo e DateTime. Por exemplo, o código a seguir sempre exibirá um erro de validação do lado do cliente, mesmo quando a data estiver no intervalo especificado:

[Range(typeof(DateTime), "1/1/1966", "1/1/2020")]

É uma prática recomendada evitar compilar datas fixas em modelos, portanto, é desencorajado usar os atributos [Range] e DateTime. Use Configuração para intervalos de datas e outros valores que estão sujeitos a alterações frequentes em vez de especificá-lo no código.

O código a seguir mostra a combinação de atributos em uma linha:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }

    [StringLength(60, MinimumLength = 3)]
    public string Title { get; set; } = string.Empty;

    [Display(Name = "Release Date"), DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$"), Required, StringLength(30)]
    public string Genre { get; set; } = string.Empty;

    [Range(1, 100), DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$"), StringLength(5)]
    public string Rating { get; set; } = string.Empty;
}

Comece com Razor Pages e EF Core mostra operações avançadas EF Core com Razor Pages.

Aplicar migrações

As DataAnnotations aplicadas à classe modificam o esquema. Por exemplo, as DataAnnotations aplicadas ao Title campo:

[StringLength(60, MinimumLength = 3)]
[Required]
public string Title { get; set; } = string.Empty;

• Limita os caracteres a 60.
• Não permite valor null.

A tabela Movie atualmente tem o seguinte esquema:

CREATE TABLE [dbo].[Movie] (
    [ID]          INT             IDENTITY (1, 1) NOT NULL,
    [Title]       NVARCHAR (MAX)  NULL,
    [ReleaseDate] DATETIME2 (7)   NOT NULL,
    [Genre]       NVARCHAR (MAX)  NULL,
    [Price]       DECIMAL (18, 2) NOT NULL,
    [Rating]      NVARCHAR (MAX)  NULL,
    CONSTRAINT [PK_Movie] PRIMARY KEY CLUSTERED ([ID] ASC)
);

As alterações de esquema anteriores não fazem com que o EF lance uma exceção. No entanto, crie uma migração para que o esquema seja consistente com o modelo.

Estúdio Visual

No menu Ferramentas, selecione Gestor de Pacotes NuGet > Consola do Gestor de Pacotes. No PMC, digite os seguintes comandos:

Add-Migration New_DataAnnotations
Update-Database

Update-Database executa o método Up da classe New_DataAnnotations.

Código do Visual Studio

Use os seguintes comandos para adicionar uma migração para as novas DataAnnotations:

dotnet ef migrations add New_DataAnnotations
dotnet ef database update

dotnet ef database update executa o método Up da classe New_DataAnnotations.

Examine o Up método:

public partial class New_DataAnnotations : Migration
{
    /// <inheritdoc />
    protected override void Up(MigrationBuilder migrationBuilder)
    {
        migrationBuilder.AlterColumn<string>(
            name: "Title",
            table: "Movie",
            type: "nvarchar(60)",
            maxLength: 60,
            nullable: false,
            oldClrType: typeof(string),
            oldType: "nvarchar(max)");

        migrationBuilder.AlterColumn<string>(
            name: "Rating",
            table: "Movie",
            type: "nvarchar(5)",
            maxLength: 5,
            nullable: false,
            oldClrType: typeof(string),
            oldType: "nvarchar(max)");

        migrationBuilder.AlterColumn<string>(
            name: "Genre",
            table: "Movie",
            type: "nvarchar(30)",
            maxLength: 30,
            nullable: false,
            oldClrType: typeof(string),
            oldType: "nvarchar(max)");
    }

A tabela atualizada Movie tem o seguinte esquema:

CREATE TABLE [dbo].[Movie] (
    [ID]          INT             IDENTITY (1, 1) NOT NULL,
    [Title]       NVARCHAR (60)   NOT NULL,
    [ReleaseDate] DATETIME2 (7)   NOT NULL,
    [Genre]       NVARCHAR (30)   NOT NULL,
    [Price]       DECIMAL (18, 2) NOT NULL,
    [Rating]      NVARCHAR (5)    NOT NULL,
    CONSTRAINT [PK_Movie] PRIMARY KEY CLUSTERED ([ID] ASC)
);

Publicar no Azure

Para obter informações sobre como implantar no Azure, consulte Tutorial: Criar um aplicativo ASP.NET Core no Azure com o Banco de Dados SQL.

Obrigado por completar esta introdução ao Razor Pages. Comece com Razor Páginas e EF Core é um excelente acompanhamento para este tutorial.

Recursos adicionais

• Auxiliar de tags em formulários no ASP.NET Core
• Globalização e localização no ASP.NET Core
• Ajuda de Etiquetas no ASP.NET Core
• Auxiliares de Tag de Autor no ASP.NET Core

Próximos passos

Anterior: Adicionar um novo campo