L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Pourquoi les modèles de grille Blazor vont vous faire tout remettre en question
Avec les composants natifs, les modèles Grid de l’interface utilisateur Telerik UI pour Blazor peuvent exploiter pleinement les meilleures fonctionnalités de Blazor afin de personnaliser au maximum l'expérience utilisateur.
L'utilisation d'un modèle dans une application implique de créer une expérience personnalisée pour votre utilisateur en exploitant un composant ou une structure avec laquelle vous travaillez. Parce que les composants Telerik UI pour Blazor sont natifs, construits à partir de rien en utilisant le cadre Blazor, il peut exploiter directement les meilleures fonctionnalités de Blazor. Les modèles de composants de grille peuvent utiliser pleinement le code HTML, Razor et les composants pour personnaliser complètement l'expérience utilisateur.
Cet article présente un aperçu des modèles disponibles et des cas d'utilisation simples. Nous les utiliserons comme des blocs de construction pour voir à quel point une grille Blazor peut être dynamique lorsque vous utilisez des modèles pour des idées avancées telles que des éditeurs personnalisés et des vues maître-détail.
Types de modèles
Il existe actuellement trois types de modèles disponibles. la grille Blazor: modèle de colonne, modèle d'éditeur et modèle de ligne. Chacune a des utilisations très spécifiques et constitue un outil puissant pour adapter la grille à vos besoins spécifiques. Commençons par une brève introduction à chaque type de modèle.
Modèle de colonne
Par défaut, la grille rend la valeur du champ de la colonne exactement telle qu'elle est fournie à partir de la source de données. Nous pouvons remplacer ce comportement en utilisant une colonne Template qui nous permet de prendre le contrôle du rendu de l'objet dans la colonne. Le modèle fournit l'intégralité de l'objet actuellement lié à la ligne dans laquelle la colonne existe. Cet objet correspond au contexte du modèle . Grâce au modèle, vous pouvez appliquer une mise en forme personnalisée, insérer du code HTML et des images supplémentaires et afficher les composants Razor à l'aide de toute valeur du contexte du contexte .
Le nom de l'employé est: @ ((contexte comme SampleData) .Name)
La colonne Modèle est visible lorsque la ligne en cours n'est pas en mode édition. Pour personnaliser l'expérience d'édition de la grille, nous allons utiliser le EditorTemplate .
Modèle de l'éditeur
Le EditorTemplate est un modèle lié au contexte d'édition. Le EditorTemplate définit le modèle ou le composant en ligne qui sera rendu lors de la modification du champ par l'utilisateur. Bien que le EditorTemplate fonctionne de la même manière que la colonne Template, il n’est affiché que lorsque la ligne donnée est en mode édition.
@ {
var employeeToUpdate = context as Employee;
Les modèles de colonne et d'éditeur offrent un excellent contrôle sur le rendu des colonnes dans la grille. Pour encore plus de contrôle, nous pouvons utiliser un modèle de ligne et personnaliser complètement la grille.
Modèle de ligne
Contrairement aux modèles mentionnés précédemment, le RowTemplate couvre toute la grille pour toutes les colonnes. Le modèle de ligne vous permet de définir un rendu personnalisé pour l'élément
Comme le modèle n'est pas lié à une colonne spécifique, il peut utiliser la Attribut Context de RowTemplate pour définir le nom de la variable de contexte. Son type correspond au type de modèle auquel la grille est liée.
@ employee.Id
Engagé le: @ (String.Format ("{0: jj MMM aaaa}", employee.HireDate))
En utilisant les trois types de gabarits, nous pouvons répondre à une grande variété d'exigences. Examinons à quel point l'interface utilisateur de Telerik pour Blazor Grid peut être flexible et pourrait vous surprendre.
Modèle d'image
Nous commencerons par un scénario simple mais courant: image dans une colonne de la grille. Supposons que nous ayons une liste d'utilisateurs pour lesquels nous devons gérer un large éventail de détails. Il serait bon d’associer un visage à un nom, et nous pouvons faire cela avec un modèle de colonne. En utilisant un modèle de colonne, nous pouvons utiliser une ou plusieurs valeurs des propriétés de l'élément actuellement lié pour générer un élément d'image et afficher une image directement dans la colonne. Dans cet exemple, nous supposerons que les images de nos produits sont stockées sur le serveur avec un chemin relatif de / images / et que le nom de chaque fichier d'image correspond à productId .
Commençons sans modèle pour voir comment la grille est structurée sans personnalisation.
@functions {
public IEnumerable GridData {get; ensemble; }
remplacement protégé void OnInit () => GridData = ... // fetch data;
}
Nous avons ici une grille de base à deux colonnes avec juste un affichage textuel de chaque nom de produit et de prix unitaire. Utilisation d'un modèle nous pouvons transformer la colonne Nom du produit pour afficher une image à côté du nom du produit.
Pour accéder au modèle, la colonne Nom du produit doit comporter un composant TelerikGridColumn avec des balises de début / fin correspondantes. nous ajouterons un composant Template qui définira notre rendu personnalisé.A l'intérieur du modèle, nous avons accès à l'objet context, il s'agit du produit actuel. contexte comme Produit nous donnera accès au type approprié.
@ {
var produit = contexte en tant que produit;
}
Maintenant que nous avons notre produit actuel, nous pouvons le rendre comme il convient dans la colonne. Ajoutons une balise HTML <img et créons un chemin à partir de la propriété ProductId . Nous pouvons appliquer le CSS à l'image à l'aide du balisage HTML standard class = "rounded-circle" . De plus, puisqu'il s'agit de Razor, les littéraux de chaîne C # constituent un moyen valide de formater le chemin src = "http://www.telerik.com/@($" /images/{product.ProductIdBuch.jpg ") ". Nous allons également afficher la propriété Nom du produit à côté de l'image à l'aide d'un balisage simple.
@ {
var produit = contexte en tant que produit;
@ product.ProductName
}
@functions ...
Le framework Razor Components sous-jacent prenant en charge les modèles et l'interface utilisateur de Telerik pour Blazor Grid est construite à l'aide de l'architecture native du framework, grid est une solution complète pour de nombreux problèmes.
Custom Form
Les modèles permettent d'exploiter pleinement les fonctionnalités de Blazor. À l'intérieur du modèle, il est possible d'ajouter des composants, de la logique et même de déclencher des événements. Vous pouvez accéder aux événements et aux valeurs en dehors du modèle, ce qui ouvre de nouvelles possibilités pour créer une expérience personnalisée.
Supposons que nous voulions créer une expérience d'édition personnalisée par opposition à l'utilisation de l'un des éditeurs de grille intégrés . Cela nous permettra de contrôler entièrement tous les aspects du formulaire. Le défi consiste à faire en sorte que le formulaire interagisse avec la grille. Pour créer un éditeur personnalisé, nous devons sélectionner un objet, placez-le s propriétés sur un formulaire, puis enregistrez / annulez les modifications. En apparence, cela peut sembler une tâche complexe, mais le cadre dispose d'une mécanique de liaison de données extrêmement flexible.
L'identification de l'objet actuellement sélectionné fournirait l'essentiel de ce dont nous avons besoin pour accomplir cette tâche, car nous pouvons lier. ses propriétés directement pour former des éléments. Le modèle de la grille nous donne accès aux éléments liés à une ligne de la grille. Tout ce dont nous avons besoin est une méthode de sélection de la valeur et de création d'une référence à l'objet. Commençons par créer un espace réservé pour notre référence d'objet à l'aide d'un champ nommé selectedProduct . Pour créer un moyen facile de sélectionner un produit, un modèle de colonne avec un bouton suffit. Lorsque le bouton est cliqué, nous invoquons une fonction en ligne pour définir selectedProduct sur le contexte actuel.
@if (selectedProduct! = Null) {
...forme
}
L'enregistrement et l'annulation de l'édition sont également des tâches simples maintenant. Nous avons juste besoin de créer des boutons avec les événements correspondants OnClick . Pour annuler le montage, la référence selectedProduct est simplement réinitialisée sur null .
@if (selectedProduct! = Null)
{
Enregistrer
Grâce à la possibilité de partager l'état avec d'autres composants de la page, les possibilités d'expériences basées sur des modèles sont illimitées.
Vue Master-Detail
En utilisant des modèles, nous pouvons complètement transformer une ligne de la grille avec des composants HTML, Razor et même personnalisés. Dans cet exemple, nous allons voir à quel point nous pouvons obtenir des modèles avec l'ajout d'un Master-Detail.
Un scénario probable pour toute application est celui où un point de données a de nombreuses propriétés d'importance variable, certaines d'entre elles devant toujours être placées au premier plan, d'autres pouvant être utiles à la portée de la main. Cette vue permet de garder les données étendues hors de vue jusqu'à ce qu'elles soient demandées par l'utilisateur, tout en conservant les données critiques à l'avant en permanence.
Utilisation de la RowTemplate on peut définir deux diff Il existe de nombreux états pour notre rangée qui peuvent facilement être basculés par un simple clic de bouton. Nous allons commencer par l'état par défaut qui n'affiche que deux colonnes de données. Cette vue est bien dissimulée dans un composant personnalisé appelé ProductMasterTemplate et nécessite qu'un paramètre de Produit soit affiché dans un format à deux colonnes.
En outre, nous utiliserons une vue plus complexe pour révéler toutes les données d'un produit donné dans une vue en liste. Une fois encore, nous encapsulons la vue dans un composant personnalisé appelé ProductDetailTemplate .
Dans chacun de ces composants personnalisés, se trouvent des cellules de données de tableau
contenant le code Razor permettant d'afficher les propriétés d'un produit donné . Le contenu du modèle de ligne doit être constitué d'éléments et leur nombre (ou nombre total de colonnes) doit correspondre au nombre de colonnes défini dans la grille. En interne, les deux modèles contiennent un balisage similaire à l'exemple suivant. @ Product.property
... une certaine logique d'affichage.
Les deux états étant clairement définis en tant que composants, nous pouvons nous concentrer sur la commutation entre les deux. Commençons par définir quel élément est sélectionné en créant une variable permettant de contenir une référence au produit sélectionné. En tant que tel, nous l'appellerons SelectedProduct . Pour permettre à l'utilisateur de basculer entre les vues, nous avons besoin d'un ensemble de boutons à afficher pour l'utilisateur. Pour afficher les détails, nous allons simplement vérifier le SelectedProduct pour voir s'il correspond à l'élément actuel de la ligne. Puisque nous utilisons Blazor, nous pouvons facilement définir l'état de SelectedProduct directement dans le gestionnaire d'événements avec une fonction en ligne, OnClick = "@ (_ => SelectedProduct = ...) ".
@if (SelectedProduct! = product)
{
Le code complet ci-dessous est en réalité assez simple en raison de la combinaison de l'architecture des modèles et des composants.
@if (SelectedProduct! = product)
{
@functions {
Produit sélectionnéProduit;
}
Un clic sur le bouton Details nous donne une interface utilisateur fluide nous permettant d'explorer les données de la grille.
![MasterDetail "data-displaymode =" Original "title =" MasterDetail "/> [19659077] Conclusion</h2 data-recalc-dims=](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2019/04/1555591973_824_pourquoi-les-modeles-de-grille-blazor-vont-vous-faire-tout-remettre-en-question.gif?w=660&ssl=1)
Les composants de l'interface utilisateur de Telerik pour Blazor étant natifs, ils ont été conçus à partir du framework Blazor et permettent donc d'exploiter directement les meilleures fonctionnalités de Blazor. Les modèles de composant de grille peuvent pleinement utiliser les codes HTML, Razor et personnalisation complète de l'expérience utilisateur. Des modèles simples sont utiles pour formater ou afficher des images, tandis que des modèles plus étendus peuvent transformer l'interface utilisateur en ajoutant de toutes nouvelles fonctionnalités à la grille.
Dans cet article, nous nous sommes concentrés sur la grille, mais d'autres composants tels que le DropDownList contient déjà des champs de modèle.Assurez-vous de télécharger la dernière version et essayer les modèles vous-même à l'aide de notre référentiel de démonstration sur GitHub .
Essayez l’interface utilisateur de Telerik pour Blazor
Les commentaires sont désactivés en mode Aperçu.
Source link