ASP.NET Core Blazor

  • Article
  • 9 minutes de lecture

Bienvenue dans Blazor!

Blazor est une infrastructure permettant de créer une interface utilisateur web côté client interactive avec .NET :

  • Créez des UIs interactifs enrichis à l’aide de C# au lieu de JavaScript.
  • Partagez la logique d’application côté serveur et côté client écrite dans .NET.
  • Affichez l’interface utilisateur en langage HTML et CSS pour une large prise en charge des navigateurs, y compris les navigateurs mobiles.
  • Intégrez-vous à des plateformes d’hébergement modernes, telles que Docker.
  • Créez des applications de bureau et mobiles hybrides avec .NET et Blazor.
  • Créez des UIs interactifs enrichis à l’aide de C# au lieu de JavaScript.
  • Partagez la logique d’application côté serveur et côté client écrite dans .NET.
  • Affichez l’interface utilisateur en langage HTML et CSS pour une large prise en charge des navigateurs, y compris les navigateurs mobiles.
  • Intégrez-vous à des plateformes d’hébergement modernes, telles que Docker.

L’utilisation de .NET dans le développement web côté client offre les avantages suivants :

  • Écriture de code dans C# plutôt que dans JavaScript.
  • Tirez parti de l’écosystème .NET existant des bibliothèques .NET.
  • Partagez la logique de l’application sur le serveur et le client.
  • Bénéficiez des performances, de la fiabilité et de la sécurité de .NET.
  • Restez productif sur Windows, Linux ou macOS avec un environnement de développement, tel que Visual Studio ou Visual Studio Code.
  • Développez avec un ensemble commun de langages, de frameworks et d’outils stables, riches en fonctionnalités et faciles à utiliser.

Notes

Pour obtenir un Blazor didacticiel de démarrage rapide, consultez Créer votre première Blazor application.

Components

Blazor les applications sont basées sur des composants. Un composant dans Blazor est un élément de l’interface utilisateur, tel qu’une page, une boîte de dialogue ou un formulaire d’entrée de données.

Les composants sont des classes C# .NET intégrées aux assemblys .NET qui :

  • Définissent la logique de rendu de l’interface utilisateur flexible.
  • Gèrent les événements de l’utilisateur.
  • Peuvent être imbriqués et réutilisés.
  • Peut être partagé et distribué en tant que Razor bibliothèques de classes ou packages NuGet.

La classe de composant est généralement écrite sous la forme d’une Razor page de balisage avec une .razor extension de fichier. Les composants sont Blazor officiellement appelés Razor composants, de manière informelle comme Blazor composants. Razor est une syntaxe permettant de combiner le balisage HTML avec du code C# conçu pour la productivité des développeurs. Razor vous permet de basculer entre le balisage HTML et C# dans le même fichier avec la prise en charge de la programmation IntelliSense dans Visual Studio. Razor Les pages et MVC utilisent Razorégalement . Contrairement Razor aux pages et aux MVC, qui sont générées autour d’un modèle de demande/réponse, les composants sont utilisés spécifiquement pour la logique et la composition de l’interface utilisateur côté client.

Blazor utilise des balises HTML naturelles pour la composition de l’interface utilisateur. Le balisage suivant Razor illustre un composant (Dialog.razor) qui affiche une boîte de dialogue et traite un événement lorsque l’utilisateur sélectionne un bouton :

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

Dans l’exemple précédent, OnYes est une méthode C# déclenchée par l’événement du onclick bouton. Le texte () et le titre (ChildContentTitle) de la boîte de dialogue sont fournis par le composant suivant qui utilise ce composant dans son interface utilisateur.

Le Dialog composant est imbriqué dans un autre composant à l’aide d’une balise HTML. Dans l’exemple suivant, le Index composant (Pages/Index.razor) utilise le composant précédent Dialog . L’attribut de Title la balise transmet une valeur pour le titre à la Dialog propriété du Title composant. Le Dialog texte du composant (ChildContent) est défini par le contenu de l’élément <Dialog> . Lorsque le Dialog composant est ajouté au composant, IntelliSense dans Visual Studio accélère le développement avec la syntaxe et la Index saisie semi-automatique des paramètres.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

La boîte de dialogue est affichée lorsque le Index composant est accessible dans un navigateur. Lorsque le bouton est sélectionné par l’utilisateur, la console outils de développement du navigateur affiche le message écrit par la OnYes méthode :

Composant de boîte de dialogue affiché dans le navigateur imbriqué à l’intérieur du composant Index. La console des outils de développement du navigateur affiche le message écrit par code C# lorsque l’utilisateur sélectionne oui ! bouton dans l’interface utilisateur.

Les composants s’affichent dans une représentation en mémoire du modèle objet document (DOM) du navigateur appelé arborescence de rendu, utilisée pour mettre à jour l’interface utilisateur de manière flexible et efficace.

Blazor Server

Blazor Serverprend en charge l’hébergement Razor de composants sur le serveur dans une application ASP.NET Core. Les mises à jour de l’interface utilisateur sont gérées sur une SignalR connexion.

Le runtime reste sur le serveur et gère les éléments suivants :

  • L’exécution du code C# de l’application.
  • L’envoi des événements d’interface utilisateur depuis le navigateur vers le serveur.
  • Application des mises à jour de l’interface utilisateur à un composant rendu qui sont renvoyés par le serveur.

La connexion utilisée pour Blazor Server communiquer avec le navigateur est également utilisée pour gérer les appels d’interopérabilité JavaScript.

Blazor Server exécute le code .NET sur le serveur et interagit avec le modèle objet document sur le client via une SignalR connexion

Blazor Serverles applications affichent du contenu différemment des modèles traditionnels pour le rendu de l’interface utilisateur dans ASP.NET Core applications à l’aide Razor d’affichages ou Razor de pages. Les deux modèles utilisent le langage pour décrire le contenu HTML pour le rendu, mais ils diffèrent considérablement dans la Razorfaçon dont le balisage est rendu.

Lorsqu’une page ou une Razor vue est affichée, chaque ligne de Razor code émet du code HTML sous forme de texte. Après le rendu, le serveur supprime l’instance de page ou d’affichage, y compris tout état généré. Quand une autre demande de la page se produit, la page entière est réapprédée au code HTML et envoyée au client.

Blazor Server produit un graphique de composants qui s’affiche comme un modèle OBJET DE DOCUMENT HTML ou XML (DOM). Le graphique de composant inclut l’état conservé dans les propriétés et les champs. Blazor évalue le graphique de composant pour produire une représentation binaire du balisage, qui est envoyé au client pour le rendu. Une fois la connexion établie entre le client et le serveur, les éléments statiques du composant sont remplacés par des éléments interactifs. La préversion du contenu sur le serveur rend l’application plus réactive sur le client.

Une fois les composants interactifs sur le client, les mises à jour de l’interface utilisateur sont déclenchées par les événements d’interaction utilisateur et d’application. Lorsqu’une mise à jour se produit, le graphique de composant est remangé et un écart d’interface utilisateur (différence) est calculé. Ce différences est le plus petit ensemble de modifications DOM requises pour mettre à jour l’interface utilisateur sur le client. Lediff est envoyé au client dans un format binaire et appliqué par le navigateur.

Un composant est supprimé une fois que l’utilisateur quitte le composant.

Blazor WebAssembly

Blazor WebAssembly est une infrastructure d’application monopage (SPA) permettant de créer des applications web côté client interactives avec .NET. Blazor WebAssembly utilise des normes web ouvertes sans plug-ins ni recompilation de code dans d’autres langages. Blazor WebAssembly fonctionne dans tous les navigateurs web modernes, y compris les navigateurs mobiles.

L’exécution du code .NET dans les navigateurs web est rendue possible par WebAssembly (abrégé wasm). WebAssembly est un format bytecode compact optimisé pour un téléchargement rapide et une vitesse d’exécution maximale. WebAssembly est un standard web ouvert pris en charge dans les navigateurs web sans plug-in.

Le code WebAssembly peut accéder à la fonctionnalité complète du navigateur via JavaScript, appelé interopérabilité JavaScript, souvent raccourci à l’interopérabilité JavaScript ou JS à l’interopérabilité. Le code .NET exécuté via WebAssembly dans le navigateur s’exécute dans le bac à sable JavaScript du navigateur avec les protections offertes par le bac à sable contre les actions malveillantes sur l’ordinateur client.

Blazor WebAssembly exécute le code .NET dans le navigateur avec WebAssembly.

Lorsqu’une Blazor WebAssembly application est générée et exécutée dans un navigateur :

  • Les fichiers de code C# et Razor les fichiers sont compilés dans des assemblys .NET.
  • Les assemblys et le runtime .NET sont téléchargés dans le navigateur.
  • Blazor WebAssembly démarre le runtime .NET et configure le runtime pour charger les assemblys pour l’application. Le Blazor WebAssembly runtime utilise l’interopérabilité JavaScript pour gérer les appels d’API dom et de navigateur.

La taille de l’application publiée, sa taille de charge utile, est un facteur de performance essentiel pour la facilité d’utilisation d’une application. Le téléchargement d’une application volumineuse dans un navigateur prend un certain temps, ce qui nuit à l’expérience utilisateur. Blazor WebAssembly optimise la taille de la charge utile pour réduire les temps de téléchargement :

  • Le code inutilisé est supprimé de l’application lorsqu’il est publié par le trimmer du langage intermédiaire (IL).
  • Réponses HTTP compressées.
  • Le runtime .NET et les assemblys sont mis en cache dans le navigateur.

Blazor Hybrid

Les applications hybrides utilisent un mélange de technologies natives et web. Une Blazor Hybrid application utilise Blazor dans une application cliente native. Razor les composants s’exécutent en mode natif dans le processus .NET et affichent l’interface utilisateur web sur un contrôle incorporé Web View à l’aide d’un canal d’interopérabilité local. WebAssembly n’est pas utilisé dans les applications hybrides. Les applications hybrides englobent les technologies suivantes :

  • .NET Multi-platform App UI (.NET MAUI): Infrastructure multiplateforme permettant de créer des applications mobiles et de bureau natives avec C# et XAML.
  • Windows Presentation Foundation (WPF) : infrastructure d’interface utilisateur indépendante de la résolution et qui utilise un moteur de rendu vectoriel, conçu pour tirer parti du matériel graphique moderne.
  • Windows Forms : infrastructure d’interface utilisateur qui crée des applications clientes de bureau enrichies pour Windows. La plateforme de développement Windows Forms prend en charge un large éventail de fonctionnalités de développement d’applications, notamment les contrôles, les graphiques, la liaison de données et l’entrée utilisateur.

Pour plus d’informations sur la création d’applications Blazor Hybrid avec les frameworks précédents, consultez les articles suivants :

Interopérabilité JavaScript

Pour les applications qui nécessitent des bibliothèques JavaScript tierces et l’accès à des API de navigateur, les composants interagissent avec JavaScript. Les composants peuvent utiliser les mêmes API ou bibliothèques que JavaScript. Le code C# peut appeler du code JavaScript, et le code JavaScript peut appeler du code C#.

Partage de code et .NET Standard

Blazor implémente .NET Standard, qui permet aux projets de référencer des Blazor bibliothèques conformes aux spécifications .NET Standard. .NET Standard est une spécification formelle d’API .NET qui sont communes aux implémentations .NET. Les bibliothèques de classes .NET Standard peuvent être partagées sur différentes plateformes .NET, telles que Blazor.NET Framework, .NET Core, Xamarin, Mono et Unity.

Les API qui ne sont pas applicables à l’intérieur d’un navigateur web (par exemple l’accès au système de fichiers, l’ouverture d’un socket et le threading) lèvent une PlatformNotSupportedException.

Ressources supplémentaires