Blazor
Il existe de nombreuses approches pour créer des applications web. Pour créer des applications web hautement interactives et rapides, vous utilisez généralement beaucoup de JavaScript.
Vous pouvez également adopter une autre approche et utiliser l’infrastructure Blazor par Microsoft, afin de tirer parti de C# et .NET pour gérer toutes vos préoccupations de développement web.
Qu’est-ce que Blazor ?
Blazor est un framework permettant de créer des pages web avec HTML, CSS et C#. Nous pouvons définir la disposition et la conception du site web à l’aide du code HTML et CSS standard. Les composants interactifs des pages web peuvent ensuite être gérés avec du code C# qui s’exécute sur un serveur ou dans le navigateur à l’aide d’une technologie web standard appelée WebAssembly. Blazor nous permet de définir nos pages web et composants à l’aide de la syntaxe Razor, un mélange pratique de HTML et C#. Vous pouvez facilement réutiliser des composants Blazor à l’intérieur d’autres pages et composants. Cette fonctionnalité signifie que nous pouvons créer et réutiliser facilement des parties de notre application.
Qu’est-ce que WebAssembly ?
WebAssembly est une technologie standard disponible dans tous les navigateurs modernes qui permet au code de s’exécuter, comme JavaScript, dans un navigateur. Nous pouvons utiliser des outils pour préparer notre code C# à utiliser dans le navigateur en tant qu’application WebAssembly, et ces outils sont inclus dans le Kit de développement logiciel (SDK) .NET.
Mettre à jour instantanément votre application avec le rechargement à chaud
Lorsque vous développez une application, vous devez vous assurer que votre flux de développement est rapide afin de voir comment les modifications affectent votre application. Il peut s’avérer fastidieux de faire un changement, de l’enregistrer, de recréer toutes les ressources et de redéployer l’application dans le navigateur.
Vous pouvez améliorer ce flux de travail à l’aide du rechargement à chaud. Avec le rechargement à chaud, vous pouvez appliquer une modification à l’application en cours d’exécution sans avoir à la redémarrer.
Composants Blazor
Lorsque vous créez des applications à l’aide de Blazor, votre application se compose de nombreux composants, chacun ayant sa propre zone de responsabilité. Pour créer des composants, vous utilisez des fichiers Razor avec une extension .razor. Alors, qu’est-ce que Razor ?
Razor est une syntaxe de programmation qui combine la syntaxe HTML avec du code C#. Voici un exemple :
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
Dans cet exemple, @product.Name est résolu en chaîne « Blazor », qui est ensuite affichée à l’intérieur de la balise div. La sortie rendue ressemble à ceci :
<div>Blazor</div>
La partie supérieure de l’exemple Razor se compose du balisage HTML que le composant affiche lors de l’exécution. Vous pouvez afficher la valeur des expressions C# à l’aide du caractère @. Razor continue d’interpréter le code C# après le @ jusqu’à ce qu’il identifie une balise, puis reprend le rendu HTML. Vous pouvez être explicite à propos du début et de la fin de l’expression C# à l’aide des analyseurs : @(...).
Tout ce qui se trouve dans @code {} contient du code C# pour définir des membres de votre classe de composant générée. Vous pouvez considérer un fichier Razor comme un moyen pratique de définir une classe C# qui définit la logique de rendu HTML. Vous utilisez le bloc @code pour définir des membres C# pour votre type de composant, comme les champs, les propriétés et les méthodes.
Style d’un composant Blazor
Les composants Blazor affichent du code HTML, ce qui vous permet de les mettre en forme à l’aide de feuilles de style CSS normales. Les composants Blazor ont également une fonctionnalité appelée isolation CSS qui vous permet de créer des règles de style qui s’appliquent uniquement au contenu de ce composant. En créant un fichier portant le même nom que notre composant et en ajoutant l’extension de nom de fichier .css, Blazor reconnaît ces noms comme des styles qui doivent uniquement être appliqués au contenu HTML dans le composant correspondant.
Les composants Blazor peuvent également définir le contenu à ajouter à l’en-tête HTML de la page à l’aide d’une balise HeadContent spéciale :
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Cette balise style et le contenu sont affichés à l’intérieur de la balise head de la page.
Composants routables
Le fichier Home.razor est un composant accessible à partir d’un navigateur web. Il contient du code HTML, C# et des références à d’autres composants Blazor. Nous pouvons identifier ce fichier en tant que page en raison de la présence de la directive @page "/" sur la première ligne. Cette directive affecte l’itinéraire « / » au composant et demande à Blazor de répondre avec le contenu de ce fichier lorsque la page par défaut à l’adresse « / » est demandée.