Intégrer des composants Razor ASP.NET Core aux applications ASP.NET Core

  • Article

Cet article explique les scénarios Razor d’intégration des composants pour les applications ASP.NET Core.

Intégration de composants Razor

Les composants Razor peuvent être intégrés dans Razor Pages, MVC et d’autres types d’applications ASP.NET Core. Razorles composants peuvent également être intégrés à n’importe quelle application web, y compris les applications non basées sur ASP.NET Core, en tant qu’éléments HTML personnalisés.

Procédez comme expliqué dans les sections suivantes en fonction des exigences du projet :

Ajouter la prise en charge de Blazor à une application ASP.NET Core

Cette section traite de l’ajout de la prise en charge de Blazor à une application ASP.NET Core :

Remarque

Pour les exemples de cette section, le nom et l’espace de noms de l’exemple d’application est BlazorSample.

Ajouter un rendu statique côté serveur (SSR statique)

Ajoutez un dossier Components à l’application.

Ajoutez le fichier _Imports suivant pour les espaces de noms utilisés par les composants Razor.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Remplacez l’espace réservé ({APP NAMESPACE}) de l’espace de noms par l’espace de noms de l’application. Par exemple :

@using BlazorSample
@using BlazorSample.Components

Ajoutez le routeur Blazor (<Router>, Router) à l’application dans un composant Routes, qui est placé dans le dossier Components de l’application.

Components/Routes.razor :

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Vous pouvez fournir une disposition par défaut avec le paramètre RouteView.DefaultLayout du composant RouteView :

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

Pour plus d’informations, consultez layouts ASP.NET Core Blazor.

Ajoutez un composant App à l’application, qui sert de composant racine, c’est-à-dire le premier composant que l’application charge.

Components/App.razor :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Pour l’élément <link> dans l’exemple précédent, changez BlazorSample dans le nom de fichier de la feuille de style pour qu’il corresponde au nom du projet de l’application. Par exemple, un projet nommé ContosoApp utilise le nom de fichier de feuille de style ContosoApp.styles.css :

<link rel="stylesheet" href="ContosoApp.styles.css" />

Ajoutez un dossier Pages au dossier Components pour contenir les composants Razor routables.

Ajoutez le composant Welcome suivant pour illustrer le SSR statique.

Components/Pages/Welcome.razor :

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

Dans le fichier Program du projet ASP.NET Core :

  • Ajoutez une instruction using en haut du fichier pour les composants du projet :

    using {APP NAMESPACE}.Components;

    Dans la ligne précédente, remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms de l’application. Par exemple :

    using BlazorSample.Components;

  • Ajoutez des services de composant Razor (AddRazorComponents), qui ajoutent également automatiquement des services antiforgery (AddAntiforgery). Ajoutez la ligne suivante avant celle qui appelle builder.Build() :

    builder.Services.AddRazorComponents();

  • AjoutezAntiforgery Middleware au pipeline de traitement des requêtes UseAntiforgery. UseAntiforgery est appelé après l’appel à UseRouting. S’il y a des appels vers UseRouting et UseEndpoints, l’appel vers UseAntiforgery doit passer entre eux. Un appel à UseAntiforgery doit être placer après les appels à UseAuthentication et UseAuthorization.

    app.UseAntiforgery();

  • Ajoutez MapRazorComponents au pipeline de traitement des requêtes de l’application avec le composant App (App.razor) spécifié comme composant racine par défaut (le premier composant chargé). Placez le code suivant avant la ligne qui appelle app.Run :

    app.MapRazorComponents<App>();

Lorsque l’application est exécutée, le composant Welcome est accessible au point de terminaison /welcome.

Activer le rendu interactif côté serveur (SSR interactif)

Suivez les instructions de la section Ajouter le rendu statique côté serveur (SSR statique) .

Dans le fichier Program de l’application, ajoutez un appel à AddInteractiveServerComponents là où les services de composant Razor sont ajoutés avec AddRazorComponents :

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Ajoutez un appel à AddInteractiveServerRenderMode là où les composants Razor sont mappés avec MapRazorComponents :

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Ajoutez le composant Counter suivant à l’application qui adopte le rendu interactif côté serveur (SSR interactif).

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Lorsque l’application est exécutée, le composant Counter est accessible à /counter.

Activer le rendu interactif (automatique) ou côté client (CSR)

Suivez les instructions de la section Ajouter le rendu statique côté serveur (SSR statique) .

Les composants, utilisant le mode d’affichage automatique interactif, se servent initialement du SSR interactif. Le runtime .NET et l’ensemble d'applications sont téléchargés sur le client en arrière-plan et mis en cache afin de pouvoir être utilisés lors de visites ultérieures. Les composants utilisant le mode de rendu WebAssembly interactif s’affichent uniquement de manière interactive sur le client une fois le bundle Blazor téléchargé et le runtime Blazor activé. N’oubliez pas que lors de l’utilisation du mode de rendu Automatique interactif ou WebAssembly interactif, le code de composant téléchargé sur le client n’est pas privé. Pour plus d’informations, consultez Modes de rendu ASP.NET Core Blazor.

Après avoir choisi le mode de rendu à adopter :

Ajoutez une référence de package pour le package NuGet Microsoft.AspNetCore.Components.WebAssembly.Server à l’application.

Remarque

Pour obtenir des conseils sur l’ajout de packages à des applications .NET, consultez les articles figurant sous Installer et gérer des packages dans Flux de travail de la consommation des packages (documentation NuGet). Vérifiez les versions du package sur NuGet.org.

Créez une application web Blazor donatrice pour fournir des ressources à l’application. Suivez les instructions de l’article Outils pour ASP.NET Core Blazor, en sélectionnant la prise en charge des fonctionnalités de modèle suivantes lors de la génération de l’application web Blazor.

Pour le nom de l’application, utilisez le même nom que l’application ASP.NET Core, afin que le balisage de nom d’application dans les composants et le balisage des espaces de noms dans le code correspondent. L’utilisation du même nom/espace de noms n’est pas strictement nécessaire, car les espaces de noms peuvent être ajustés une fois que les ressources ont été déplacées de l’application donatrice vers l’application ASP.NET Core. Toutefois, faire correspondre les espaces de noms dès le début permet de gagner du temps.

Visual Studio :

  • Pour Mode de rendu interactif, sélectionnez Automatique (Server et WebAssembly).
  • Pour Emplacement d’interactivité, sélectionnez Par page/composant.
  • Décochez la case Inclure des exemples de pages.

Interface CLI .NET :

  • Utilisez l'option -int Auto.
  • N’utilisez pas l’option -ai|--all-interactive.
  • Passez l’option -e|--empty.

À partir de l’application web Blazor donatrice, copiez l’intégralité du projet .Client dans le dossier solution de l’application ASP.NET Core.

Important

Ne copiez pas le dossier .Client dans le dossier du projet ASP.NET Core. La meilleure approche pour organiser des solutions .NET consiste à placer chaque projet de la solution dans son propre dossier à l’intérieur d’un dossier de solution de niveau supérieur. S’il n’existe pas de dossier de solution au-dessus du dossier du projet ASP.NET Core, créez-en un. Ensuite, copiez le dossier du projet .Client de l’application web Blazor donatrice et collez-le dans le dossier solution. La structure finale des dossiers de projets doit être la suivante :

  • BlazorSampleSolution (dossier de solution de niveau supérieur)
    • BlazorSample (projet ASP.NET Core d’origine)
    • BlazorSample.Client (.Client dossier de projet à partir de l’application web Blazor donatrice)

Vous pouvez laisser le fichier de solution ASP.NET Core dans le dossier du projet ASP.NET Core. Vous pouvez également déplacer le fichier de solution ou en créer un dans le dossier de solution de niveau supérieur tant que le projet référence correctement les fichiers projet (.csproj) des deux projets dans le dossier de solution.

Si, lorsque vous avez créé le projet donateur, vous avez donné à l’application web Blazor donatrice un nom identique à celui de l’application ASP.NET Core, les espaces de noms utilisés par les ressources données correspondent à ceux de l’application ASP.NET Core. Vous n’avez pas besoin d’effectuer d’autres étapes pour faire correspondre les espaces de noms. Si vous avez utilisé un autre espace de noms lors de la création du projet d’application web Blazor donatrice, vous devez ajuster les espaces de noms parmi les ressources données afin qu’ils correspondent si vous envisagez de suivre le reste de ces instructions exactement comme indiqué. Si les espaces de noms ne correspondent pas, vous devez soit les ajuster avant de continuer, soit les ajuster à mesure que vous suivez les instructions restantes de cette section.

Supprimez l’application web Blazor donatrice, car elle n’a plus aucune utilité dans ce processus.

Ajoutez le projet .Client à la solution :

  • Visual Studio : Cliquez avec le bouton droit sur la solution dans l’Explorateur de solutions et sélectionnez Ajouter>Projet existant. Accédez au dossier .Client et sélectionnez le fichier projet (.csproj).

  • Interface CLI .NET : Utilisez la commande dotnet sln add pour ajouter le projet .Client à la solution.

Ajoutez une référence de projet à partir du projet ASP.NET Core au projet client :

  • Visual Studio : Cliquez avec le bouton droit sur le projet ASP.NET Core et sélectionnez Ajouter>Référence de projet. Sélectionnez le projet .Client et sélectionnez OK.

  • Interface CLI .NET : À partir du dossier du projet ASP.NET Core, exécutez la commande suivante :

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj

    La commande précédente part du principe que :

    • Le nom du fichier projet est BlazorSample.Client.csproj.
    • Le projet .Client se trouve dans un dossier BlazorSample.Client dans le dossier de la solution. Le dossier .Client est côte à côte avec le dossier du projet ASP.NET Core.

    Pour plus d’informations sur la commande dotnet add reference, consultez dotnet add reference (documentation .NET).

Apportez les modifications suivantes au fichier Program de l’application ASP.NET Core :

  • Ajoutez des services de composants WebAssembly interactifs avec AddInteractiveWebAssemblyComponents, où les services de composants Razor sont ajoutés avec AddRazorComponents.

    Pour le rendu Auto interactif :

    builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

    Pour le rendu WebAssembly interactif uniquement :

    builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

  • Ajoutez le mode de rendu WebAssembly interactif (AddInteractiveWebAssemblyRenderMode) et les assemblys supplémentaires pour le projet .Client où les composants Razor sont mappés avec MapRazorComponents.

    Pour le rendu automatique (Auto) interactif :

    app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Pour le rendu WebAssembly interactif uniquement :

    app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Dans les exemples précédents, changez BlazorSample.Client afin qu’il corresponde à l’espace de noms du projet .Client.

Ajoutez un dossier Pages au projet .Client.

Si le projet ASP.NET Core a un composant Counter existant :

  • Déplacez le composant vers le dossier Pages du projet .Client.
  • Supprimez la directive @rendermode en haut du fichier de composant.

Si l’application ASP.NET Core n’a pas de composant Counter, ajoutez le composant Counter suivant (Pages/Counter.razor) au projet .Client :

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Si l’application adopte uniquement le rendu WebAssembly interactif, supprimez la directive @rendermode et la valeur :

- @rendermode InteractiveAuto

Exécutez la solution à partir du projet d’application ASP.NET Core :

  • Visual Studio : Vérifiez que le projet ASP.NET Core est sélectionné dans l’Explorateur de solutions lors de l’exécution de l’application.

  • Interface CLI .NET : Exécutez le projet à partir du dossier du projet ASP.NET Core.

Pour charger le composant Counter, accédez à /counter.

Utiliser des composants non routables dans des pages ou des vues

Utilisez l’aide suivante pour intégrer des composants Razor à des pages et des vues d’une application Razor Pages ou MVC existante à l’aide de Tag Helper de composant.

Lorsque le pré-rendu du serveur est utilisé et que la page ou la vue s’affiche :

  • Le composant est prérendu avec la page ou la vue.
  • L’état initial du composant utilisé pour le prérendu est perdu.
  • Un nouvel état de composant est créé lorsque la connexion SignalR est établie.

Pour plus d’informations sur les modes de rendu, y compris le rendu de composants statiques non interactifs, consultez Tag Helper de composant dans ASP.NET Core. Pour enregistrer l’état des composants Razor prédéfinis, consultez Conserver le Tag Helper d’état du composant dans ASP.NET Core.

Ajoutez un dossier Components au dossier racine du projet.

Ajoutez un fichier d’importation au dossier Components avec le contenu suivant. Remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms du projet.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Dans le fichier de disposition du projet (Pages/Shared/_Layout.cshtml dans les applications Razor Pages ou Views/Shared/_Layout.cshtml dans les applications MVC) :

  • Ajoutez la balise <base> et le Tag Helper de composant suivants pour un composant HeadOutlet au balisage <head> :

    <base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />

    La valeur href (le chemin d’accès de base de l’application) de l’exemple précédent suppose que l’application réside dans le chemin d’accès de l’URL racine (/). Si l’application est une sous-application, suivez l’aide de la section Chemin d’accès de base de l’application de l’article Héberger et déployer ASP.NET CoreBlazor.

    Le composant HeadOutlet est utilisé pour afficher le contenu de l’en-tête (<head>) pour les titres de page (composant PageTitle) et d’autres éléments de l’en-tête (composant HeadContent) définis par les composants Razor. Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.

  • Ajoutez une balise <script> au script blazor.web.js immédiatement avant la section de rendu Scripts (@await RenderSectionAsync(...)) :

    <script src="_framework/blazor.web.js"></script>

    Il n’est pas nécessaire d’ajouter manuellement un script blazor.web.js à l’application, car l’infrastructure Blazor ajoute le script blazor.web.js à l’application.

Remarque

En général, la disposition se charge via un fichier _ViewStart.cshtml.

Ajoutez un composant non opérationnel (no-op) App au projet.

Components/App.razor :

@* No-op App component *@

Lorsque les services sont inscrits, ajoutez des services pour les composants et services Razor pour prendre en charge le rendu interactif des composants de serveur.

En haut du fichier Program, ajoutez une instruction using pour les composants du projet :

using {APP NAMESPACE}.Components;

Dans la ligne précédente, remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms de l’application. Par exemple :

using BlazorSample.Components;

Dans le fichier Program avant la ligne qui génère l’application (builder.Build()) :

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Pour plus d’informations sur l’ajout de la prise en charge des composants serveur interactif et WebAssembly, consultez Modes de rendu Blazor ASP.NET Core.

Dans le fichier Program, immédiatement après l’appel pour mapper les Razor Pages (MapRazorPages) dans une application Razor Pages ou pour mapper la route du contrôleur par défaut (MapControllerRoute) dans une application MVC, appelez MapRazorComponents pour découvrir les composants disponibles et spécifiez le composant racine de l’application (le premier composant chargé). Par défaut, le composant racine de l’application est le composant App (App.razor). Enchaînez un appel à AddInteractiveInteractiveServerRenderMode pour configurer le rendu côté serveur interactif (SSR interactif) pour l’application :

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Remarque

Si l’application n’a pas déjà été mise à jour pour inclure l’intergiciel Antiforgery, ajoutez la ligne suivante après l’appel de UseAuthorization :

app.UseAntiforgery();

Intégrez des composants à n’importe quelle page ou vue. Par exemple, ajoutez un composant EmbeddedCounter au dossier du projet Components.

Components/EmbeddedCounter.razor :

<h1>Embedded Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Razor Pages :

Dans la page Index du projet d’une application Razor Pages, ajoutez l’espace de noms du composant EmbeddedCounter et incorporez le composant dans la page. Quand la page Index se charge, le composant EmbeddedCounter est prérendu dans la page. Dans l’exemple suivant, remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms du projet.

Pages/Index.cshtml :

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

MVC :

Dans la vue Index du projet d’une application MVC, ajoutez l’espace de noms du composant EmbeddedCounter et incorporez le composant dans la vue. Quand la vue Index se charge, le composant EmbeddedCounter est prérendu dans la page. Dans l’exemple suivant, remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms du projet.

Views/Home/Index.cshtml :

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

Utiliser des composants routables

Utilisez les instructions suivantes pour intégrer des composants routables Razor dans une application Razor Pages ou MVC existante.

Les conseils de cette section supposent :

  • Le titre de l’application est Blazor Sample.
  • L’espace de noms de l’application est BlazorSample.

Pour prendre en charge les composants routables Razor :

Ajoutez un dossier Components au dossier racine du projet.

Ajoutez un fichier d’importation au dossier Components avec le contenu suivant.

Components/_Imports.razor :

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms du projet. Par exemple :

@using BlazorSample
@using BlazorSample.Components

Ajoutez un dossier Layout au dossier Components.

Ajoutez un composant de pied de page et une feuille de style au dossier Layout.

Components/Layout/Footer.razor :

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

Dans le balisage précédent, définissez l’espace réservé {APP TITLE} sur le titre de l’application. Par exemple :

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css :

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

Ajoutez un composant de menu de navigation au dossier Layout.

Components/Layout/NavMenu.razor :

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Dans le balisage précédent, définissez l’espace réservé {APP TITLE} sur le titre de l’application. Par exemple :

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css :

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

Ajoutez un composant de disposition principal et une feuille de style au dossier Layout.

Components/Layout/MainLayout.razor :

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css :

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Ajoutez un composant Routes au dossier Components avec le contenu suivant.

Components/Routes.razor :

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Ajoutez un composant App au dossier Components avec le contenu suivant.

Components/App.razor :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Dans le code précédent, mettez à jour le titre de l’application et le nom du fichier feuille de style :

  • Pour l’espace réservé {APP TITLE} dans l’élément <title>, définissez le titre de l’application. Par exemple :

    <title>Blazor Sample</title>

  • Pour l’espace réservé {APP NAMESPACE} dans l’élément feuille de style <link>, définissez l’espace de noms de l’application. Par exemple :

    <link rel="stylesheet" href="/BlazorSample.styles.css" />

Lorsque les services sont inscrits, ajoutez des services pour les composants et services Razor pour prendre en charge le rendu interactif des composants de serveur.

En haut du fichier Program, ajoutez une instruction using pour les composants du projet :

using {APP NAMESPACE}.Components;

Dans la ligne précédente, remplacez l’espace réservé {APP NAMESPACE} par l’espace de noms de l’application. Par exemple :

using BlazorSample.Components;

Dans le fichier Program avant la ligne qui génère l’application (builder.Build()) :

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Pour plus d’informations sur l’ajout de la prise en charge des composants serveur interactif et WebAssembly, consultez Modes de rendu Blazor ASP.NET Core.

Dans le fichier Program, immédiatement après l’appel à mapper Razor Pages (MapRazorPages), appelez MapRazorComponents pour découvrir les composants disponibles et spécifiez le composant racine de l’application. Par défaut, le composant racine de l’application est le composant App (App.razor). Enchaînez un appel à AddInteractiveServerRenderMode pour configurer le rendu côté serveur interactif (SSR interactif) pour l’application :

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Remarque

Si l’application n’a pas déjà été mise à jour pour inclure l’intergiciel Antiforgery, ajoutez la ligne suivante après l’appel de UseAuthorization :

app.UseAntiforgery();

Créez un dossier Pages dans le dossier Components pour les composants routables. L’exemple suivant est un composant Counter basé sur le composant Counter des modèles de projet Blazor.

Components/Pages/Counter.razor :

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Exécutez le projet et accédez au composant Counter routable sur /counter.

Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.

Retourne RazorComponentResult à partir d’une action de contrôleur MVC

Une action de contrôleur MVC peut retourner un composant avec RazorComponentResult<TComponent>.

Components/Welcome.razor :

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

Dans un contrôleur :

public IResult GetWelcomeComponent()
{
    return new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });
}

Seules les balises HTML du composant rendu sont retournées. Les dispositions et les balises de page HTML ne sont pas automatiquement rendues avec le composant. Pour produire une page HTML complète, l’application peut utiliser une disposition Blazor, qui fournit des balises HTML pour <html>, <head>, <body> et d’autres balises. Le composant inclut la disposition avec la directive @layoutRazor en haut du fichier de définition de composant, Welcome.razor pour l’exemple de cette section. L’exemple suivant part du principe que l’application a une disposition nommée RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor) :

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Vous pouvez éviter de placer l’instruction @using du dossier Layout dans des composants individuels en la déplaçant vers le fichier _Imports.razor de l’application.

Pour plus d’informations, consultez layouts ASP.NET Core Blazor.

Espaces de noms de composant

Lors de l’utilisation d’un dossier personnalisé pour contenir les composants Razor du projet, ajoutez l’espace de noms représentant le dossier à la page/vue ou au fichier _ViewImports.cshtml. Dans l’exemple suivant :

  • Les composants sont stockés dans le dossier Components du projet.
  • L’espace réservé {APP NAMESPACE} est l’espace de noms du projet. Components représente le nom du dossier.
@using {APP NAMESPACE}.Components

Par exemple :

@using BlazorSample.Components

Le fichier _ViewImports.cshtml se trouve dans le dossier Pages d’une application Razor Pages ou dans le dossier Views d’une application MVC.

Pour plus d’informations, consultez Composants ASP.NET Core Razor.

Ressources supplémentaires

Prérendu des composants Razor ASP.NET Core