L’affichage d’une liste d’éléments de données est facile avec Blazor ListBox

Une ListBox riche en fonctionnalités réduira votre temps de développement tout en offrant une expérience utilisateur de niveau supérieur.

.NET Blazor est la nouvelle génération d’applications Web, vous permettant de créer de riches interfaces utilisateur côté client avec .NET et C#. La réutilisation du code, la séparation des problèmes et l’injection de dépendances permettent des applications hautement adaptables. Bien que .NET Blazor offre une excellente base pour des applications évolutives et certains composants de base de l’interface utilisateur, la création d’éléments d’interface utilisateur plus complexes est laissée à l’ingénieur.

Tirer parti des progrès Interface utilisateur Telerik pour Blazor pour augmenter votre productivité aujourd’hui et votre maintenabilité demain.

L’interface utilisateur Telerik pour Blazor Listbox

L’interface utilisateur pour Blazor fournit une collection de composants hautement perfectionnés et riches en fonctionnalités pour les applications Blazor. Ces composants fonctionnent à la fois avec Blazor côté serveur et WASM.

Le Boîte de liste Blazor est incroyablement polyvalent. Il peut être utilisé pour commander, réorganiser, sélectionner, désélectionner, transférer ou soumettre toute collection arbitraire d’éléments. Un cas d’utilisation courant peut être un sélecteur de champs ou un sélecteur de ressources.

Pour une liste complète de toutes les fonctionnalités fournies par ListBox, vous pouvez lire le Documentation ou explorez le démos. Ci-dessous, je couvrirai les principaux points forts et montrerai certains des cas d’utilisation intéressants d’une ListBox.

Sélection

La sélection est une fonctionnalité essentielle de ListBox. En définissant le SelectionMode Paramètre, vous pouvez facilement basculer entre le mode de sélection unique et le mode de sélection multiple. En mode de sélection multiple, la ListBox utilise la sémantique familière consistant à maintenir Ctrl (Cmd sur Mac) pour sélectionner plusieurs éléments ou Shift pour sélectionner une plage contiguë.

Vous pouvez également utiliser la liaison bidirectionnelle avec le SelectedItems paramètre, ou connectez-vous au Éléments sélectionnés modifiés événement.

Connecter des ListBox

Quoi de mieux qu’une ListBox ? Deux ListBox ! Le principal avantage et fonctionnalité principale de ListBox est la possibilité de transférer des éléments d’une ListBox vers une autre ListBox. Vous aurez besoin d’un primaire ListBox et un secondaire Zone de liste. Le primaire contient la barre d’outils et la collection initiale d’éléments, tandis que le secondaire reçoit les éléments transférés.

Vous pouvez même enchaîner des ListBox afin d’avoir deux, trois, quatre ListBox ou plus, toutes liées ensemble.

Vérifiez les détails de la configuration du transfert ListBox dans le documents de configuration.

Glisser-déposer

Si vous devez déplacer un plus petit nombre d’éléments et que vous acceptez de le faire un par un, le glisser déposer la fonctionnalité est très simplifiée. Pas de barre d’outils, pas de bouton, il suffit de cliquer et de faire glisser.

Une grande partie de la configuration est la même que celle du transfert classique, sauf que vous utilisez le et définissez le Draggable propriété à true. Consultez la documentation pour plus de détails.

Modèles

Le ListBox offre également la possibilité d’utiliser des modèles pour contrôler l’apparence visuelle des éléments et des ListBox vides.

Le Modèle d’article est utilisé pour contrôler l’apparence des éléments. Il expose un context variable qui peut être utilisée pour accéder aux propriétés de l’élément de données sans conversion. Ces propriétés peuvent être utilisées pour tout, des étiquettes aux images.

Le Aucun modèle de données est similaire dans son concept, mais utilisé pour une ListBox vide. Vous pouvez ajouter tout ce que vous voulez à un modèle sans données, comme un simple message ou peut-être un bouton pour ajouter des données !

Conclusion

Ne négligez pas l’humble ListBox. Il s’agit d’un composant relativement simple qui peut élever votre solution Blazor au niveau supérieur. Il s’agit d’un élément d’interface utilisateur propre et efficace qui offre une apparence moderne et donne confiance dans l’application, tout en étant intuitif et facile à utiliser. Essayez-le aujourd’hui !

Essayez l’interface utilisateur Telerik pour Blazor