3 raisons de vérifier le nouveau contrôle DropDownTree

Dans cet article, Ed Charbeneau vous présente l'un des contrôles les plus récents (et les plus demandés) que nous avons introduits pour les développeurs ASP.NET MVC et ASP.NET Core: DropDownTree!

Avec la version R2 2018 est venu le plus haut élément de commentaires voté à notre liste de composants de l'interface utilisateur, le DropDownTree pour ASP.NET MVC et le DropDownTree pour ASP.NET Core . DropDownTree est un composant TreeList incorporé dans un ComboBox. Ce bit d'interface utilisateur facilite la sélection des valeurs hiérarchiques dans un encombrement réduit. Inclus dans la mise à jour est l'option pour ASP.NET Core Tag Helpers, une syntaxe de type HTML pour déclarer les éléments de l'interface utilisateur. En outre, DropDownTree propose des améliorations faciles à utiliser, un chargement à la demande et un filtrage côté client. Dans cet article, nous verrons comment utiliser DropDownTree dans plusieurs scénarios et quelles fonctions correspondent le mieux à votre application.

Helper Tag ou HTML Helper: le choix est le vôtre

Depuis la version R2 2018, Telerik UI pour ASP.NET Core supporte les Helpers Tag pour chaque composant UI disponible incluant le nouveau DropDownTree. Les aides à la tâche fonctionnent de la même manière que les aides HTML Razor avec quelques avantages supplémentaires. Bien que les aides à la tâche et les aides HTML génèrent le même résultat, il existe des différences importantes dans la façon dont les deux sont exprimés. Tag Helpers utilise HTML comme "tags" et "attributs" qui fournissent une syntaxe qui nécessite moins de changement de contexte (de HTML à C #).

L'exemple suivant utilise une aide HTML pour initialiser un composant DropDownTree. Les propriétés sont chaînées à partir de la méthode DropDownTree () et définissent la source de données, décrivent le modèle et activent les fonctionnalités.

 
 @ (Html.Kendo (). DropDownTree ()
              .Name ("dropdowntree")
              .DataTextField ("Nom")
              .HtmlAttributes (nouveau {style = "width: 300px"})
              .DataSource (dataSource => dataSource
                .Model (model => modèle
                  .Id ("EmployeeID")
                  .HasChildren ("HasChildren")
                )
                .Lire (lire => lire
                  // La méthode d'action qui va retourner JSON
                  .Action ("Employees_Read", "Accueil")
                )
            )
) 

L'expression du même composant à l'aide d'un marqueur d'étiquette produit une syntaxe qui ressemble étroitement à HTML. Au lieu d'utiliser des méthodes pour définir des propriétés, Tag Helper utilise des attributs.

Les développeurs bénéficient d'un excellent support IntelliSense avec les HTML Helpers et Tag Helpers. Cependant, lorsque vous utilisez Tag Helpers, les développeurs bénéficient également d'IntelliSense pour le HTML et le CSS standard. Cela a souvent été perdu avec les assistants HTML car HTML et CSS standard devaient être définis avec des types anonymes C #.

Chargement à la demande

Lorsque l'on travaille avec de grands ensembles de données hiérarchiques, la performance est souvent un problème. L'extraction de grands ensembles de données hiérarchiques à partir du serveur peut constituer un goulot d'étranglement potentiel des performances en termes de trafic de base de données et de réseau. Le DropDownTree a intégré la fonctionnalité pour compenser ce scénario. En activant le chargement à la demande DropDownTree charge uniquement les données des nœuds visibles dans la vue DropDownTree

Dans l'exemple suivant, nous verrons comment se comporte le DropDownTree avec et sans chargement à la demande. 19659002] Du côté serveur, nous allons utiliser une action du contrôleur Employees_Read pour renvoyer une liste des employés en tant que données JSON. Si le paramètre employeeId est transmis à la méthode, il renvoie une liste d'employés qui sont des enregistrements enfants de l'ID employé correspondant . Si aucun employeeId n'est fourni, le nœud racine est renvoyé.

 public JsonResult Employees_Read (int? EmployeeId)
{
  // Récupère les employés qui rapportent à employeeId (null pour les nœuds racine)
  var employees = db.Employees.Where (employé => employeeId.HasValue? employee.ReportsTo == employeeId: employee.ReportsTo == null);

  // Projeter les résultats
  var result = employees.Select (employee => new
  {
    EmployeeID = employee.EmployeeId,
    Nom = employee.FullName,
    HasChildren = employee.Employees.Any ()
  }).Lister();

  return Json (résultat);
} 

Sur le côté client de l'application, nous allons configurer un DropDownTree avec le chargement à la demande désactivé, c'est le comportement par défaut pour DropDownTree.

Lors de l'appel initial, employeeId sera nul, ainsi Employees_Read obtiendra le nœud racine de l'arbre. Comme chaque nœud Tree est lié à la source de données, un appel supplémentaire est effectué sur Employees_Read pour chaque enregistrement qui a des nœuds enfants. Même si les noeuds DropDownTree n'ont pas été développés, les données sont récupérées

Nous pouvons voir les appels se faire dans la console du navigateur.

En ajoutant le ] load-on-demand propriété à DropDownTree et en définissant la valeur à true nous pouvons modifier le comportement afin qu'il ne récupère des données que si nécessaire.

Comme précédemment, l'appel initial à employeeId sera nul pour aller chercher le nœud racine de l'arbre. Cependant, DropDownTree ne récupérera pas de nœuds enfants tant que l'utilisateur n'aura pas développé un nœud d'arbre.

L'inspection du trafic réseau dans la console du navigateur montre que chaque nœud est chargé uniquement lorsque l'utilisateur a besoin des données

Les améliorations de performances lors de l'utilisation de "load on demand" dépendront du nombre de nœuds dans l'ensemble de données et de sa taille. Cette approche permet d'éviter les appels de bases de données inutiles et les requêtes réseau

Filtrage côté client

Permettre aux utilisateurs de trouver rapidement des données dans une liste est un modèle d'interface utilisateur courant dans les [[comb]] . Permettre aux utilisateurs de rechercher dans un ensemble de données donné fournit un moyen rapide et efficace de sélectionner l'élément souhaité. Avec DropDownTree, le filtrage côté client peut être activé avec plusieurs modèles de recherche: Contient StartsWith ou EndsWith . La sélection de l'une de ces trois options de recherche invite l'utilisateur à entrer un filtre capable de parcourir l'ensemble de l'arborescence et d'afficher uniquement les éléments correspondant à la requête.

Pour activer le filtrage côté client, la propriété filter est définie sur FilterTypes .

Lorsqu'un utilisateur filtre un objet DropDownTree, les éléments correspondants sont affichés tandis que les éléments parents restent visibles dans la vue. En conservant les éléments parents visibles, les éléments filtrés restent dans leur contexte. La simplicité de la recherche et les détails des sous-titres comme le maintien de la relation parent-enfant sont ce qui fait une expérience utilisateur élégante.

Mais attendez, il y a plus!

Alors que Tag Helpers, Load On Demand et Les principales raisons de vérifier le nouveau DropDownTree, il y a encore beaucoup plus de fonctionnalités qui valent le détour. Comme de nombreux composants dans l'interface utilisateur pour ASP.NET Core, DropDownTree offre une navigation au clavier pour une accessibilité immédiate, un support de localisation, des modèles personnalisés, des thèmes et bien plus encore.

Si vous n'utilisez pas actuellement ] Telerik UI pour ASP.NET Core dans vos applications .NET, puis lancez un essai gratuit de 30 jours et voyez ce qu'ils ont à offrir.

Commencez votre essai