blazor Archives - Le BBS - Blogue du Bracket Show

What's new in Blazor with .NET 6

.NET 6 has brought its share of new features for Blazor, some of which are experimental. In this article we will do a short review of the video on the subject and we will deepen some features that were not in the video. Good reading!

Deploy a Blazor app to Azure Static Web App with DevOps

In recent months, it has now been possible to deploy Blazor applications on Azure Static Web App, a much lighter environment than App Services. In this blog complementary to the video recently published on our channel, we look at how to make these deployments via DevOps.

Color Scheme Preference Detector

The Color Scheme Preference Detector is a Nuget library that I recently developed to make it easy to tell if a user prefers dark or light themes, which I saw could be used with Blazor. Here is a small article to explain its origin and operation.

Do SASS with Blazor

With the CSS isolation that is available since .NET5, applying styles to our Blazor components has never been easier. Did you know that it can easily be done by SASS, take advantage of the power of this preprocessor, and not have to worry about compiling to CSS ourselves? Here is the simple little trick to help you do it.

Testing a Blazored Modal with bUnit

I recently needed to add unit tests on a modal window that uses the library Blazored.Modal. As it is a component, I used the library bUnit for my tests. On the other hand, I encountered some problems when setting up the tests, so I thought I would share with you what I did to simplify my life.

Blazor and .NET 5 – Part 2

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!

Blazor et .NET 5 – Partie 1

Avec .NET 5 qui est à notre porte, plusieurs nouvelles fonctionnalités seront bientôt disponibles pour Blazor et tous les utilisateurs de l’écosystème .NET. Dans cet article, j’avais envie de faire un survol de quelques possibilités qui s’ouvrent à nous en ce qui concerne Blazor. D’autres suivront dans une deuxième partie à paraître très bientôt.

Blazor et Typescript – Les Tests

Dans mon dernier article, je vous expliquais comment faire du Typescript avec Blazor. Grâce à ceci, nous n’écrivons plus de JavaScript. Je parlais aussi d’un manque à cette solution, que je vais vous expliquer dans cet article. Maintenant que nous faisons du Blazor avec un peu de TypeScript, l’élément à ne pas oublier est le suivant: Les tests.

Blazor and Typescript

Blazor allows us one of the nicest things in the world; write much less JavaScript. What's even better is not to write any more at all! Thanks to Typescript, it is possible to completely eliminate the use of JavaScript from our Blazor projects. Read on to see how!

Blazor Day 18 juin 2020

Cela fait quelques temps que je n’ai pas eu l’opportunité d’écrire ici, la vie et les occupations étant ce qu’elles sont. Je n’ai pas eu la chance d’écrire sur tout pleins de belles annonces comme le lancement officiel de Blazor WebAssembly! J’ai donc cru bon vous informer d’une belle nouvelle concernant le Blazor Day qui aura le 18 juin prochain.