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 ASP.NET Web Forms incluye un conjunto de controles de servidor de validación que administran la validación de la entrada de usuario escrita en un formulario (RequiredFieldValidator, CompareValidator, RangeValidator, etc.). El marco 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 la validación discreta basada en JavaScript. El control de servidor ValidationSummary 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 precompiladas de muchas validaciones de servidor comunes. En muchos casos, el desarrollador todavía tiene que escribir JavaScript para implementar completamente la lógica de validación específica de la aplicación. Se pueden usar los mismos tipos de modelo, anotaciones de datos y lógica de validación tanto en el servidor como en el cliente.

Blazor proporciona un conjunto de componentes de entrada. Los componentes de entrada controlan el enlace de los datos de campo a un modelo y validan la entrada del usuario cuando se envía 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 componente EditForm encapsula estos componentes de entrada y organiza el proceso de validación mediante un objeto EditContext. Al crear un objeto EditForm, se especifica la instancia de modelo a la que se va a enlazar mediante el parámetro Model. La validación se realiza normalmente con anotaciones de datos y es extensible. Para habilitar la validación basada en anotaciones de datos, agregue el componente DataAnnotationsValidator como un 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 OnSubmit más genérico que le permite desencadenar y controlar la validación.

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

En el tipo de modelo siguiente se definen 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; }
}

El componente siguiente muestra cómo crear un formulario en Blazor según 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 de enviar el formulario, los datos enlazados al modelo no se han guardado en ningún almacén de datos, como una base de datos. En una aplicación Blazor WebAssembly, los datos se deben enviar al servidor. Por ejemplo, mediante una solicitud HTTP POST. En una aplicación Blazor Server, los datos ya están en el servidor, pero se deben conservar. El control del acceso a datos en las aplicaciones Blazor es el tema de la sección Tratamiento de datos.

Recursos adicionales

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

AnteriorSiguiente