Formulários e validação

Gorjeta

Este conteúdo é um excerto do eBook, Blazor para ASP NET Web Forms Developers for Azure, disponível no .NET Docs ou como um PDF transferível gratuito que pode ser lido offline.

Descarregar PDF

A estrutura 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 ASP.NET Web Forms também oferece suporte à vinculaçã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 no servidor e no cliente usando validação discreta baseada em JavaScript. O ValidationSummary controle de servidor é usado para exibir um resumo dos erros de validação para o usuário.

Blazor suporta o compartilhamento da lógica de validação entre o cliente e o servidor. 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 vinculaçã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 EditContextarquivo . Ao criar um EditForm, você especifica a qual instância do modelo deve ser vinculada usando o Model parâmetro. A validação geralmente é 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 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 acionar e lidar com a validação por conta própria.

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 componente a seguir demonstra a criação de um formulário com base no Blazor tipo de Starship 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 Blazor aplicativo de servidor, os dados já estão no servidor, mas devem ser persistentes. Lidar com o acesso a dados em Blazor aplicativos é o assunto da seção Lidando com dados .

Recursos adicionais

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

AnteriorSeguinte