Intégration du code avec l’interface utilisateur Telerik pour le composant Blazor Form

Une caractéristique clé de Blazor TelerikForm est la facilité avec laquelle il facilite l’ajout de fonctionnalités. Mais si vous souhaitez aller un peu plus loin, vous pouvez également ajouter votre propre validation personnalisée.

Le progrès Interface utilisateur Telerik pour Blazor Composant de formulaire facilite l’ajout d’un formulaire sur votre page Blazor, contrôlez sa mise en page et fournissez une validation de base en tirant parti des annotations de données. Et TelerikForm facilite également l’intégration de votre propre code dans votre formulaire, soit pour ajouter des fonctionnalités supplémentaires, soit pour étendre le formulaire avec une validation personnalisée.

La sauvegarde des données

Évidemment, le premier code que vous souhaiterez intégrer dans votre TelerikForm est ce qui est nécessaire pour enregistrer les données saisies par l’utilisateur (qui seront dans l’objet que vous transmettez au TelerikForm). Model attribut).

La première étape consiste à lier une méthode au formulaire OnSubmit événement pour surprendre l’utilisateur en cliquant sur le bouton de soumission par défaut du formulaire. Après cela, vous devez configurer une variable dans votre code qui fait référence à votre TelerikForm. Cet exemple relie le OnSubmit événement à une méthode appelée DoUpdate et le TelerikForm à un champ ou une propriété appelé form:

<TelerikForm Model="@customer" 
                        OnSubmit="@DoUpdate"
                        @ref="@form" >

Dans la section code de votre page Blazor, vous devez définir le champ ou la propriété que vous avez lié au formulaire (le champ ou la propriété doit être de type TelerikForm). Cet exemple configure un champ appelé form pour correspondre au nom utilisé dans le ref attribut:

@code {
   private TelerikForm form;

Après cela, vous devez définir la méthode liée au TelerikForm OnSubmit événement. Dans cette méthode, vous devez d’abord vérifier si des contrôles de validation ont échoué en appelant le formulaire IsValid méthode : vous utiliserez la ref champ/propriété que vous venez de configurer. Cela signifie que votre méthode comportera généralement deux parties : Après avoir appelé la méthode IsValid du formulaire, le code effectuera la mise à jour ou affichera un message d’erreur.

Le squelette d’une méthode OnSubmit typique ressemblera à ceci :

private void DoUpdate()
{
    if (form.IsValid())
    {
        
    }
   else
   {
      
   }
}

Répartition des responsabilités

Bien sûr, avoir le OnSubmit La méthode faire deux choses (gérer à la fois les mises à jour et les échecs) viole le principe de responsabilité unique : chaque partie de votre application doit bien faire une chose. Pour éviter cette double responsabilité, vous pouvez plutôt utiliser le formulaire TelerikForm. OnValidSubmit et OnInvalidSubmit événements.

La méthode que vous attachez au OnInvalidSubmit L’événement sera appelé chaque fois qu’une validation échoue. La méthode liée au OnValidSubmit ne sera appelé que si aucune validation n’échoue. Cette séparation élimine le besoin d’appeler le composant IsValid() et, par conséquent, la nécessité de définir une référence à l’élément TelerikForm.

Mettre tout cela ensemble signifie qu’un élément TelerikForm révisé qui utilise OnValidSubmit et OnInvalidSubmit il suffit de lier les méthodes à ces deux événements comme ceci :

<TelerikForm Model="@customer"  
                        OnValidSubmit="@Update"
                        OnInvalidSubmit="@NotifyFail">

Les squelettes des méthodes résultantes ressembleraient à ceci :

private void Update()
{
       
 }

private void NotifyFail()
{
     
 }

Vous n’êtes pas obligé d’utiliser les deux OnValidSubmit et OnInvalidSubmitmais si vous utilisez l’un ou l’autre, vous ne pouvez pas utiliser le OnSubmit événement.

Ajout de fonctionnalités

Par défaut, TelerikForm ajoute un bouton de soumission à votre formulaire. Vous souhaiterez peut-être inclure des boutons supplémentaires pour prendre en charge des fonctionnalités supplémentaires, par exemple un bouton de suppression ou d’effacement de formulaire.

Vous ajoutez vos propres boutons en imbriquant d’abord un élément ButtonGroup dans votre élément TelerikForm. Cela supprime le bouton Soumettre généré automatiquement, vous devrez donc ajouter un bouton pour déclencher une soumission à votre formulaire. En conséquence (et en utilisant un Bouton Telerik pour déclencher une soumission), un ButtonGroup minimal ressemblera à ceci :

<FormButtons>
    <TelerikButton ButtonType="@ButtonType.Submit" 
                               ThemeColor="primary">
       Submit
   </TelerikButton>
</FormButtons>

La définition de ThemeColor vous permet de récupérer le style configuré pour votre projet (en supposant que vous ayez choisi un thème lors de la configuration de votre projet).

Vous pouvez maintenant ajouter plus de boutons, en liant chacun d’eux à une nouvelle méthode via leur OnClick attribut. L’exemple suivant configure un bouton qui appellera une méthode pour effacer le formulaire. Vous voudrez vous assurer que le type de tout nouveau bouton est défini sur Button de sorte que cliquer sur ces boutons pas déclencher une soumission :

<FormButtons>
    <TelerikButton ButtonType="@ButtonType.Submit">
      Submit
    </TelerikButton>
    <TelerikButton ButtonType="ButtonType.Button" 
                               OnClick="@ClearForm">
       Clear
     </TelerikButton>
</FormButtons>

Pour effacer le formulaire, il vous suffit de mettre à jour l’objet qui pilote le formulaire avec une version non initialisée de l’objet. Depuis l’étude de cas Model la propriété utilise un objet Customer (via le customer propriété), une méthode « formulaire clair » doit simplement mettre un nouvel objet Customer dans le customer propriété (y compris l’initialisation de tous les objets imbriqués dans cette classe, comme l’objet Address utilisé par la classe Customer ShipAddress propriété).

Dans l’étude de cas, la méthode du formulaire clair ressemble à ceci :

private void ClearForm()
{
    customer  = new Customer
        {
            ShipAddress = new Address()
        };
}

Extension de la validation

Les annotations de données que vous ajoutez aux propriétés de la classe qui gère votre formulaire vous donnent un bon départ pour valider les entrées de vos utilisateurs… mais ce n’est probablement pas toute la validation dont vous aurez besoin. Une solution consiste à créer vos propres validateurs d’annotations de données en créant un validateur personnalisé. Cependant, créer un validateur personnalisé n’a de sens que si vous vous voyez utiliser cette logique de validation à plusieurs endroits différents.

Si la validation n’a de sens que pour ce formulaire et pas partout où la classe est utilisée, alors une meilleure stratégie consiste à inclure la logique supplémentaire dans le formulaire. Dans ce cas, vous voudrez peut-être enquêter FluentValidation de Jeremy Skinner et Blazored.FluentValidation de Chris Sainty qui intègre une validation fluide avec Blazor.

Vous devrez ajouter les packages NuGet pour les deux composants à votre application Blazor pour les utiliser. Une fois que vous avez ajouté ces packages NuGet, vous pouvez demander à votre TelerikForm d’utiliser FluentValidationValidator en l’imbriquant dans le fichier TelerikForm. FormValidation élément. Le FluentValidationValidator doit avoir un Validator attribut qui pointe vers un champ ou une propriété dans votre section de code. Quelque chose comme ceci fonctionnerait :

<TelerikForm Model="@customer" 
                        OnValidSubmit="@Update"
                         OnInvalidSubmit="@NotifyFail">
    <FormValidation>
        <FluentValidationValidator Validator="@cvalid"></FluentValidationValidator>
    </FormValidation>

Dans la section de code de votre application, ce champ ou cette propriété doit être chargé avec une classe de validateur fluide personnalisée. Ce code déclare un champ appelé cvalid et le charge avec une classe CustomerValidator personnalisée :

@code {
    CustomerValidator cvalid = new CustomerValidator();

Une classe de validateur personnalisée est simplement une classe qui hérite de AbstractValidator (personnalisé pour fonctionner avec la classe qui pilote votre formulaire) et contient un constructeur. Voici un squelette typique :

public class CustomerValidator : AbstractValidator<Customer>
{
    public CustomerValidator()
    {
    }
}

Vous pouvez maintenant ajouter votre code de validation personnalisé dans le constructeur du validateur personnalisé en passant une expression lambda au RuleFor méthode fournie par le package de validation fluide. La validation Fluent fournit un certain nombre de validations prédéfinies, mais en enchaînant les Must méthode à la RuleFor La méthode vous permet d’écrire le code de validation de votre choix. De plus, en enchaînant les WithMessage méthode à la Must La méthode vous permet de spécifier le message d’erreur à afficher lorsque votre règle détecte un problème.

Cet exemple nécessite le client LastName la propriété a une valeur si le FirstName la propriété a une valeur :

 public CustomerValidator()
 {
    RuleFor(c => c.LastName).NotEmpty()
                                                  .When(c => c.FirstName != "")
                                                  .WithMessage("If a first name is provided then a last name must be provided");
}

En soi, la validation fluide ignore toute validation effectuée via des annotations de données. Cependant, vous pouvez utiliser le validateur fluide avec DataAnnotationsValidator ou ObjectGraphDataAnnotationsValidator pour intégrer la validation basée sur les annotations de données. Ce TelerikForm combine le DataAnnotationsValidator avec le FluentValidationValidator, par exemple :

<TelerikForm Model="@customer" 
                        OnInvalidSubmit="@NotifyFail" 
                        OnValidSubmit="@Update”>
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <FluentValidationValidator Validator="@cvalid"></FluentValidationValidator>
    </FormValidation>

Tirer parti des deux validateurs peut être une stratégie judicieuse. Vous pouvez utiliser des annotations de données dans la classe pour implémenter une validation simple qui s’applique partout où une classe est utilisée. Vous pouvez ensuite utiliser la validation fluide pour une validation supplémentaire appliquée dans un formulaire spécifique. Étant donné que vous pouvez également partager des validateurs fluides entre projets, vous pouvez utiliser la validation fluide pour prendre en charge une validation plus complexe que ce qui est possible avec des annotations de données sur plusieurs projets.

Le TelerikForm affichera tous les messages de validation générés par tous les validateurs que vous utilisez.

Affichage des messages de validation

Par défaut, le message de validation apparaît sous le contrôle de saisie, mais vous pouvez le modifier. Vous pouvez, par exemple, définir l’utilisation du TelerikForm ValidationMessageType attribuer à FormValidationMessageType.Tooltip pour afficher les messages dans une info-bulle (tout contrôle de saisie avec une erreur sera toujours affiché en rouge) :

<TelerikForm Model="@customer" 
                        OnValidSubmit="@Update" 
                       OnInvalidSubmit="@NotifyFail" 
                       ValidationMessageType=FormValidationMessageType.Tooltip>

Vous pouvez également définir ValidationMessageType sur none pour supprimer les messages sur le contrôle lui-même : tout contrôle comportant une erreur sera toujours surligné en rouge. Avec cette option, ce serait probablement une bonne idée d’ajouter un composant ValidationSummary à l’intérieur de l’élément FormValidation pour afficher toutes les erreurs générées dans le formulaire.

<TelerikForm Model="@customer" 
             OnInvalidSubmit="@NotifyFail" 
             OnValidSubmit="@Update"
             ValidationMessageType=FormValidationMessageType.None>
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <FluentValidationValidator Validator="@cvalid"></FluentValidationValidator>
        <TelerikValidationSummary></TelerikValidationSummary>
    </FormValidation>

À lui seul, TelerikForm vous offre la possibilité de générer rapidement un formulaire de saisie de données. La combinaison du TelerikForm avec votre propre code vous permet d’ajouter toute fonctionnalité supplémentaire dont vous avez besoin à votre formulaire et d’étendre la validation de vos données.

Essayez l’interface utilisateur Telerik pour Blazor

Essayez le composant Form, ainsi que plus de 100 autres composants Blazor véritablement natifs et faciles à personnaliser pour répondre à toutes les exigences. Essayer Interface utilisateur Telerik pour Blazor gratuitement avec un essai de 30 jours et bénéficiez d’un support de pointe.

Essayez maintenant