Formulaires HTML et capture des données utilisateur

Blazor fournit des composants d’assistance fantastiques pour simplifier la création de formulaires HTML afin que votre application Web puisse accepter les données utilisateur.

Les applications Web modernes ne sont pas des rues à sens unique. Les utilisateurs interagissent avec nos applications en naviguant sur le site Web ou l’application Web ou, surtout, en saisissant des données.

Dans cette partie du Les bases du Blazor série, nous apprendrons comment créer des formulaires HTML pour capturer les données utilisateur.

En guise de court teaser, Blazor propose un ensemble de composants d’assistance fantastiques pour gérer la création et la gestion des formulaires.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Création de formulaires HTML à l’aide de Blazor

Dans cet article, nous allons créer un formulaire de connexion simple acceptant le nom d’utilisateur et le mot de passe de l’utilisateur. Nous souhaitons également utiliser un champ de mot de passe masqué. Cet exemple montrera comment créer des formulaires simples à l’aide de Blazor.

Tout d’abord, nous avons besoin d’un formulaire. Blazor fournit des composants encapsulant l’élément de formulaire HTML pour rendre la création de formulaires plus conviviale pour les développeurs.

<EditForm Model="@UserData" OnSubmit="@Submit">
</EditForm>

L’intégré EditForm le composant encapsule le code HTML form élément.

Il fournit un OnSubmit propriété où nous pouvons fournir une méthode appelée lorsque le formulaire est soumis.

Il existe deux approches principales pour implémenter des formulaires lors de l’utilisation du EditForm composant. Nous pouvons fournir un Model propriété comme indiqué ci-dessus, ou nous pouvons créer et fournir un EditContext. Le EditContext permet un contrôle plus granulaire.

Cependant, nous n’en avons pas besoin pour notre exemple de base. Nous préférons plutôt fournir un Model propriété. Cela créera un EditContext Dans les coulisses.

Ensuite, nous ajoutons une soumission button au modèle de composant à l’intérieur du EditForm instance de composant.

<EditForm Model="@UserData" OnSubmit="@Submit">
    <button class="btn btn-primary" type="submit">Log in</button>
</EditForm>

Nous utilisons un HTML par défaut button élément et fournissez quelques classes Bootstrap pour le styliser. Nous avons également fixé le type à submit.

Ajout de champs de formulaire à l’aide de composants Wrapper

Blazor est livré avec des composants d’entrée intégrés. Ces composants suivent une convention de dénomination et commencent toujours par « Input ». Les composants suivants sont disponibles :

• Case à cocher d’entrée
• Date d’entrée
• Fichier d’entrée
• Numéro d’entrée
• EntréeRadio
• GroupeRadiod’entrée
• Sélection d’entrée
• Texte de saisie
• Zone de texte d’entrée

Tous les composants d’entrée encapsulent le contrôle d’entrée HTML natif et fournissent des propriétés et des événements utiles.

Outre les événements et propriétés fournis, nous pouvons ajouter des attributs HTML réguliers lorsque des contrôles de saisie sont utilisés.

Par exemple, nous pouvons utiliser le InputText contrôler et définir le code HTML type attribuer à password pour masquer l’entrée de l’utilisateur.

Les commandes d’entrée intégrées utilisent le EditContext fournis par le EditForm composant pour accéder aux propriétés du modèle. Plus précisément, il utilise paramètres en cascade Dans les coulisses.

Pour notre exemple, nous ajoutons deux InputText composants pour définir un champ de saisie pour le nom d’utilisateur et pour le mot de passe.

<InputText @bind-Value="UserData.Username" />
<InputText type="password" @bind-Value="UserData.Password" />

Comme indiqué ci-dessus, les types d’entrée intégrés accèdent au modèle fourni au EditForm composant utilisant le EditContext. Cela nous permet de lier le Value propriété du InputText composante d’une propriété du UserData variable.

Il est important d’utiliser le nom de la variable fournie au Model propriété du EditForm composant. Sinon, vous obtiendrez une erreur du compilateur indiquant que la variable n’est pas connue dans ce contexte.

Notez que nous définissons le code HTML type attribuer au deuxième InputText exemple. Le champ du formulaire masquera la saisie lorsque l’utilisateur saisira son mot de passe. C’est un attribut HTML normal.

L’ensemble du composant, y compris quelques-uns divpour le rendre plus attrayant, cela ressemble à ceci :

<h1>Login</h1>

<EditForm Model="@UserData" OnSubmit="@Submit">
    <div style="margin-bottom: 10px;">
        <div>Username</div>
        <InputText @bind-Value="UserData.Username" />
    </div>
    <div style="margin-bottom: 10px;">
        <div>Password</div>
        <InputText type="password" @bind-Value="UserData.Password" />
    </div>
    <button class="btn btn-primary" type="submit">Log in</button>
</EditForm>

Avec seulement environ 15 lignes de code, nous créons un formulaire avec deux champs de saisie, un bouton de soumission et des étiquettes. Nous fournissons également un UserData objet comme le Model propriété et ajoutez un gestionnaire de clics à la propriété OnSubmit propriété du EditForm composant.

Traitement de la soumission du formulaire

Nous avons déjà fourni le Submit méthode comme le OnSubmit gestionnaire d’événements pour le EditForm composant. Maintenant, implémentons le Submit méthode au sein du @code section de notre composant de formulaire.

@code {
    public User UserData { get; set; }
    public string FormCompletedText { get; set; } = "";

    protected override void OnInitialized()
    {
        UserData = new User();
    }

    public void Submit()
    {
        FormCompletedText = $"User {UserData.Username} logged in.";
    }

    public class User
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

Nous créons deux string propriétés. Le UserData La propriété contient les données du formulaire fournies par l’utilisateur. Le FormCompletedText sera rempli avec un texte que nous souhaitons afficher lorsque l’utilisateur sera connecté.

Le Submit La méthode est exécutée lorsqu’un utilisateur soumet le formulaire en appuyant sur le bouton Soumettre. Dans la méthode, nous accédons au UserData propriété qui contient les valeurs que l’utilisateur a mises dans chaque champ de saisie.

Nous accédons au Username propriété et écrivez un court message pour que l’utilisateur confirme que la connexion a réussi.

Nous ajoutons l’extrait de modèle suivant à la section modèle du composant pour afficher le message à l’utilisateur.

<p style="margin-top: 20px;">@FormCompletedText</p>

Il affichera le texte défini dans le Submit méthode à l’utilisateur chaque fois qu’il appuie sur le bouton de connexion.

Réinitialisation des champs de saisie du formulaire

Semblable aux formulaires HTML classiques, nous pouvons utiliser un button de type « réinitialiser » pour réinitialiser les valeurs dans les champs de saisie.

Nous ajoutons la ligne suivante sous le bouton de soumission existant dans le EditForm instance de composant.

<button class="btn btn-secondary" type="reset">Reset</button>

Lorsque l’utilisateur appuie sur le bouton, les champs du formulaire sont effacés.

Note: Gardez à l’esprit que cela efface uniquement le champs de saisie visible à l’écran. Si nous voulons également réinitialiser les valeurs dans le UserData objet, nous devons ajouter un Reset méthode et ajoutez-la en tant que gestionnaire d’événements à la onReset propriété du EditForm composant.

Cependant, la réinitialisation des champs de formulaire à l’aide d’un bouton de réinitialisation n’est plus aussi courante qu’avant. Le plus souvent, vous souhaitez réinitialiser les champs lorsqu’un formulaire a été soumis.

La mise en œuvre est simple. Nous ajoutons la ligne suivante au Submit méthode.

public void Submit()
{
    FormCompletedText = $"User {UserData.Username} logged in.";
    UserData = new User();
}

La deuxième ligne du Submit La méthode crée une nouvelle instance du User classe et l’attribue à la UserData propriété.

Les champs de formulaire utilisent un liaison bidirectionnelle, ce qui signifie que les valeurs modifiées dans le code seront également reflétées à l’écran. Par conséquent, tous les champs du formulaire sont vides après la soumission du formulaire.

Traitement des avertissements relatifs aux types de référence nullables

Le code ci-dessus ne tient pas compte types de référence nullables (NRT).

Si vous avez codé, vous en avez certainement vu au moins trois avertissements du compilateur provoqué par des types de référence nullables.

Corrigons ces avertissements.

Tout d’abord, nous ajoutons une valeur non nulle par défaut aux propriétés du User classe.

public class User
{
    public string Username { get; set; } = "";
    public string Password { get; set; } = "";
}

Dans ce cas, nous définissons une chaîne vide pour les deux propriétés.

Ensuite, au lieu d’attribuer une instance de User classe au UserData propriété dans le OnInitialized méthode du cycle de vie, nous initialisons la valeur lors de la déclaration de la propriété.

@code {
    public User UserData { get; set; } = new User();
    public string FormCompletedText { get; set; } = "";

    public void Submit()
    {
        FormCompletedText = $"User {UserData.Username} logged in.";
        UserData = new User();
    }

    public class User
    {
        public string Username { get; set; } = "";
        public string Password { get; set; } = "";
    }
}

Cette version n’est pas seulement plus courte, elle n’a pas besoin d’un texte explicite OnInitialized override, mais corrige également tous les avertissements du compilateur spécifiques au type de référence nullable.

Conclusion

Blazor nous permet d’implémenter des formulaires HTML à l’aide de composants wrapper. Ces composants fournissent une excellente API pour la gestion des événements. Nous pouvons ajouter des méthodes pour gérer facilement les soumissions ou les réinitialisations de formulaires.

Les composants de wrapper d’entrée intégrés, tels que le composant InputText, nous permettent d’ajouter des attributs HTML standard, tels que le type. Et nous pouvons utiliser le puissant mécanisme de liaison bidirectionnelle fourni par le modèle de composant Blazor.

Avec moins de 40 lignes de code, nous disposons d’un formulaire HTML entièrement fonctionnel, comprenant une classe de données de type sécurisé et un code de gestion de formulaire. Bien sûr, vous ajouteriez probablement plus de logique à la méthode Submit dans une application réelle, comme appeler un backend pour vérifier les données utilisateur.

Dans l’article suivant de ce Les bases du Blazor série, nous découvrirons les différentes options de validation de formulaire.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.

Vous cherchez quelque chose d’encore plus simple ? Parmi plus de 110 composants Blazor natifs, Progress Interface utilisateur Telerik pour Blazor offre une polyvalence Formulaire composant, complet avec validation intégrée. Essayer toute la bibliothèque gratuite pendant 30 jours.