Comprendre les composants modèles

  • 4 minutes

Les composants modèles que vous pouvez réutiliser dans plusieurs applications fournissent une disposition et une logique de base éprouvées et testées pour la personnalisation des éléments d’interface utilisateur. Les composants modèles appliquent une conception standardisée dans une application web en définissant des éléments communs et en les appliquant à toutes les pages. Les modèles peuvent simplifier les mises à jour, comme le changement de marque, car vous apportez des modifications seulement à l’emplacement central du modèle.

Dans cette unité, vous découvrez comment créer des composants modèles et comment les incorporer dans une application Blazor.

Le type RenderFragment

Un composant de modèle fournit la disposition et la logique d’un ou plusieurs fragments de balisage HTML. Le HTML est rendu en utilisant le contexte fourni par le composant modèle. Le composant modèle utilise un objet RenderFragment comme espace réservé dans lequel le balisage est inséré à l’exécution.

Un modèle correspond simplement à un composant Razor ordinaire. Pour utiliser un modèle, un composant consommateur le référence comme n’importe quel autre composant. ChildContent est le nom par défaut d’un paramètre RenderFragment. Vous pouvez lui donner un autre nom, mais vous devez spécifier ce nom lorsque la page de test applique le modèle.

Paramètres RenderFragment<T> génériques

Par défaut, la classe RenderFragment joue le rôle d’espace réservé pour un bloc de balisage HTML. Cependant, vous pouvez utiliser le type générique RenderFragment<TValue> pour rendre d’autres types de contenu en utilisant un paramètre de type et en fournissant la logique pour gérer le type spécifié dans le composant modèle.

Supposons, par exemple, que vous souhaitiez créer un modèle qui affiche les éléments d’une collection. Vous pouvez utiliser une boucle C# foreach pour itérer au sein de la collection et afficher les éléments trouvés. Cependant, la collection peut contenir des données de n’importe quel type : vous avez donc besoin d’un moyen générique de rendre chaque élément.

Pour écrire un composant modèle de type générique, vous devez spécifier le paramètre de type dans le composant modèle lui-même et dans le composant consommateur du modèle. La liste suivante représente les caractéristiques courantes des composants de modèle de type générique.

  • Le paramètre de type dans un composant de modèle est introduit à l’aide de la directive @typeparam. Un composant de modèle peut si nécessaire posséder plusieurs paramètres de type.
  • Le modèle va probablement définir un paramètre contenant une collection énumérable d’objets du type spécifié par le paramètre de type.
  • Le modèle définit également un paramètre ChildContent basé sur le type RenderFragment générique qui accepte le même paramètre de type.

Pour plus d’informations, consultez Composants basés sur un modèle Blazor ASP.NET Core.

Vérifiez vos connaissances

1.

Quel type d’objet de paramètre devez-vous configurer sur un composant Blazor pour partager un fragment de code HTML ?

2.

Quel est le nom par défaut du paramètre qui capture tout le balisage à l’intérieur d’un composant sans qu’il soit nécessaire de créer une autre balise ?