Un moyen simple de charger l'arborescence de l'interface utilisateur de Telerik pour Blazor

La définition des propriétés requises de la TreeView pour vous assurer d'obtenir l'affichage souhaité nécessite des requêtes LINQ astucieuses. Voici comment charger une TreeView à partir d’une table d’une base de données en cinq (5) instructions.

Les vues en arborescence sont un concept d’interface utilisateur extrêmement puissant pour organiser des données hiérarchiques tout en laissant à l'utilisateur le contrôle sur hiérarchie qu'ils veulent exposés. Sa configuration, en revanche, peut être un cauchemar, surtout si vous extrayez des données à partir d'une source non hiérarchique telle qu'une base de données relationnelle. Vous finissez par avoir à écrire beaucoup de code pour vous assurer de récupérer vos données dans le bon ordre pour la hiérarchie, ou vous devez naviguer de façon répétée dans les nœuds de la vue arborescente pour ajouter les bons nœuds au bon endroit. [19659003] Le composant TreeView de l’UI Telerik pour Blazor simplifie toute cette configuration; vous passez simplement une collection d'objets que vous avez définis. Basé sur les données des objets, TreeView trie les relations et construit la hiérarchie à votre place. Cet article explique comment passer un ensemble d'objets d'entité récupérés via LINQ et Entity Framework.

Mises en garde sur les versions : Pour cette colonne, j'utilise l'interface utilisateur Telerik pour Blazor 1.4.1, Visual Studio 2019. Preview (version 16.3) et ASP.NET Core v3.0.0-preview7. J'ai dû installer le package NuGet pour Microsoft.CodeAnalysis (et mettre à jour certains packages associés) avant de pouvoir installer le package NuGet contenant l'interface utilisateur Telerik pour Blazor. J'ai également dû mettre à niveau la dernière version du fichier JavaScript prenant en charge ses composants:

Si tout fonctionnait bien

Dans TreeView chaque nœud représente un objet d'une collection liée à la Data propriété. Si cette collection est construite parfaitement, le code pour la lier est simple:

 @code {
  public IEnumerable  orgChart {get; ensemble; }
} 

Dans la réalité, les objets d'entité que vous récupérez dans votre base de données ne respectent probablement pas les conventions (en fait, il manque probablement plusieurs propriétés à l'entité TreeView TreeView ). Heureusement, il est très facile à la fois de contourner ces conventions et d’intégrer les propriétés supplémentaires requises par TreeView .

La perspective relationnelle

Pour cet article, supposons le problème hiérarchique suivant: a TreeView qui montre la relation hiérarchique dans les unités organisationnelles d'une entreprise (divisions et départements). Ici, les divisions appartiennent à la société et les départements appartiennent aux divisions.

Dans cette société fictive, il existe une base de données avec un tableau qui répertorie toutes ces unités organisationnelles. La relation entre ces unités organisationnelles est un exemple du problème classique de nomenclature de la théorie des bases de données relationnelles. Un tableau implémente la solution typique à ce problème: il a une relation clé étrangère / primaire avec lui-même qui permet à chaque département / division de se lier au département / division auquel il appartient.

Pour cette solution, chaque ligne comporte ces trois colonnes. (plus probablement probablement beaucoup d'autres):

• OrdId : clé primaire contenant l'identificateur de l'unité organisationnelle
• Nom : nom de l'unité organisationnelle
• Propriétaire : une clé étrangère qui pointe vers une autre ligne du tableau (le département ou la division auquel cette unité appartient)

Pour mon exemple, une ligne de ce tableau représente l'organisation. La ligne de la société étant facilement identifiable car la société n’ayant pas de département principal, sa clé étrangère est définie sur null (en fait, le TreeView requiert que vous ayez un objet sans parent utiliser comme le noeud le plus haut). Ce tableau contient également des lignes pour chacune des trois divisions de l'organisation: Est, Ouest et Central (leurs clés étrangères renvoient à la ligne de la société). La table contient également des lignes pour les départements de chaque division (la clé étrangère de chaque département renvoie à la ligne de la division à laquelle elle appartient).

Code permettant de récupérer ces données et de les charger dans la collection qui gère un TreeView . se compose de ces deux lignes de code:

 CompanyEntities db = new CompanyEntities ();
Liste  OrgUnits = db.OrganizationalUnits.ToList ();

Conception des classes

Pour conserver ces données, il existe une classe OrgUnit :

 public class OrgUnit.
{
  public int OrgId {get; ensemble; }
  chaîne publique Nom {get; ensemble; }
  public int? Propriétaire {get; ensemble; }
  // autres propriétés ...
} 

TreeView utilisera la relation clé étrangère / clé primaire entre les propriétés Propriétaire et OrgId pour imbriquer des objets enfants sous leurs parents. En fait, c’est cette capacité à résoudre les relations entre clé étrangère et clé primaire et à déterminer à quels enfants appartiennent les parents qui permet à TreeView de fonctionner avec n’importe quel ensemble de tables liées.

Mais, pour tout objet de travailler avec la TreeView je dois ajouter trois (3) propriétés supplémentaires à ma OrgUnit classe:

• HasChildren : un Boolean qui doit être défini true pour tout parent ayant des enfants dans la collection passée à la TreeView . Si vous ne définissez pas cette propriété sur true sur les nœuds parents, les utilisateurs ne pourront pas développer un nœud pour voir ses enfants.
• Expanded : un Boolean that vous pouvez utiliser pour contrôler quels nœuds affichent leurs enfants. Dans mes cas, je souhaite définir ceci sur true pour le nœud supérieur de la TreeView qui représente mon entreprise de sorte que le TreeView s'affiche initialement avec les trois ( 3) divisions montrant.
• Icon ou ImageURL : chaîne portant le nom d’une icône de police personnalisée ou l’URL d’une image à afficher avec le nœud. Vous pouvez éventuellement ajouter une propriété IconClass pour contenir un nom de classe CSS à utiliser avec l'image.

Vous n'êtes pas obligé d'utiliser ces noms comme noms de propriété - le TreeView . ] vous permet de donner à vos propriétés les noms que vous voulez et de configurer le composant pour les utiliser. En fait, j'en ai déjà profité avec mes trois propriétés initiales de OrgId Name et de Owner .

Par défaut, le TreeView recherche des propriétés appelées Id Text et ParentId plutôt que les noms que j'ai utilisés dans ma classe ( OrgId ] Nom et Propriétaire ). Pour configurer TreeView de manière à utiliser les noms de propriété définis par les colonnes de ma table, j'utilise les attributs IdField ParentIdField et TextField . l'élément pour lier TreeView aux propriétés de mon entité

Cela signifie que mon élément finit par ressembler à ceci pour lier les noms par défaut aux noms de propriété de ma classe d'entité:

Je pourrais faire la même chose pour les trois (3) propriétés «requises» qui ne sont pas représentées dans la base de données ( HasChildren Expanded et . ] Icône ). Cependant, il est plus simple d'utiliser les noms recherchés par TreeView .

Voici la version complète de ma classe d'entité, utilisant l'attribut [Notmapped] pour indiquer à Entity Framework de ne pas essayer de lier le propriétés requises pour ma table:

 public class OrgUnit
{
  public int Id {get; ensemble; }
  chaîne publique Nom {get; ensemble; }
  public int? Propriétaire {get; ensemble; }

  [NotMapped]
  public bool HasChildren {get; ensemble; }
  [NotMapped]
  chaîne publique Icon {get; ensemble; }
  [NotMapped]
  public bool Expanded {get; ensemble; }
} 

Définition des propriétés requises

Je ne suis pas tout à fait prêt à transmettre ma collection à la TreeView : je dois encore définir ces propriétés «requises» ( HasChildren Icon et Expanded ) de sorte que l'affichage TreeView convienne correctement.

Le réglage de la propriété TreeView convient parfaitement. Pour mon affichage initial, je souhaite uniquement que le nœud supérieur (le nœud de la société) soit étendu. Je peux le faire avec cette ligne de code qui recherche l'entité sans parent et définit sa propriété Expanded sur true:

 orgUnits.Where (o => o.Owner == null) .First (). Expanded = true ; 

La définition de la propriété HasChildren est un peu plus compliquée: je souhaite la définir sur true pour tout objet ayant un enfant. Autrement dit, tout objet dont la propriété OrgId figure dans la propriété Propriétaire d'un autre objet. C'est ce que fait cette déclaration (si vous en tenez compte, il s'agit de la quatrième déclaration):

 orgUnits.Where (p => orgUnits.Any (c => c.Owner == p.Id))
        .Lister()
        .Sélectionnez (p => {p.HasChildren = true; return p;}); 

Je pourrais simplement laisser le champ Icon vide, mais cela rend l'affichage ennuyeux. Alternativement, si je voulais mettre différentes icônes dans différentes instances OrgUnit je pourrais utiliser une variante de ma dernière déclaration pour définir de manière sélective la propriété Icon en fonction des propriétés de chaque . . Mais, pour cette démonstration, je vais simplement définir la propriété Icon sur le "dossier" de toutes les entités organisationnelles de ma cinquième et dernière déclaration:

 orgUnits.ToList ()
        .Sélectionnez (p => {p.Icon = "dossier"; renvoyer p;}); 

OK, j’ai menti: j’ai une déclaration de plus. Je dois définir la collection utilisée par TreeView sur la collection que j'ai soigneusement construite. Voici la dernière ligne:

 orgChart = orgUnits; 

Et voilà: très peu de problèmes ou muss et j'ai chargé une collection prête pour l'arborescence de ma base de données dans seulement cinq instructions LINQ. Difficile de faire mieux que cela (mais je parie qu'un commentaire s'affichera éventuellement en moins de lignes).

Pour en savoir plus sur les composants de l'interface utilisateur Telerik pour Blazor et sur ce qu'ils peuvent faire, consultez cette page . ] Page de démonstration de Blazor ou Téléchargez un essai pour commencer immédiatement à développer!