Formulaires et validation

Conseil

Ce contenu est un extrait du livre électronique, Blazor pour les développeurs ASP NET Web Forms pour Azure, disponible dans la documentation .NET ou au format PDF à télécharger gratuitement pour le lire hors connexion.

Télécharger le PDF

Le framework ASP.NET Web Forms inclut un ensemble de contrôles de serveur de validation qui gèrent la validation des entrées utilisateur saisies dans un formulaire (RequiredFieldValidator, CompareValidator, RangeValidator, etc.). Le framework ASP.NET Web Forms prend également en charge la liaison et la validation du modèle en fonction d’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 en utilisant une validation discrète basée sur JavaScript. Le contrôle du serveur ValidationSummary sert à présenter 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 la même logique de validation peuvent être utilisés sur le serveur et le client.

Blazor fournit un ensemble de composants d’entrée. Les composants d’entrée gèrent les données de champ de liaison à un modèle et valident l’entrée 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 composant EditForm 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 paramètre Model. 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 des annotations de données, ajoutez le composant DataAnnotationsValidator en tant qu’enfant de EditForm. Le composant EditForm 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é des erreurs de validation, utilisez le composant ValidationSummary. Pour afficher des messages de validation pour un champ de saisie spécifique, utilisez le composant ValidationMessage, en spécifiant une expression lambda pour le paramètre For 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 dans Blazor, basé sur le type de modèle 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
    }
}

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, par exemple une base de données. Dans une application Blazor WebAssembly, les données doivent être envoyées au serveur. Par exemple, à l’aide d’une requête HTTP POST. Dans une application serveur Blazor, 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 applications Blazor est abordée dans la section Traitement des données.

Ressources supplémentaires

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

PrécédentSuivant