L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Combinaison de composants, HTML et C # pour créer une interface utilisateur efficace
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 @ .
En réunissant tous ces éléments, je peux ajouter une colonne à ma grille contenant un élément Cliquez sur gestionnaire d'événements qui intègre le contexte de la ligne dans une propriété appelée currentCustomer :
Maintenant, je dois configurer la propriété currentCustomer pour que le client sélectionné soit pris en charge:
@functions
{
client privé currentCustomer {get; ensemble; }
// ...
}
Avant de quitter la grille des clients, je devrais cependant fournir quelques informations à l'utilisateur sur le client actuellement sélectionné. Un petit peu de code supplémentaire dans mon modèle me permettra de définir la propriété Icon sur l'élément de la ligne en cours du client correspond au client dans l'onglet propriété currentCustomer :
Affichage de plusieurs onglets Pour gérer l'affichage et la révélation des deux grilles indiquant les paiements et le traitement, je pouvais enfermer ces grilles dans un élément currentCustomer n'est pas null :
// .. achats et paiements
Comme j'ai deux séries de données à afficher, je vais imbriquer un élément
// ... grille d'achats
// ... grille de paiement
Dans chaque élément currentCustomer (achats ou paiements). Voici la grille intitulée "Achats" à l'intérieur de son onglet, à titre d'exemple:
Je serais le premier à admettre que c'est beaucoup de balisage. Cependant, ce n'est pas beaucoup de code (tout ce que je devais ajouter était la propriété currentCustomer ). Mais, en intégrant plusieurs composants, HTML et du code, je dispose d’une interface utilisateur efficace:
Bien sûr, cette page n’est guère utile sans donner à l’utilisateur la possibilité de mettre à jour cette information, donc je vais regarder cela dans mon prochain post. Restez à l'écoute!
Source link