Fonctionnalités avancées

1. Interopérabilité avec JavaScript

Même si Blazor permet d’écrire du code C# à la place de JavaScript pour les interactions les plus communes, il n’en reste pas moins qu’il existe une panoplie de composants et de projets JavaScript créés par la communauté pour répondre à un vaste ensemble de besoins. Blazor permet de travailler avec ces derniers, et ce de manière bidirectionnelle (c’est-à-dire qu’il est possible d’intégrer un composant JavaScript et de lui envoyer des données, mais aussi d’exécuter du code C# depuis JavaScript). Nous allons voir ces deux modes.

[Inject] 
public IJSRuntime JSRuntime{ get; set; } 

1. Création d’un loader

Par exemple, si nous souhaitons réaliser un composant chargé d’afficher un texte, une image ou une animation pour faire patienter l’utilisateur (on appelle cela un loader) pendant le chargement de données, nous pouvons procéder de la sorte :

En utilisant ce que nous savons et en récupérant le code CSS et HTML sur un site dédié aux loaders (par exemple https://loading.io/css), nous pouvons créer notre propre composant Loader réutilisable. Pour que ce composant soit directement utilisable dans la totalité de l’application, nous pouvons le placer dans le dossier Shared de notre projet. Ainsi, lorsque nous avons besoin d’un chargement, il nous suffit d’utiliser ce composant :

@if (Loading) 
{ 
    <Loader></Loader> 
} 
else 
{ 
... 
} 

Rendu final du loader

Cependant, ce loader tourne indéfiniment. Il serait intéressant de personnaliser le composant afin qu’il reflète l’état d’avancement de l’attente.

2. Ajout d’un message d’attente personnalisé

Nous pourrions améliorer le loader en ajoutant par exemple un paramètre qui indique le timeout (temps d’attente) ainsi que le message à afficher sous l’animation en cas de dépassement du timeout, lorsque le chargement est anormalement long. Cela est bien sûr possible en utilisant [Parameter] pour les deux données (l’une de type...

1. Création d’un back-end

La première étape est de créer un back-end. Le cas d’usage ici est le stockage des données météorologiques. En ce sens, nous créons créer une nouvelle application de type API web en .NET Core à l’aide de la commande suivante :

dotnet new webapi --no-https 

Ce template d’API contient déjà les endpoints pour la partie météo. Cependant, l’avantage de Blazor est que l’on peut partager le modèle entre le back-end et le front-end. La meilleure solution est d’unifier le modèle dans une librairie de classes partagée entre les deux applications.

Si l’on développe avec la plateforme .NET Core 3.1, il faut créer une librairie en .NET Standard 2.1. Si l’on travaille avec la version .NET 5, la librairie peut être créée en .NET 5. Dans les deux cas, un projet de type librairie se crée à l’aide de la commande suivante :

dotnet new classlib 

Si l’on utilise Visual Studio sous Windows ou sous Mac, il est possible de regrouper la gestion de ces trois projets (API, Blazor, librairie) dans un seul fichier : une solution. Cette dernière se crée à l’aide de la commande :

dotnet new sln 

Une fois la solution créée, il suffit d’ajouter les projets créés précédemment en utilisant la fonctionnalité Ajouter un projet existant de l’IDE.

Notre projet Blazor Server définit...

1. Empêcher la validation d’un formulaire

Pour le moment, notre formulaire possède des éléments de validation qui affichent un message d’erreur (sous les champs ou sous forme de résumé) et cela empêche le formulaire d’être envoyé. Néanmoins, le bouton de validation du formulaire reste actif et cela pourrait nuire à l’expérience utilisateur globale. Il serait appréciable d’avoir un moyen de désactiver le bouton tant que tous les champs ne sont pas corrigés.

Une des possibilités serait de gérer soi-même les changements de chaque champ et de modifier un booléen permettant de gérer l’état du bouton à l’aide de l’attribut HTML disabled. Cette approche, bien que fonctionnelle, s’avère peu pratique, car elle nécessite une grande duplication de code au travers de tous les formulaires de notre application. Une meilleure approche serait de développer un composant chargé de valider les champs de nos formulaires, qui soit réutilisable dans toute l’application.

Pour que ce composant puisse fonctionner, il faut lui donner le contexte de validation du formulaire afin qu’il puisse le traiter et produire une valeur qu’on pourra utiliser pour activer ou désactiver notre bouton d’envoi de formulaire. Cette notion s’appelle la cascade de paramètres.