Fermer

juillet 3, 2019

Combinaison de composants, HTML et C # pour créer une interface utilisateur efficace

blazort_870x220


Créer une interface utilisateur efficace ne nécessite pas beaucoup de code – il suffit d’intégrer et de personnaliser le bon ensemble de composants Telerik. En fait, le seul code requis est une propriété unique.

La création de pages Web utiles implique l'intégration de plusieurs composants et technologies. Voici comment intégrer l'interface utilisateur Telerik pour Blazor pour créer une page maître / détail avec plusieurs onglets et un affichage animé qui affiche uniquement les détails à la demande (et avec une seule nouvelle ligne de code). Dans un précédent article, je parcourais le processus de combinant ASP.NET Core Views (ou Razor Pages) avec un composant Blazor contenant un TelerikGrid . Dans ce scénario, en utilisant C # sur le serveur, j'ai récupéré un ensemble d'objets Customer que j'ai ensuite transmis, via la propriété Model d'un View à un Composant Blazor affichant une liste de clients dans un TelerikGrid .

Ce processus permet de restituer la page (y compris le composant Blazor) au format HTML sur le serveur avant de l'envoyer au navigateur. Le résultat net est que l'utilisateur obtient une page complète sans avoir à attendre un appel AJAX pour récupérer les données de la page après l'affichage de la page.

Dans mon cas, cependant, chaque client que je montre dans la grille est propriétaire. deux collections: une série de paiements et une autre série d’achats. Lorsque l'utilisateur clique sur un client de la grille, je souhaite afficher les deux listes de paiements et d'achats dans des onglets situés sous la grille des clients. Je souhaite également mettre en évidence le client sélectionné afin que celui-ci reçoive des informations sur le client auquel appartiennent les paiements et les achats affichés.

Mais, une fois la page affichée dans le navigateur, je ne souhaite plus revenir au menu principal. serveur sauf si je dois le faire (sauf les appels AJAX et SignalR, bien sûr). Une combinaison de HTML, de composants Telerik et d'un peu de code fournit tout cela. Je peux même ajouter une animation à mon interface utilisateur.

Dimensionnement de la grille avec les attributs HTML et de composant

Par défaut, le TelerikGrid occupe l'intégralité de la page, chaque colonne de la grille divisant l'espace de manière égale. . Je peux personnaliser ce comportement en entourant la grille d'un élément

et en définissant la largeur de cet élément

sur 75% de la page. La grille se redimensionne automatiquement pour remplir tout l'élément

au lieu de la page entière.

Dans la grille, je peux utiliser la même stratégie avec les colonnes de la grille pour contrôler leur taille (en utilisant des pourcentages plutôt que des largeurs fixes). , permet à la grille d’ajuster sa taille en fonction de la largeur du navigateur). Le résultat ressemble à ceci:

Ajout d’un bouton permettant d’afficher les détails du déclencheur

Afin d’afficher les informations relatives aux achats et aux paiements d’un client spécifique, je dois donner à l’utilisateur la possibilité de sélectionner une ligne dans la grille. Dans une colonne précédente j'ai profité des événements natifs de la grille pour implémenter un bouton «sélectionner une ligne». Cependant, cela impliquait d’appeler puis de supprimer la fonctionnalité d’édition de la grille. Bien sûr, il n’ya rien de mal à cela, mais il est plus logique pour moi d’utiliser un bouton Telerik qui ne me supprime aucun comportement.

Normalement, chaque colonne de la grille génère son propre code HTML. Cependant, en insérant un élément