Voici la deuxième partie de mon article couvrant les nouvelles fonctionnalités de .NET 5 pour Blazor, maintenant que .NET 5 est officiellement publié. Si vous n’avez pas eu la chance de lire la première partie, vous pouvez la consulter here. Comme dans l’article précédant, ceci se veut un survol des fonctionnalités, plusieurs articles et/ou vidéos suivront pour voir le tout plus en détails.
Component InputFile
Un composant InputFile
est maintenant disponible pour permettre de téléverser un fichier. Il peut aussi permettre multiples fichiers avec l’attribut multiple
. Grâce à l’événement onchange
, on peut ensuite facilement aller lire les fichiers téléversés grâce aux objets de System.IO
. Évidemment, certaines mesures sont à prendre à la lecture de fichiers pour ne pas impacter la performance de l’application.
InputRadio et InputRadioGroup
Avant .NET 5, la gestion des boutons radio avec Blazor devait être faite manuellement. Maintenant, deux composantes sont disponibles pour faciliter la tâche. InputRadioGroup
nous permet de définir un groupe de boutons radio. Sur ce groupe, on peut utiliser l’attribut bind-Value
pour associer la sélection à l’intérieur du groupe à une valeur de modèle. Au niveau du InputRadio
, il suffit de spécifier une valeur dans l’attribut Value
. Cette valeur sera celle utilisée sur notre modèle, lorsque le bouton sera sélectionné.
Événement ontoggle
La balise details
permet d’avoir un contenu qu’on peut ouvrir et fermer. En autant qu’on spécifie une balise summary
à l’intérieur, tout autre contenu sera affiché ou caché. Malheureusement, l’événement ontoggle
n’était pas supporté nativement par Blazor avant .NET 5. Maintenant, il est possible d’ajouter une méthode à cet événement pour faire cette gestion d’affichage de contenu.
FocusAsync
J’ai la chance de travailler sur un projet Blazor depuis quelques mois. À un moment, j’ai eu besoin de forcer le focus sur un élément suite à une action, chose que j’ai réalisé n’était pas possible avec Blazor. Il a donc fallu se tourner vers une classe TypeScript qui permettait d’envoyer un sélecteur CSS sur lequel il fallait faire le focus. Avec .NET 5, on peut maintenant le faire nativement. Il faut tout d’abord ajouter une référence sur l’élément sur lequl on veut faire le focus. Par la suite, via le code, nous pouvons appeler la méthode FocusAsync
sur cet élément. Pas de JavaScript, ni de TypeScript, grâce à ce petit ajout que je trouve génial!
Attributs de classe de validation personnalités
En utilisant des frameworks CSS comme Bootstrap, il peut être utile de spécifier des classes sur des éléments lorsqu’ils sont valide ou invalide. En créant une classe dérivée de FieldCssClassProvider
, il est possible de surcharger la méthode GetFieldCssClass
pour y ajouter cette définition. Une fois la classe créée, il suffit de l’ajouter sur le EditContext
de notre modèle avec la méthode SetFieldCssClassProvider
pour que ce soit pris en charge.
Support pour IAsyncDisposable
Il est parfois nécessaire de relâcher des ressources en ne voulant pas bloquer la thread du UI. Avant .NET 5, l’interface IAsyncDisposable
n’était pas disponible pour les composants Blazor. Grâce à .NET 5, on peut maintenant implémenter cet interface au niveau de nos composantes pour relâcher des ressources sans bloquer l’affichage de notre application.
Conclusion
Malgré toutes les fonctionnalités expliquées dans cet article et le précédant, il reste encore certains points que je n’ai pas détaillé. Par exemple, les routes de type catch-all, le Protected Browser Storage pour Blazor Server ou encore le prerendering pour Blazor WebAssembly. Comme ce sont des sujets qui ne se résumeraient pas nécessairement en quelques lignes, je préfère les garder pour des prochains articles. Pour connaître la liste de tous les changements de Blazor avec .NET 5, vous pouvez consulter cette page de documentation. Et évidemment, suivez-nous sur notre chaîne Youtube, notre page Facebook et ce blog pour de futurs vidéos et blogues sur toutes ces fonctionnalités!