Formulários e validação

A estrutura do ASP.NET Web Forms inclui um conjunto de controles de servidor de validação que manipulam a validação da entrada do usuário inserida em um formulário (RequiredFieldValidator, CompareValidator, RangeValidatore assim por diante). A estrutura do ASP.NET Web Forms também dá suporte à associação de modelo e à validação do modelo com base em anotações de dados ([Required], [StringLength], [Range]e assim por diante). A lógica de validação pode ser imposta tanto no servidor quanto no cliente usando a validação baseada em JavaScript discreta. O controle do servidor ValidationSummary é usado para exibir um resumo dos erros de validação para o usuário.

Blazor dá suporte ao compartilhamento da lógica de validação entre o cliente e o servidor. O ASP.NET fornece implementações JavaScript pré-criadas de muitas validações de servidor comuns. Em muitos casos, o desenvolvedor ainda precisa escrever JavaScript para implementar totalmente a lógica de validação específica ao aplicativo. Os mesmos tipos de modelo, anotações de dados e lógica de validação podem ser usados no servidor e no cliente.

Blazor fornece um conjunto de componentes de entrada. Os componentes de entrada lidam com a associação dos dados de campo a um modelo e com a validação da entrada do usuário quando o formulário é enviado.

O componente EditForm encapsula esses componentes de entrada e orquestra o processo de validação por meio de um EditContext. Ao criar uma EditForm, especifique a instância do modelo a ser associada ao uso do parâmetro Model. A validação normalmente é feita usando anotações de dados e é extensível. Para habilitar a validação baseada em anotação de dados, adicione o componente DataAnnotationsValidator como um filho do EditForm. O componente EditForm fornece um evento conveniente para lidar com envios válidos (OnValidSubmit) e inválidos (OnInvalidSubmit). Há também um evento mais genérico OnSubmit que permite que você mesmo dispare e lide com a validação.

Para exibir um resumo de erro de validação, use o componente ValidationSummary. Para exibir mensagens de validação para um campo de entrada específico, use o componente ValidationMessage, especificando uma expressão lambda para o parâmetro For que aponta para o membro do modelo apropriado.

O seguinte tipo de modelo define várias regras de validação usando anotações de dados:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16,
        ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { get; set; }

    public string Description { get; set; }

    [Required]
    public string Classification { get; set; }

    [Range(1, 100000,
        ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true",
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

O seguinte componente demonstra a criação de um formulário no Blazor com base no tipo de modelo Starship:

<h1>New Ship Entry Form</h1>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="identifier">Identifier: </label>
        <InputText id="identifier" @bind-Value="starship.Identifier" />
        <ValidationMessage For="() => starship.Identifier" />
    </p>
    <p>
        <label for="description">Description (optional): </label>
        <InputTextArea id="description" @bind-Value="starship.Description" />
    </p>
    <p>
        <label for="classification">Primary Classification: </label>
        <InputSelect id="classification" @bind-Value="starship.Classification">
            <option value="">Select classification ...</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
            <option value="Defense">Defense</option>
        </InputSelect>
        <ValidationMessage For="() => starship.Classification" />
    </p>
    <p>
        <label for="accommodation">Maximum Accommodation: </label>
        <InputNumber id="accommodation" @bind-Value="starship.MaximumAccommodation" />
        <ValidationMessage For="() => starship.MaximumAccommodation" />
    </p>
    <p>
        <label for="valid">Engineering Approval: </label>
        <InputCheckbox id="valid" @bind-Value="starship.IsValidatedDesign" />
        <ValidationMessage For="() => starship.IsValidatedDesign" />
    </p>
    <p>
        <label for="productionDate">Production Date: </label>
        <InputDate id="productionDate" @bind-Value="starship.ProductionDate" />
        <ValidationMessage For="() => starship.ProductionDate" />
    </p>

    <button type="submit">Submit</button>
</EditForm>

@code {
    private Starship starship = new Starship();

    private void HandleValidSubmit()
    {
        // Save the data
    }
}

Após o envio do formulário, os dados associados ao modelo não foram salvos em nenhum armazenamento de dados, como um banco de dados. Em um aplicativo Blazor WebAssembly, os dados devem ser enviados para o servidor. Por exemplo, usando uma solicitação HTTP POST. Em um aplicativo de Servidor do Blazor, os dados já estão no servidor, mas devem ser persistidos. Lidar com o acesso a dados em aplicativos Blazor é o assunto da seção Como lidar com dados.

Recursos adicionais

Para obter mais informações sobre formulários e validação em aplicativos do Blazor, confira a documentação do Blazor.