Première application

1. Installation du SDK

Seul le SDK est réellement nécessaire pour travailler avec Blazor, car c’est lui qui contient les différents exécutables et outils permettant de compiler et d’exécuter une application Blazor. Microsoft propose un installeur facile à suivre pour n’importe quel développeur.

Pour récupérer la version liée au système d’exploitation utilisé, il suffit de se rendre sur : https://dotnet.microsoft.com/download

Sur cette page, plusieurs choix sont proposés. À la date de rédaction de cet ouvrage, sont listées les versions .NET Framework (colonne de droite), .NET Core 3.1 (colonne centrale) et .NET 5 (colonne de gauche). Il est possible que la présentation ait évolué au moment où vous lirez ces lignes. La version minimale nécessaire pour faire fonctionner Blazor est la version .NET Core 3.1, qui est actuellement la version LTS (Long Term Support, c’est-à-dire que Microsoft va offrir un support de sécurité et de correction de bogues jusqu’à la prochaine version LTS, planifiée, à savoir .NET 6 au moment de la rédaction de cet ouvrage).

La version .NET 5 offre des fonctionnalités et des avantages supplémentaires, et ce livre couvre d’ailleurs ces nouveautés. Il s’agit là de la version recommandée si vous commencez à travailler avec Blazor, en sachant que la migration vers .NET 6 pourra se faire plus simplement en partant de la version .NET 5 que depuis .NET Core 3.1.

Pour télécharger la version choisie, il faut cliquer sur le bouton Download .NET SDK x64 ou sur le premier bouton...

1. Blazor Server

La première version à avoir vu le jour de façon stable, Blazor Server, est également la version qui a été proposée initialement à la communauté de façon expérimentale. C’est celle qui a provoqué l’intérêt du public pour cette nouvelle façon de concevoir une application web. La version Server fonctionne uniquement grâce à la technologie de communication SignalR.

L’application créée en Blazor Server vit et s’exécute sur le serveur (d’où le nom) et communique avec l’interface graphique par un pont SignalR, le tout piloté par un framework en JavaScript permettant de traiter les retours du serveur et de mettre à jour l’interface graphique (en faisant muter le DOM HTML de son état initial vers le nouvel état calculé).

La communication avec Blazor Server

Pour le développeur final, qui écrit son code en .NET, tout ceci est totalement transparent. Ce qu’il faut garder à l’esprit est qu’un lien constant est présent entre l’application qui s’exécute sur le serveur et l’application qui s’exécute sur le poste client, permettant de notifier au serveur les événements utilisateur, et permettant également au serveur d’émettre les changements à répercuter côté interface graphique.

Les trames échangées contiennent les informations nécessaires, et il est possible de visualiser leur contenu grâce aux outils de débogage du navigateur (accessibles via un appui sur la touche [F12] la plupart du temps) :

Suivi des échanges réseau sur le support WebSocket d’une application Blazor Server dans les outils développeur du navigateur...

1. Énoncé

L’application que nous allons réaliser tout au long de ces chapitres est un mini-logiciel de gestion. Nous n’allons pas nous attarder sur des problématiques d’esthétisme ou de structuration HTML, mais rien n’empêche le lecteur de personnaliser l’exercice pour le rendre le plus plaisant possible.

Ce premier exercice est assez simple. Nous allons nous servir de l’outil de notre choix afin de créer une application Blazor Server (le CLI reste l’outil recommandé).

Une fois ceci fait, il faudra créer un modèle qui représente un employé, avec ses informations (nom, prénom, date de naissance, poste occupé et adresse postale). Afin de respecter une bonne séparation architecturale, nous allons placer ce modèle dans un projet de type "bibliothèque de classes" pour pouvoir l’utiliser dans nos autres projets .NET. Il faut également créer les modèles pour représenter les pays et les postes (avec une chaîne pour le nom et un id, afin de pouvoir alimenter plus tard une liste déroulante). Pour l’identifiant d’un employé, nous pourrons utiliser le type Guid, et int pour les id de pays et de poste.

Nous allons créer notre premier composant Blazor, EmployeesList, qui affiche la liste des employés dans un tableau (avec le nom, le prénom et le poste occupé), et ce depuis une liste que nous aurons en propriété publique de notre composant. La liste des employés doit être accessible depuis la route "/employees" de notre...