Formulaires et validation dans les composants Razor

Examinons les nouvelles fonctionnalités de formulaire et de validation récemment ajoutées à Razor Components. Nous commencerons par un aperçu des formulaires et de la mise en œuvre de la validation, puis nous examinerons ce qui est inclus dans la boîte. Nous terminerons avec un exemple d'utilisation de tout cela.

C'est une nouvelle version formidable pour les fans de Blazor / Razor Components. Nous avons eu quelques nouveaux ajouts intéressants, dont le pré-rendu et la gestion améliorée des événements, mais je pense que le plus important concerne les formulaires et la validation.

Dans cet article, je vais vous donner un premier aperçu de cette nouvelle fonctionnalité. Commençons par un aperçu du fonctionnement de tout, puis examinons les nouveaux composants dont nous disposons, puis examinons un exemple de leur utilisation.

Présentation générale des formulaires et de la validation

Beaucoup d’entre vous seront peut-être heureux d’entendre que la validation est basée sur des annotations de données similaires à MVC. C’est un excellent point de départ, car c’est déjà un modèle bien établi dans ASP.NET (MVC, Razor Pages).

Encore une fois, pour ceux qui ont déjà utilisé des formulaires et la validation dans ASP.NET, il existe un quelques composants familiers. Il existe un composant de résumé de validation et un composant de message de validation, qui fonctionnent de la même manière que leur nom dans MVC.

Mais que se passe-t-il si vous n'êtes pas fan des annotations de données? Eh bien, ça va aussi. Comme ce fut le cas avec Blazor depuis le début, l'équipe a très bien su donner aux développeurs des options là où ils le peuvent. Les formulaires et la validation ne sont pas différents.

Bien que des annotations de données prêtes à l'emploi soient incluses, vous êtes libre de les échanger contre un autre système de validation de votre choix et de les valider couramment? Si vous n'aimez pas le comportement par défaut des nouveaux contrôles d'entrée, vous pouvez créer le vôtre. Vous pouvez adapter les formulaires et le système de validation à votre guise.

Contenu de la boîte

Passons rapidement en revue les nouveaux composants inclus dans les formulaires et la validation. Comme je l'ai déjà dit, si vous connaissez les applications ASP.NET MVC, certains noms vous seront probablement familiers.

EditForm

Il s'agit de votre point de départ pour la création d'un formulaire. Ce composant englobe tous les contrôles de formulaire, il fournit l'infrastructure de gestion de la validation de formulaire et fournit quelques événements utiles auxquels vous devez vous connecter pour soumettre le formulaire: OnValidSubmit OnInvalidSubmit et OnSubmit .

Vous pouvez utiliser OnValidSubmit et OnInvalidSubmit ensemble, mais OnSubmit ne peut être utilisé que seul. Lorsque vous utilisez OnValidSubmit le cadre déclenchera la validation pour vous, mais lorsque vous utilisez OnSubmit vous devez vous assurer de la validité du formulaire.

L'autre paramètre important à connaître est le Paramètre Model . Il s'agit de l'objet modèle de niveau supérieur pour le formulaire. C'est dans cet objet que vous souhaitez spécifier vos annotations de données que le formulaire utilisera pour la validation.

DataAnnotationsValidator

Le composant DataAnnotationsValidator active la prise en charge des annotations de données pour le formulaire. Si vous souhaitez utiliser une méthode de validation différente, vous pouvez remplacer ce composant par une autre implémentation.

ValidationSummary

Ce composant répertorie les erreurs de validation de votre formulaire sous forme de liste simple. Vous placerez généralement ceci en haut de votre formulaire. Encore une fois, cela vous semblera très familier si vous avez déjà utilisé la validation des annotations de données.

ValidationMessage

Très similaire au composant ValidationSummary le composant ValidationMessage diffère par indiquant les erreurs de validation pour un champ d'entrée spécifique, spécifié à l'aide du paramètre For . Vous placeriez généralement ce composant près du champ sur lequel il valide.

Composants d'entrée

Il y a maintenant six nouveaux composants couvrant différents types d'entrée. Celles-ci sont conçues pour fonctionner de manière transparente avec les composants ci-dessus afin de gérer la validation.

• InputText
• InputTextArea
• InputNumber
• InputCheckbox
• InputSelect
• InputDate

Les noms sont assez explicites, mais il est intéressant de noter que InputData et InputNumber ont une analyse de valeur élémentaire afin qu'une date invalide ou une valeur non numérique s'affiche automatiquement comme une erreur de validation, ce qui est ordonné. Vous avez peut-être également remarqué qu’il n’y avait aucun composant de bouton radio hors de la boîte. Si vous avez besoin de valider des boutons radio, vous devez écrire le vôtre pour le moment.

Exemple d'utilisation

Maintenant que nous connaissons les éléments de base, voyons comment nous pouvons les utiliser. Nous allons créer un formulaire simple en utilisant le modèle suivant:

 public class Film
{
  [Required, StringLength(50, ErrorMessage = "Title must be 50 characters or less")]
  chaîne publique Title {get; ensemble; }

  [Required]
  public DateTime ReleaseDate {get; ensemble; }

  [Range(1, 5, ErrorMessage = "Rating must be from 1 to 5")]
  public int Rating {get; ensemble; }

  [Required]
  chaîne publique Genre {get; ensemble; }

  public bool IsWatched {get; ensemble; }

  [StringLength(500, ErrorMessage ="Comments must be 500 characters or less")]
  chaîne publique Commentaires {get; ensemble; }
} 

Je vais ajouter le code pour le formulaire et nous pourrons ensuite le décomposer pour nous assurer que tout a du sens.

  
  
  

     Titre: 
    
  
  

     Date de sortie: 
    
  
  

     Note 
    
  
  

     Genre [19659038] Horror 
       Thriller 
       Comédie 
       Action 
       Romance 
    
  
  

     Regardé 
    
  
  

     Commentaires 
    
  
   Soumettre 


 @functions {
  Film film = nouveau film ();
  
  void HandleFormSubmit ()
  {
    Console.WriteLine ("Le formulaire est valide! Envoyez les données.");
  }
} 

Pour commencer, nous utilisons le composant EditForm pour définir le formulaire. Le paramètre Model est défini sur l'instance de film déclarée dans le bloc de fonctions et la méthode HandleFormSubmit est enregistrée pour OnValidSubmit .

Suivant est le DataAnnotationsValidator . Cela indique au formulaire que nous souhaitons utiliser des annotations de données pour valider nos champs. Ensuite, nous avons un composant ValidationSummary qui affiche toutes les erreurs de validation de notre formulaire.

Le reste du formulaire déclare les différents contrôles d'entrée pour les propriétés de notre objet film. Notez qu'ils utilisent la syntaxe bind-Value . Si vous ne l'avez pas vu auparavant, c'est une liaison à double sens. Il existe d'autres options de valeurs de liaison qui offrent un meilleur contrôle, mais elles sont hors du propos de cet article.

Si nous exécutons le code ci-dessus, il ressemblera à ceci:

Résumé

Dans cet article, nous avons eu un premier aperçu des nouveaux formulaires et de la fonctionnalité de validation de Razor Components. Nous avons fait un survol du fonctionnement des formulaires et de la validation, examiné ce qui était inclus dans la boîte de dialogue et présenté un exemple d'utilisation simple.

Pour en savoir plus sur la création d'applications avec Blazor

Vous souhaitez en savoir plus sur la création d'excellentes interfaces utilisateur avec Blazor? Vérifiez l'interface utilisateur Telerik pour Blazor . Il est actuellement en avant-première publique, alors essayez-le et laissez-nous savoir ce que vous pensez. Vous pouvez en apprendre davantage sur la dernière version (au moment de la rédaction de cette version, 0.3) ici .