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.

Une autre approche est l’utilisation de l’infrastructure Blazor par Microsoft, qui vous permet d’utiliser C# et .NET pour gérer toutes vos préoccupations de développement web.

Qu’est-ce que Blazor ?

Blazor est une infrastructure 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 chaque navigateur moderne qui permet l’exécution du code, similaire à 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 rechargement à chaud

Lorsque vous développez une application, vous souhaitez vous assurer que votre flux de développement est rapide afin de voir comment les modifications affectent votre application. Il peut être fastidieux d’apporter une modification, de l’enregistrer, de reconstruire 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 à le 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 moment où l'expression C# commence et se termine à l’aide des parenthèses : @(...).

Tout ce qui se trouve à l'intérieur de @code {} contient du code C# pour définir les 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 @code bloc 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 mettre en forme des composants Blazor à 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 ce nom comme styles qui doivent uniquement être appliqués au contenu HTML dans le composant correspondant.

Les composants Blazor peuvent également définir le contenu à ajouter à la tête HTML de la page à l’aide d’une balise spéciale HeadContent :

<HeadContent>
    <style>
        ...my styles here
    </style>
</HeadContent>

Cette balise et ce style contenu sont affichés à l’intérieur de la head balise de la page.

Composants routables

Le fichier Home.razor est un composant qui peut être accédé à 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 sur la @page "/" 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.