Fermer

avril 18, 2019

Pourquoi les modèles de grille Blazor vont vous faire tout remettre en question5 minutes de lecture

DotNetT Dark_870x220


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 .


    

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

complet pour chaque enregistrement. Cela peut être pratique si vous souhaitez utiliser des modèles pour la plupart des colonnes, car il nécessite moins de balises que la définition de modèles individuels pour de nombreuses colonnes.

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;
}

 grid-plain "data-displaymode =" Original "title =" grid-plain "/></p data-recalc-dims=

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é.


    

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.


    
        
            
        
        
    
 

 @functions ...

 modèle-image "data-displaymode =" Original "title =" modèle-image "/></p data-recalc-dims=

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.