Formulários e validação

Dica

Esse conteúdo é um trecho do livro eletrônico, Blazor para Desenvolvedores do ASP NET Web Forms para o Azure, disponível no .NET Docs ou como um PDF para download gratuito que pode ser lido offline.

Baixar PDF

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 (RequiredFieldValidatore CompareValidatorRangeValidatorassim por diante). A estrutura do ASP.NET Web Forms também dá suporte à associação de modelos e à validação do modelo com base em anotações de dados ([Required]e [StringLength][Range]assim por diante). A lógica de validação pode ser imposta no servidor e no cliente usando validação baseada em JavaScript não discreta. O ValidationSummary controle do servidor é 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 do 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 de dados de campo a um modelo e validam a entrada do usuário quando o formulário é enviado.

Componente de entrada	Elemento HTML renderizado
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

O EditForm componente encapsula esses componentes de entrada e orquestra o processo de validação por meio de um EditContext. Ao criar um EditForm, você especifica a instância do modelo a ser vinculada usando o parâmetro Model. Normalmente, a validação é feita usando anotações de dados e é extensível. Para habilitar a validação baseada em anotação de dados, adicione o DataAnnotationsValidator componente como um filho do EditForm. O EditForm componente 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 disparar e manipular a validação você mesmo.

Para exibir um resumo de erro de validação, use o ValidationSummary componente. Para exibir mensagens de validação para um campo de entrada específico, use o ValidationMessage componente, especificando uma expressão lambda para o For parâmetro 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 Blazor com base no Starship tipo de modelo:

<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 Blazor WebAssembly aplicativo, 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 Blazor aplicativos é o assunto da seção Lidar com dados .

Recursos adicionais

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

AnteriorPróximo