Formulaires et validation

Conseil / Astuce

Ce contenu est un extrait du livre électronique, Blazor pour les développeurs ASP NET Web Forms pour Azure, disponible sur .NET Docs ou en tant que PDF téléchargeable gratuitement qui peut être lu hors connexion.

Télécharger le PDF

L’infrastructure ASP.NET Web Forms inclut un ensemble de contrôles de serveur de validation qui gèrent la validation de l’entrée utilisateur entrée dans un formulaire (RequiredFieldValidator, CompareValidator, RangeValidatoretc.). L’infrastructure ASP.NET Web Forms prend également en charge la liaison de modèle et la validation du modèle en fonction des annotations de données ([Required], [StringLength], [Range]etc.). La logique de validation peut être appliquée à la fois sur le serveur et sur le client à l’aide de la validation JavaScript discrète. Le ValidationSummary contrôle serveur est utilisé pour afficher un résumé des erreurs de validation à l’utilisateur.

Blazor prend en charge le partage de la logique de validation entre le client et le serveur. ASP.NET fournit des implémentations JavaScript prédéfinies de nombreuses validations de serveur courantes. Dans de nombreux cas, le développeur doit toujours écrire JavaScript pour implémenter entièrement sa logique de validation spécifique à l’application. Les mêmes types de modèles, annotations de données et logique de validation peuvent être utilisés sur le serveur et le client.

Blazor fournit un ensemble de composants d’entrée. Les composants de saisie gèrent la liaison des données de champ à un modèle et valident les données saisies par l'utilisateur lorsque le formulaire est envoyé.

Composant d’entrée	Élément HTML rendu
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Le EditForm composant encapsule ces composants d’entrée et orchestre le processus de validation via un EditContext. Lors de la création d’un EditForm, vous spécifiez l’instance de modèle à lier à l’aide du Model paramètre. La validation est généralement effectuée à l’aide d’annotations de données, et elle est extensible. Pour activer la validation basée sur l’annotation de données, ajoutez le DataAnnotationsValidator composant en tant qu’enfant du EditForm. Le EditForm composant fournit un événement pratique pour gérer les soumissions valides (OnValidSubmit) et non valides (OnInvalidSubmit). Il existe également un événement plus générique OnSubmit qui vous permet de déclencher et de gérer la validation vous-même.

Pour afficher un résumé d’erreur de validation, utilisez le ValidationSummary composant. Pour afficher des messages de validation pour un champ d’entrée spécifique, utilisez le ValidationMessage composant, en spécifiant une expression lambda pour le For paramètre qui pointe vers le membre de modèle approprié.

Le type de modèle suivant définit plusieurs règles de validation à l’aide d’annotations de données :

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

Le composant suivant illustre la création d’un formulaire en Blazor fonction du type de Starship modèle :

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

Après l’envoi du formulaire, les données liées au modèle n’ont pas été enregistrées dans un magasin de données, comme une base de données. Dans une Blazor WebAssembly application, les données doivent être envoyées au serveur. Par exemple, à l’aide d’une requête HTTP POST. Dans une Blazor application serveur, les données sont déjà sur le serveur, mais elles doivent être conservées. La gestion de l’accès aux données dans les Blazor applications est l’objet de la section Gestion des données .

Ressources supplémentaires

Pour plus d’informations sur les formulaires et la validation dans les Blazor applications, consultez la Blazor documentation.

PrécédentSuivant