Formularios y validación

Sugerencia

Este contenido es un extracto del libro electrónico "Blazor for ASP.NET Web Forms Developers for Azure" (Blazor para desarrolladores de ASP.NET Web Forms), disponible en Documentación de .NET o como un PDF descargable y gratuito que se puede leer sin conexión.

Descargar PDF

El marco de ASP.NET Web Forms incluye un conjunto de controles de servidor de validación que controlan la validación de la entrada del usuario escrita en un formulario (RequiredFieldValidator, CompareValidator, RangeValidator, etc.). El marco de ASP.NET Web Forms también admite el enlace de modelos y la validación del modelo en función de anotaciones de datos ([Required], [StringLength], [Range]etc.). La lógica de validación se puede aplicar tanto en el servidor como en el cliente mediante una validación no discreta basada en JavaScript. El ValidationSummary control de servidor se usa para mostrar un resumen de los errores de validación al usuario.

Blazor admite el uso compartido de la lógica de validación entre el cliente y el servidor. ASP.NET proporciona implementaciones de JavaScript pregeneradas de muchas validaciones de servidor comunes. En muchos casos, el desarrollador todavía tiene que escribir JavaScript para implementar completamente su lógica de validación específica de la aplicación. Los mismos tipos de modelo, anotaciones de datos y lógica de validación se pueden usar tanto en el servidor como en el cliente.

Blazor proporciona un conjunto de componentes de entrada. Los componentes de entrada manejan la vinculación de los datos de campo a un modelo y validan la entrada del usuario al enviar el formulario.

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

El EditForm componente encapsula estos componentes de entrada y organiza el proceso de validación a través de .EditContext Al crear un EditForm, se especifica la instancia de modelo a la que se va a enlazar mediante el Model parámetro . Normalmente, la validación se realiza mediante anotaciones de datos y es extensible. Para habilitar la validación basada en anotaciones de datos, agregue el DataAnnotationsValidator componente como elemento secundario de .EditForm El componente EditForm proporciona un evento práctico para controlar los envíos válidos (OnValidSubmit) y no válidos (OnInvalidSubmit). También hay un evento más genérico OnSubmit que le permite desencadenar y controlar la validación usted mismo.

Para mostrar un resumen de errores de validación, use el ValidationSummary componente . Para mostrar mensajes de validación para un campo de entrada específico, use el ValidationMessage componente y especifique una expresión lambda para el For parámetro que apunta al miembro del modelo adecuado.

El siguiente tipo de modelo define varias reglas de validación mediante anotaciones de datos:

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; }
}

En el componente siguiente se demuestra cómo construir un formulario en Blazor basado en el 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
    }
}

Después del envío del formulario, los datos enlazados al modelo no se han guardado en ningún almacén de datos, como una base de datos. En una Blazor WebAssembly aplicación, los datos deben enviarse al servidor. Por ejemplo, mediante una solicitud HTTP POST. En una Blazor aplicación Server, los datos ya están en el servidor, pero deben conservarse. Controlar el acceso a datos en Blazor aplicaciones es el asunto de la sección Tratar con datos .

Recursos adicionales

Para obtener más información sobre los formularios y la validación en Blazor aplicaciones, consulte la Blazor documentación.

Siguiente anterior