Prérendu et intégration des composants Razor d’ASP.NET Core
Remarque
Ceci n’est pas la dernière version de cet article. Pour la version la plus récente de cet article, consultez la version .NET 7.
Cet article explique les scénarios d’intégration de composants Razor pour les applications Blazor, y compris le prérendu des composants Razor sur le serveur.
Important
Les modifications apportées à l’infrastructure dans les versions ASP.NET Core ont donné lieu à différents ensembles d’instructions dans cet article. Avant d’utiliser l’aide incluse dans cet article, vérifiez que le sélecteur de version de document de cette page correspond à la version d’ASP.NET Core que vous envisagez d’utiliser pour votre application.
Les composants Razor peuvent être intégrés dans des applications Razor Pages et MVC dans une solution Blazor WebAssembly hébergée. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Configuration de la solution
Configuration de du prérendu
Pour configurer le prérendu d’une application Blazor WebAssembly hébergée :
Hébergez l’application Blazor WebAssembly dans une application ASP.NET Core. Vous pouvez ajouter une application Blazor WebAssembly autonome à une solution ASP.NET Core ou utiliser une application Blazor WebAssembly hébergée créée à partir du modèle de projet Blazor WebAssembly avec l’option hébergée :
- Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée
BlazorHosted
. - Interpréteur de commandes CLI Visual Studio Code/.NET :
dotnet new blazorwasm -ho
(utilisez l’option-ho|--hosted
). Utilisez l’option-o|--output {LOCATION}
pour créer un dossier pour la solution et définir les espaces de noms du projet de la solution. Dans les exemples présentés dans cet article, la solution est nomméeBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Pour les exemples présentés dans cet article, le nom de la solution hébergée (nom de l’assembly) est
BlazorHosted
. L’espace de noms du projet client estBlazorHosted.Client
et l’espace de noms du projet serveur estBlazorHosted.Server
.- Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée
Supprimez le fichier
wwwroot/index.html
du projet Blazor WebAssemblyClient.Dans le projet Client, supprimez les lignes suivantes dans
Program.cs
:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Ajoutez un fichier
_Host.cshtml
au dossierPages
du projet Server. Vous pouvez obtenir les fichiers depuis un projet créé à partir du modèle Blazor Server à l’aide de Visual Studio ou de l’interface CLI .NET avec la commandedotnet new blazorserver -o BlazorServer
dans un interpréteur de commandes (l’option-o BlazorServer
crée un dossier pour le projet). Après avoir placé les fichiers dans le dossierPages
du projet Server, faites les modifications suivantes aux fichiers.Apportez les modifications suivantes au fichier
_Host.cshtml
:Mettez à jour l’espace de noms
Pages
en haut du fichier pour le faire correspondre à l’espace de noms des pages de l’application Server. L’espace réservé{APP NAMESPACE}
dans l’exemple suivant représente l’espace de noms des pages de l’application donatrice qui ont fourni le fichier_Host.cshtml
:Supprimer :
- @namespace {APP NAMESPACE}.Pages
Ajouter :
@namespace BlazorHosted.Server.Pages
Ajoutez une directive
@using
pour le projet Client en haut du fichier :@using BlazorHosted.Client
Mettez à jour les liens de la feuille de style pour qu’ils pointent vers les feuilles de style du projet WebAssembly. Dans l’exemple suivant, l’espace de noms du projet client est
BlazorHosted.Client
. L’espace réservé{APP NAMESPACE}
représente l’espace de noms de l’application donatrice qui a fourni le fichier_Host.cshtml
. Mettez à jour l’assistance des balises de composant (balise<component>
) pour le composantHeadOutlet
pour le prérendu du composant.Supprimer :
- <link href="css/site.css" rel="stylesheet" /> - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" /> - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Ajouter :
<link href="css/app.css" rel="stylesheet" /> <link href="BlazorHosted.Client.styles.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Remarque
Garder l’élément
<link>
qui demande la feuille de style Bootstrap (css/bootstrap/bootstrap.min.css
) en place.Mettez à jour la source de script Blazor pour utiliser le script Blazor WebAssembly côté client :
Supprimer :
- <script src="_framework/blazor.server.js"></script>
Ajouter :
<script src="_framework/blazor.webassembly.js"></script>
Mettez à jour le
render-mode
de l’assistance des balises de composant pour donner le prérendu la racine du composantApp
avec WebAssemblyPrerendered :Supprimer :
- <component type="typeof(App)" render-mode="ServerPrerendered" />
Ajouter :
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Important
Le prérendu (« prerendering » en anglais) n’est pas pris en charge pour les points de terminaison d’authentification (segment de chemin
/authentication/
). Pour plus d’informations, consultez Autres scénarios de sécurité ASP.NET Core Blazor WebAssembly.
Dans le fichier
Program.cs
du projet Server, remplacez le point de terminaison de secours du fichierindex.html
par la page_Host.cshtml
:Supprimer :
- app.MapFallbackToFile("index.html");
Ajouter :
app.MapFallbackToPage("/_Host");
Si les projets Client et Server utilisent un ou plusieurs services courants pendant le prérendu, factorisez les inscriptions de service dans une méthode qui peut être appelée à partir des deux projets. Pour plus d’informations, consultez Injection de dépendances Blazor ASP.NET Core.
Exécutez le projet Server. L’application Blazor WebAssembly hébergée est prérendue par le projet Server pour les clients.
Configuration pour l’incorporation des composants Razor dans des pages et des vues
Les sections et exemples suivants pour l’incorporation de composants Razor de l’application ClientBlazor WebAssembly dans des pages et des vues de l’application serveur nécessitent une configuration supplémentaire.
Le projet Server doit contenir les fichiers et dossiers suivants.
Razor Pages :
Pages/Shared/_Layout.cshtml
Pages/Shared/_Layout.cshtml.css
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC :
Views/Shared/_Layout.cshtml
Views/Shared/_Layout.cshtml.css
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
Les fichiers précédents peuvent être obtenus par la génération d’une application à partir des modèles de projet ASP.NET Core à l’aide des éléments suivants :
- Les nouveaux outils de création de projet de Visual Studio.
- L’ouverture d’un interpréteur de commandes et l’exécution de
dotnet new webapp -o {PROJECT NAME}
(Razor Pages) ou dedotnet new mvc -o {PROJECT NAME}
(MVC). L’option-o|--output
ayant une valeur pour l’espace réservé{PROJECT NAME}
fournit un nom pour l’application et lui crée un dossier.
Mettez à jour les espaces de noms dans le fichier _ViewImports.cshtml
importé pour les faire correspondre aux espaces de noms utilisés par le projet Server destinataire des fichiers.
Pages/_ViewImports.cshtml
(Razor Pages) :
@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Views/_ViewImports.cshtml
(MVC) :
@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Mettez à jour le fichier de disposition importé, qui est Pages/Shared/_Layout.cshtml
pour Razor Pages ou Views/Shared/_Layout.cshtml
pour MVC.
Commencez par supprimer le titre et la feuille de style du projet donateur, qui est RPDonor.styles.css
dans l’exemple suivant. L’espace réservé {PROJECT NAME}
représente le nom de l’application du projet donateur.
- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />
Incluez les styles du projet Client dans le fichier de disposition. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
. L’élément <title>
peut être mis à jour simultanément.
Placez les lignes suivantes dans le contenu <head>
du fichier de disposition :
<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
La disposition importée contient deux liens de navigation Home
(Index
page) et Privacy
. Pour que les liens Home
pointent vers l’application Blazor WebAssembly hébergée, modifiez les liens hypertexte :
- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Dans un fichier de disposition MVC :
- <a class="navbar-brand" asp-area="" asp-controller="Home"
- asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-controller="Home"
- asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Mettez à jour le nom de l’application de l’élément <footer>
. L’exemple suivant utilise le nom d’application BlazorHosted
:
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>
Dans l’exemple précédent, l’espace réservé {DATE}
représente la date de copyright dans une application générée à partir du modèle de projet Razor Pages ou MVC.
Pour que le lien Privacy
mène à une page de confidentialité (Razor Pages), ajoutez une page de confidentialité au projet Server.
Pages/Privacy.cshtml
dans le projet Server :
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Pour une vue de confidentialité basée sur MVC, créez une vue de confidentialité dans le projet Server.
View/Home/Privacy.cshtml
dans le projet Server :
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Dans le contrôleur Home
de l’application MVC, retournez la vue.
Ajoutez le code suivant à Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Si vous importez des fichiers à partir d’une application donatrice, veillez à mettre à jour tous les espaces de noms des fichiers pour les faire correspondre à ceux du projet Server (par exemple, BlazorHosted.Server
).
Importez des ressources statiques dans le projet Server à partir du dossier wwwroot
du projet donateur :
- Dossier et contenus
wwwroot/css
- Dossier et contenus
wwwroot/js
- Dossier et contenus
wwwroot/lib
Si le projet donateur est créé à partir d’un modèle de projet ASP.NET Core et que les fichiers ne sont pas modifiés, vous pouvez copier le dossier wwwroot
dans son intégralité depuis le projet donateur dans le projet Server et supprimer le fichier d’icônes favicon.
Warning
Évitez de placer la ressource statique à la fois dans les dossiers Client et Server wwwroot
. Si le même fichier est présent dans les deux dossiers, une exception est levée parce que les ressources statiques partagent le même chemin racine web. Par conséquent, hébergez une ressource statique dans l’un des dossiers wwwroot
, et non dans les deux.
Après avoir adopté la configuration précédente, incorporez des composants Razor dans des pages ou des vues du projet Server. Utilisez l’aide des sections suivantes de cet article :
- Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant
- Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS
Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant
Après avoir configuré la solution, y compris la configuration supplémentaire, l’assistance des balises de composant prend en charge deux modes de rendu pour le rendu d’un composant à partir d’une application Blazor WebAssembly dans une page ou une vue :
Dans l’exemple Razor Pages suivant, le composant Counter
est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page. Pour éviter d’utiliser l’espace de noms complet du composant Counter
avec l’assistance des balises de composant ({ASSEMBLY NAME}.Pages.Counter
), ajoutez une directive @using
pour l’espace de noms Pages
du projet client. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
.
Dans le projet Server, Pages/RazorPagesCounter1.cshtml
:
@page
@using BlazorHosted.Client.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter1
. Le composant Counter
prérendu est incorporé dans la page.
RenderMode configure si le composant :
- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts
d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head>
d’une disposition.
Définir du contenu enfant par le biais d’un fragment de rendu
L’assistance des balises de composant ne prend pas en charge la réception d’un délégué RenderFragment
pour le contenu enfant (par exemple, param-ChildContent="..."
). Nous recommandons la création d’un composant Razor (.razor
) qui fait référence au composant que vous souhaitez afficher avec le contenu enfant que vous souhaitez transmettre, puis d’appeler le composant Razor à partir de la page ou de la vue.
Veiller à ce que les composants prérendus de niveau supérieur ne soient pas supprimés lors de la publication
Si une assistance des balises de composant fait directement référence à un composant d’une bibliothèque soumise à la suppression lors de la publication, le composant peut être supprimé pendant la publication car aucune référence n’est faite à celui-ci à partir du code d’application côté client. Par conséquent, le composant n’est pas prérendu, ce qui laisse un emplacement vide dans la sortie. Si cela se produit, demandez au découpage de conserver le composant de bibliothèque en ajoutant un attribut DynamicDependency
à n’importe quelle classe de l’application côté client. Pour conserver un composant appelé SomeLibraryComponentToBePreserved
, ajoutez ce qui suit à n’importe quel composant :
@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All,
typeof(SomeLibraryComponentToBePreserved))]
L’approche précédente n’est généralement pas obligatoire, car dans la plupart des cas, l’application fait un prérendu de ses composants (qui ne sont pas supprimés), ce qui, à son tour, fait référence à des composants à partir de bibliothèques (ce qui empêche également leur suppression). Utilisez seulement DynamicDependency
explicitement pour le prérendu d’un composant de bibliothèque directement lorsque la bibliothèque est soumise à la découpe.
Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS
Après avoir configuré la solution, y compris la configuration supplémentaire, ajoutez des composants racines au projet Client d’une solution Blazor WebAssembly hébergée dans le fichier Program.cs
. Dans l’exemple suivant, le composant Counter
est déclaré en tant que composant racine avec un sélecteur CSS qui sélectionne l’élément avec le id
correspondant à counter-component
. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
.
Dans le fichier Program.cs
du projet Client, ajoutez l’espace de noms des composants Razor du projet en haut du fichier :
using BlazorHosted.Client.Pages;
Une fois que builder
est établi dans Program.cs
, ajoutez le composant Counter
en tant que composant racine :
builder.RootComponents.Add<Counter>("#counter-component");
Dans l’exemple Razor Pages suivant, le composant Counter
est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page.
Dans le projet Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter2
. Le composant Counter
prérendu est incorporé dans la page.
Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts
d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head>
d’une disposition.
Remarque
L’exemple précédent lève un JSException si une application Blazor WebAssembly est prérendue et intégrée à une application Razor Pages ou MVC simultanément avec l’utilisation d’un sélecteur CSS. La navigation vers l’un des composants Razor du projet Client ou la navigation vers une page ou une vue de Server avec un composant incorporé lève une ou plusieurs JSException.
Il s’agit d’un comportement normal, car le prérendu et l’intégration d’une application Blazor WebAssembly avec des composants Razor routables sont incompatibles avec l’utilisation des sélecteurs CSS.
Si vous avez travaillé avec les exemples des sections précédentes et que vous souhaitez simplement voir le sélecteur CSS fonctionner dans votre exemple d’application, mettez en commentaire la spécification du composant racine App
du Client fichier du projet Program.cs
:
- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");
Accédez à la page ou à la vue comportant le composant Razor intégré qui utilise un sélecteur CSS (par exemple, le /razorpagescounter2
de l’exemple précédent). La page ou la vue se charge avec le composant incorporé et celui-ci fonctionne comme prévu.
Les composants Razor peuvent être intégrés dans les applications Razor Pages et MVC. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Après avoir configuré le projet, suivez l’aide dans les sections suivantes en fonction des exigences du projet :
- Pour les composants directement routables à partir des requêtes utilisateur. Suivez cette aide lorsque les visiteurs doivent être en mesure d’envoyer une requête HTTP dans leur navigateur pour un composant avec une directive
@page
. - Pour les composants qui ne sont pas routables directement à partir des requêtes utilisateur, consultez la section Afficher des composants à partir d’une page ou d’une vue. Suivez cette aide quand l’application intègre des composants dans les pages et vues existantes à l’aide de l’assistance des balises de composant.
Configuration
Utilisez l’aide suivante pour intégrer des composants Razor dans des pages et des vues d’une application Razor Pages ou MVC existante.
Ajoutez un fichier d’importation au dossier racine du projet avec le contenu suivant. Remplacez l’espace réservé
{APP NAMESPACE}
par l’espace de noms du projet._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using {APP NAMESPACE}
Dans le fichier de disposition du projet (
Pages/Shared/_Layout.cshtml
dans les applications Razor Pages ouViews/Shared/_Layout.cshtml
dans les applications MVC) :Ajoutez la balise
<base>
et l’assistance des balises de composant HeadOutlet suivantes à l’élément<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 scriptblazor.server.js
immédiatement avant la section de renduScripts
(@await RenderSectionAsync(...)
) :<script src="_framework/blazor.server.js"></script>
L’infrastructure ajoute le script
blazor.server.js
à l’application. Il n’est pas nécessaire d’ajouter manuellement un fichier de scriptblazor.server.js
à l’application.
Remarque
En général, la disposition se charge via un fichier
_ViewStart.cshtml
.Enregistrez les services Blazor Server dans le
Program.cs
où les services sont enregistrés :builder.Services.AddServerSideBlazor();
Ajoutez le point de terminaison du hub Blazor aux points de terminaison de
Program.cs
où les itinéraires sont mappés. Placez la ligne suivante après l’appel àMapRazorPages
(Razor Pages) ouMapControllerRoute
(MVC) :app.MapBlazorHub();
Intégrez des composants à n’importe quelle page ou vue. Par exemple, ajoutez un composant
Counter
au dossier du projetShared
.Pages/Shared/Counter.razor
(Razor Pages) ouViews/Shared/Counter.razor
(MVC) :<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++; } }
Razor Pages :
Dans la page
Index
du projet d’une application Razor Pages, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la page. Quand la pageIndex
se charge, le composantCounter
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}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
MVC :
Dans la vue
Index
du projet d’une application MVC, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la vue. Quand la vueIndex
se charge, le composantCounter
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}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
Pour plus d’informations, consultez la section Afficher des composants d’une page ou d’une vue.
Utiliser des composants routables dans une application Razor Pages
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications Razor Pages :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
Ajoutez une page
_Host
au projet avec le contenu suivant. Remplacez l’espace réservé{APP NAMESPACE}
par l’espace de noms de l’application.Pages/_Host.cshtml
:@page @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <component type="typeof(App)" render-mode="ServerPrerendered" />
Remarque
L’exemple précédent suppose que le composant HeadOutlet et le script Blazor (
_framework/blazor.server.js
) sont rendus par la disposition de l’application. Pour plus d’informations, consultez la section Configuration.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Dans les points de terminaison
Program.cs
, ajoutez un itinéraire de faible priorité pour la page_Host
comme dernier point de terminaison :app.MapFallbackToPage("/_Host");
Ajoutez des composants routables au projet. L’exemple suivant est un composant
RoutableCounter
basé sur le composantCounter
des modèles de projet Blazor.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Utiliser des composants routables dans une application MVC
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications MVC :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
Ajoutez une vue
_Host
au projet avec le contenu suivant. Remplacez l’espace réservé{APP NAMESPACE}
par l’espace de noms de l’application.Views/Home/_Host.cshtml
:@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <component type="typeof(App)" render-mode="ServerPrerendered" />
Remarque
L’exemple précédent suppose que le composant HeadOutlet et le script Blazor (
_framework/blazor.server.js
) sont rendus par la disposition de l’application. Pour plus d’informations, consultez la section Configuration.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Ajoutez une action au contrôleur Home.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Dans les points de terminaison
Program.cs
, ajoutez un itinéraire de faible priorité pour l’action du contrôleur qui retourne la vue_Host
:app.MapFallbackToController("Blazor", "Home");
Créez un dossier
Pages
dans l’application MVC et ajoutez des composants routables. L’exemple suivant est un composantRoutableCounter
basé sur le composantCounter
des modèles de projet Blazor.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Afficher des composants à partir d’une page ou d’une vue
Cette section concerne l’ajout de composants à des pages ou des vues, où les composants ne sont pas routables directement à partir des requêtes utilisateurs.
Pour afficher un composant à partir d’une page ou d’une vue, utilisez l’assistance des balises de composant.
Afficher des composants interactifs avec état
Des composants interactifs avec état peuvent être ajoutés à une page ou à une vue Razor.
Lorsque 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.
La page Razor suivante affiche un composant Counter
:
<h1>Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
Afficher des composants non interactifs
Dans la page Razor suivante, le composant Counter
est affiché de manière statique avec une valeur initiale spécifiée à l’aide d’un formulaire. Comme le composant est affiché de manière statique, il n’est pas interactif :
<h1>Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
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
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.
Conserver l’état prérendu
Si l’état utilisé durant le prérendu n’est pas conservé, il est perdu et doit être recréé lorsque l’application est entièrement chargée. Si un état est configuré de manière asynchrone, l’interface utilisateur peut scintiller, car l’interface utilisateur prérendue est remplacée par des espaces réservés temporaires avant d’être entièrement affichée.
Pour conserver l’état des composants prérendus, utilisez le Tag Helper Persist Component State (source de référence). Ajoutez la balise du Tag Helper, <persist-component-state />
, à la balise fermante </body>
de la page _Host
dans une application qui affiche au préalable les composants.
Notes
Les liens de documentation vers la source de référence .NET chargent généralement la branche par défaut du référentiel, qui représente le développement actuel pour la prochaine version de .NET. Pour sélectionner une balise pour une version spécifique, utilisez la liste déroulante Échanger les branches ou les balises. Pour plus d’informations, consultez Comment sélectionner une balise de version du code source ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Dans Pages/_Host.cshtml
des applications Blazor qui sont prérendues WebAssembly (WebAssemblyPrerendered
) dans une application Blazor WebAssembly hébergée ou ServerPrerendered
dans une application Blazor Server :
<body>
...
<persist-component-state />
</body>
Déterminez l’état à conserver à l’aide du service PersistentComponentState. PersistentComponentState.RegisterOnPersisting
enregistre un rappel pour conserver l’état du composant avant que l’application ne soit suspendue. L’état est récupéré lorsque l’application reprend.
Dans l’exemple suivant :
- L’espace réservé
{TYPE}
représente le type de données à conserver (par exempleWeatherForecast[]
). - L’espace réservé
{TOKEN}
est une chaîne de l’identificateur d’état (par exemplefetchdata
).
@implements IDisposable
@inject PersistentComponentState ApplicationState
...
@code {
private {TYPE} data;
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistData);
if (!ApplicationState.TryTakeFromJson<{TYPE}>(
"{TOKEN}", out var restored))
{
data = await ...;
}
else
{
data = restored!;
}
}
private Task PersistData()
{
ApplicationState.PersistAsJson("{TOKEN}", data);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
persistingSubscription.Dispose();
}
}
L’exemple suivant est une version mise à jour du composant FetchData
dans une application Blazor WebAssembly hébergée basée sur le modèle de projet Blazor. Le composant WeatherForecastPreserveState
conserve l’état des prévisions météorologiques pendant le prérendu, puis récupère l’état pour initialiser le composant. L’assistance des balises d’état du composant persistant conserve l’état du composant après tous les appels de composant.
Pages/WeatherForecastPreserveState.razor
:
@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState
<PageTitle>Weather Forecast</PageTitle>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistForecasts);
if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
"fetchdata", out var restored))
{
forecasts =
await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
}
else
{
forecasts = restored!;
}
}
private Task PersistForecasts()
{
ApplicationState.PersistAsJson("fetchdata", forecasts);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
persistingSubscription.Dispose();
}
}
En initialisant des composants avec le même état que celui utilisé durant le prérendu, toutes les étapes d’initialisation coûteuses ne sont exécutées qu’une seule fois. L’interface utilisateur rendue correspond également à l’interface utilisateur prérendue, de sorte qu’aucun scintillement ne se produit dans le navigateur.
Ressources Blazor WebAssembly supplémentaires
- Gestion de l’état : gérer le prérendu
- Prise en charge du prérendu avec chargement différé de l’assembly
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Initialisation des composants (
OnInitialized{Async}
) - Après le rendu de composant (
OnAfterRender{Async}
) - Reconnexion avec état après le prérendu : bien que le contenu de la section se concentre sur Blazor Server et la reconnexion SignalR avec état, le scénario de prérendu dans les applications Blazor WebAssembly hébergées (WebAssemblyPrerendered) implique des conditions et approches similaires pour empêcher l’exécution du code du développeur deux fois. Pour conserver l’état pendant l’exécution du code d’initialisation lors du prérendu, consultez Conserver l’état prérendu.
- Prérendu avec l’interopérabilité JavaScript
- Initialisation des composants (
- Sujets d’authentification et d’autorisation relatifs au prérendu
- Héberger et déployer : Blazor WebAssembly
- Gérer les erreurs : prérendu
- OnNavigateAsync est exécuté deux fois lors du prérendu : gérer les événements de navigation asynchrone avec
OnNavigateAsync
Taille d’état prérendu et limite de taille du message SignalR
Une grande taille d’état prédéfini peut dépasser la limite de taille du message du circuit SignalR, ce qui entraîne les résultats suivants :
- Le circuit SignalR ne parvient pas à s’initialiser avec une erreur sur le client : Circuit host not initialized.
- L’interface utilisateur de reconnexion sur le client s’affiche lors de l’échec du circuit. La récupération n’est pas possible.
Pour résoudre le problème, utilisez l’une des approches suivantes :
- Réduisez la quantité de données que vous placez dans l’état prérendu.
- Augmentez la limite de taille des messages SignalR. AVERTISSEMENT : l’augmentation de la limite peut augmenter le risque d’attaques par déni de service (DoS).
Ressources Blazor Server supplémentaires
- Gestion de l’état : gérer le prérendu
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Authentification et autorisation : aspects généraux
- Gérer les erreurs : prérendu
- Héberger et déployer : Blazor Server
- Atténuation des menaces : scripting inter-sites (XSS)
- OnNavigateAsync est exécuté deux fois lors du prérendu : gérer les événements de navigation asynchrone avec
OnNavigateAsync
Les composants Razor peuvent être intégrés dans des applications Razor Pages et MVC dans une solution Blazor WebAssembly hébergée. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Configuration de la solution
Configuration de du prérendu
Pour configurer le prérendu d’une application Blazor WebAssembly hébergée :
Hébergez l’application Blazor WebAssembly dans une application ASP.NET Core. Vous pouvez ajouter une application Blazor WebAssembly autonome à une solution ASP.NET Core ou utiliser une application Blazor WebAssembly hébergée créée à partir du modèle de projet Blazor WebAssembly avec l’option hébergée :
- Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée
BlazorHosted
. - Interpréteur de commandes CLI Visual Studio Code/.NET :
dotnet new blazorwasm -ho
(utilisez l’option-ho|--hosted
). Utilisez l’option-o|--output {LOCATION}
pour créer un dossier pour la solution et définir les espaces de noms du projet de la solution. Dans les exemples présentés dans cet article, la solution est nomméeBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Dans les exemples de cet article, l’espace de noms du projet client est
BlazorHosted.Client
, et l’espace de noms du projet serveur estBlazorHosted.Server
.- Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée
Supprimez le fichier
wwwroot/index.html
du projet Blazor WebAssemblyClient.Dans le projet Client, supprimez les lignes suivantes dans
Program.cs
:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Ajoutez des fichiers
_Host.cshtml
et_Layout.cshtml
au dossierPages
du projet Server. Vous pouvez obtenir les fichiers depuis un projet créé à partir du modèle Blazor Server à l’aide de Visual Studio ou de l’interface CLI .NET avec la commandedotnet new blazorserver -o BlazorServer
dans un interpréteur de commandes (l’option-o BlazorServer
crée un dossier pour le projet). Après avoir placé les fichiers dans le dossierPages
du projet Server, faites les modifications suivantes aux fichiers.Important
L’utilisation d’une page de disposition (
_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu<head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.Apportez les modifications suivantes au fichier
_Layout.cshtml
:Mettez à jour l’espace de noms
Pages
en haut du fichier pour le faire correspondre à l’espace de noms des pages de l’application Server. L’espace réservé{APP NAMESPACE}
dans l’exemple suivant représente l’espace de noms des pages de l’application donatrice qui ont fourni le fichier_Layout.cshtml
:Supprimer :
- @namespace {APP NAMESPACE}.Pages
Ajouter :
@namespace BlazorHosted.Server.Pages
Ajoutez une directive
@using
pour le projet Client en haut du fichier :@using BlazorHosted.Client
Mettez à jour les liens de la feuille de style pour qu’ils pointent vers les feuilles de style du projet WebAssembly. Dans l’exemple suivant, l’espace de noms du projet client est
BlazorHosted.Client
. L’espace réservé{APP NAMESPACE}
représente l’espace de noms de l’application donatrice qui a fourni le fichier_Layout.cshtml
. Mettez à jour l’assistance des balises de composant (balise<component>
) pour le composantHeadOutlet
pour le prérendu du composant.Supprimer :
- <link href="css/site.css" rel="stylesheet" /> - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" /> - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Ajouter :
<link href="css/app.css" rel="stylesheet" /> <link href="BlazorHosted.Client.styles.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Remarque
Garder l’élément
<link>
qui demande la feuille de style Bootstrap (css/bootstrap/bootstrap.min.css
) en place.Mettez à jour la source de script Blazor pour utiliser le script Blazor WebAssembly côté client :
Supprimer :
- <script src="_framework/blazor.server.js"></script>
Ajouter :
<script src="_framework/blazor.webassembly.js"></script>
Dans le fichier
_Host.cshtml
:Remplacez l’espace de noms
Pages
par celui du projet Client. L’espace réservé{APP NAMESPACE}
représente l’espace de noms des pages de l’application donatrice qui a fourni le fichier_Host.cshtml
:Supprimer :
- @namespace {APP NAMESPACE}.Pages
Ajouter :
@namespace BlazorHosted.Client
Mettez à jour le
render-mode
de l’assistance des balises de composant pour donner le prérendu la racine du composantApp
avec WebAssemblyPrerendered :Supprimer :
- <component type="typeof(App)" render-mode="ServerPrerendered" />
Ajouter :
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Important
Le prérendu (« prerendering » en anglais) n’est pas pris en charge pour les points de terminaison d’authentification (segment de chemin
/authentication/
). Pour plus d’informations, consultez Autres scénarios de sécurité ASP.NET Core Blazor WebAssembly.
Dans le mappage de point de terminaison du projet Server dans
Program.cs
, remplacez le secours du fichierindex.html
par la page_Host.cshtml
:Supprimer :
- app.MapFallbackToFile("index.html");
Ajouter :
app.MapFallbackToPage("/_Host");
Si les projets Client et Server utilisent un ou plusieurs services courants pendant le prérendu, factorisez les inscriptions de service dans une méthode qui peut être appelée à partir des deux projets. Pour plus d’informations, consultez Injection de dépendances Blazor ASP.NET Core.
Exécutez le projet Server. L’application Blazor WebAssembly hébergée est prérendue par le projet Server pour les clients.
Configuration pour l’incorporation des composants Razor dans des pages et des vues
Les sections et exemples suivants pour l’incorporation de composants Razor de l’application ClientBlazor WebAssembly dans des pages et des vues de l’application serveur nécessitent une configuration supplémentaire.
Le projet Server doit contenir les fichiers et dossiers suivants.
Razor Pages :
Pages/Shared/_Layout.cshtml
Pages/Shared/_Layout.cshtml.css
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC :
Views/Shared/_Layout.cshtml
Views/Shared/_Layout.cshtml.css
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
Important
L’utilisation d’une page de disposition (_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu <head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.
Les fichiers précédents peuvent être obtenus par la génération d’une application à partir des modèles de projet ASP.NET Core à l’aide des éléments suivants :
- Les nouveaux outils de création de projet de Visual Studio.
- L’ouverture d’un interpréteur de commandes et l’exécution de
dotnet new webapp -o {PROJECT NAME}
(Razor Pages) ou dedotnet new mvc -o {PROJECT NAME}
(MVC). L’option-o|--output
ayant une valeur pour l’espace réservé{PROJECT NAME}
fournit un nom pour l’application et lui crée un dossier.
Mettez à jour les espaces de noms dans le fichier _ViewImports.cshtml
importé pour les faire correspondre aux espaces de noms utilisés par le projet Server destinataire des fichiers.
Pages/_ViewImports.cshtml
(Razor Pages) :
@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Views/_ViewImports.cshtml
(MVC) :
@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Mettez à jour le fichier de disposition importé, qui est Pages/Shared/_Layout.cshtml
pour Razor Pages ou Views/Shared/_Layout.cshtml
pour MVC.
Commencez par supprimer le titre et la feuille de style du projet donateur, qui est RPDonor.styles.css
dans l’exemple suivant. L’espace réservé {PROJECT NAME}
représente le nom de l’application du projet donateur.
- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />
Incluez les styles du projet Client dans le fichier de disposition. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
. L’élément <title>
peut être mis à jour simultanément.
Placez les lignes suivantes dans le contenu <head>
du fichier de disposition :
<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
La disposition importée contient deux liens de navigation Home
(Index
page) et Privacy
. Pour que les liens Home
pointent vers l’application Blazor WebAssembly hébergée, modifiez les liens hypertexte :
- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Dans un fichier de disposition MVC :
- <a class="navbar-brand" asp-area="" asp-controller="Home"
- asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-controller="Home"
- asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Mettez à jour le nom de l’application de l’élément <footer>
. L’exemple suivant utilise le nom d’application BlazorHosted
:
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>
Dans l’exemple précédent, l’espace réservé {DATE}
représente la date de copyright dans une application générée à partir du modèle de projet Razor Pages ou MVC.
Pour que le lien Privacy
mène à une page de confidentialité (Razor Pages), ajoutez une page de confidentialité au projet Server.
Pages/Privacy.cshtml
dans le projet Server :
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Pour une vue de confidentialité basée sur MVC, créez une vue de confidentialité dans le projet Server.
View/Home/Privacy.cshtml
dans le projet Server :
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Dans le contrôleur Home
de l’application MVC, retournez la vue.
Ajoutez le code suivant à Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Si vous importez des fichiers à partir d’une application donatrice, veillez à mettre à jour tous les espaces de noms des fichiers pour les faire correspondre à ceux du projet Server (par exemple, BlazorHosted.Server
).
Importez des ressources statiques dans le projet Server à partir du dossier wwwroot
du projet donateur :
- Dossier et contenus
wwwroot/css
- Dossier et contenus
wwwroot/js
- Dossier et contenus
wwwroot/lib
Si le projet donateur est créé à partir d’un modèle de projet ASP.NET Core et que les fichiers ne sont pas modifiés, vous pouvez copier le dossier wwwroot
dans son intégralité depuis le projet donateur dans le projet Server et supprimer le fichier d’icônes favicon.
Warning
Évitez de placer la ressource statique à la fois dans les dossiers Client et Server wwwroot
. Si le même fichier est présent dans les deux dossiers, une exception est levée parce que les ressources statiques de chaque fichier se partagent le même chemin racine web. Par conséquent, hébergez une ressource statique dans l’un des dossiers wwwroot
, non dans les deux.
Après avoir adopté la configuration précédente, incorporez des composants Razor dans des pages ou des vues du projet Server. Utilisez l’aide des sections suivantes de cet article :
- Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant
- Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS
Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant
Après avoir configuré la solution, y compris la configuration supplémentaire, l’assistance des balises de composant prend en charge deux modes de rendu pour le rendu d’un composant à partir d’une application Blazor WebAssembly dans une page ou une vue :
Dans l’exemple Razor Pages suivant, le composant Counter
est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page. Pour éviter d’utiliser l’espace de noms complet du composant Counter
avec l’assistance des balises de composant ({ASSEMBLY NAME}.Pages.Counter
), ajoutez une directive @using
pour l’espace de noms Pages
du projet client. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
.
Dans le projet Server, Pages/RazorPagesCounter1.cshtml
:
@page
@using BlazorHosted.Client.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter1
. Le composant Counter
prérendu est incorporé dans la page.
RenderMode configure si le composant :
- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts
d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head>
d’une disposition.
Définir du contenu enfant par le biais d’un fragment de rendu
L’assistance des balises de composant ne prend pas en charge la réception d’un délégué RenderFragment
pour le contenu enfant (par exemple, param-ChildContent="..."
). Nous recommandons la création d’un composant Razor (.razor
) qui fait référence au composant que vous souhaitez afficher avec le contenu enfant que vous souhaitez transmettre, puis d’appeler le composant Razor à partir de la page ou de la vue.
Veiller à ce que les composants prérendus de niveau supérieur ne soient pas supprimés lors de la publication
Si une assistance des balises de composant fait directement référence à un composant d’une bibliothèque soumise à la suppression lors de la publication, le composant peut être supprimé pendant la publication car aucune référence n’est faite à celui-ci à partir du code d’application côté client. Par conséquent, le composant n’est pas prérendu, ce qui laisse un emplacement vide dans la sortie. Si cela se produit, demandez au découpage de conserver le composant de bibliothèque en ajoutant un attribut DynamicDependency
à n’importe quelle classe de l’application côté client. Pour conserver un composant appelé SomeLibraryComponentToBePreserved
, ajoutez ce qui suit à n’importe quel composant :
@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All,
typeof(SomeLibraryComponentToBePreserved))]
L’approche précédente n’est généralement pas obligatoire, car dans la plupart des cas, l’application fait un prérendu de ses composants (qui ne sont pas supprimés), ce qui, à son tour, fait référence à des composants à partir de bibliothèques (ce qui empêche également leur suppression). Utilisez seulement DynamicDependency
explicitement pour le prérendu d’un composant de bibliothèque directement lorsque la bibliothèque est soumise à la découpe.
Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS
Après avoir configuré la solution, y compris la configuration supplémentaire, ajoutez des composants racines au projet Client d’une solution Blazor WebAssembly hébergée dans le fichier Program.cs
. Dans l’exemple suivant, le composant Counter
est déclaré en tant que composant racine avec un sélecteur CSS qui sélectionne l’élément avec le id
correspondant à counter-component
. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
.
Dans le fichier Program.cs
du projet Client, ajoutez l’espace de noms des composants Razor du projet en haut du fichier :
using BlazorHosted.Client.Pages;
Une fois que builder
est établi dans Program.cs
, ajoutez le composant Counter
en tant que composant racine :
builder.RootComponents.Add<Counter>("#counter-component");
Dans l’exemple Razor Pages suivant, le composant Counter
est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page.
Dans le projet Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter2
. Le composant Counter
prérendu est incorporé dans la page.
Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts
d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head>
d’une disposition.
Remarque
L’exemple précédent lève un JSException si une application Blazor WebAssembly est prérendue et intégrée à une application Razor Pages ou MVC simultanément avec l’utilisation d’un sélecteur CSS. La navigation vers l’un des composants Razor du projet Client ou la navigation vers une page ou une vue de Server avec un composant incorporé lève une ou plusieurs JSException.
Il s’agit d’un comportement normal, car le prérendu et l’intégration d’une application Blazor WebAssembly avec des composants Razor routables sont incompatibles avec l’utilisation des sélecteurs CSS.
Si vous avez travaillé avec les exemples des sections précédentes et que vous souhaitez simplement voir le sélecteur CSS fonctionner dans votre exemple d’application, mettez en commentaire la spécification du composant racine App
du Client fichier du projet Program.cs
:
- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");
Accédez à la page ou à la vue comportant le composant Razor intégré qui utilise un sélecteur CSS (par exemple, le /razorpagescounter2
de l’exemple précédent). La page ou la vue se charge avec le composant incorporé et celui-ci fonctionne comme prévu.
Les composants Razor peuvent être intégrés dans les applications Razor Pages et MVC. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Après avoir configuré le projet, suivez l’aide dans les sections suivantes en fonction des exigences du projet :
- Composants routables : pour les composants qui sont directement routables à partir des requêtes utilisateur. Suivez cette aide lorsque les visiteurs doivent être en mesure d’envoyer une requête HTTP dans leur navigateur pour un composant avec une directive
@page
. - Afficher des composants à partir d’une page ou d’une vue : pour les composants qui ne sont pas routables directement à partir des requêtes utilisateur. Suivez cette aide quand l’application intègre des composants dans les pages et vues existantes à l’aide de l’assistance des balises de composant.
Configuration
Utilisez l’aide suivante pour intégrer des composants Razor dans des pages et des vues d’une application Razor Pages ou MVC existante.
Important
L’utilisation d’une page de disposition (_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu <head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.
Dans le fichier de disposition du projet :
Ajoutez la balise
<base>
suivante et l’assistance des balises de composant HeadOutlet à l’élément<head>
dansPages/Shared/_Layout.cshtml
(Razor Pages) ouViews/Shared/_Layout.cshtml
(MVC) :<base href="~/" /> <component type="typeof(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 scriptblazor.server.js
immédiatement avant la section de renduScripts
(@await RenderSectionAsync(...)
) dans la disposition de l’application.Pages/Shared/_Layout.cshtml
(Razor Pages) ouViews/Shared/_Layout.cshtml
(MVC) :<script src="_framework/blazor.server.js"></script>
L’infrastructure ajoute le script
blazor.server.js
à l’application. Il n’est pas nécessaire d’ajouter manuellement un fichier de scriptblazor.server.js
à l’application.
Ajoutez un fichier d’importation au dossier racine du projet avec le contenu suivant. Remplacez l’espace réservé
{APP NAMESPACE}
par l’espace de noms du projet._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using {APP NAMESPACE}
Enregistrez les services Blazor Server dans le
Program.cs
où les services sont enregistrés :builder.Services.AddServerSideBlazor();
Ajoutez le point de terminaison du hub Blazor aux points de terminaison de
Program.cs
où les itinéraires sont mappés.Placez la ligne suivante après l’appel à
MapRazorPages
(Razor Pages) ouMapControllerRoute
(MVC) :app.MapBlazorHub();
Intégrez des composants à n’importe quelle page ou vue. Par exemple, ajoutez un composant
Counter
au dossier du projetShared
.Pages/Shared/Counter.razor
(Razor Pages) ouViews/Shared/Counter.razor
(MVC) :<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++; } }
Razor Pages :
Dans la page
Index
du projet d’une application Razor Pages, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la page. Quand la pageIndex
se charge, le composantCounter
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}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
MVC :
Dans la vue
Index
du projet d’une application MVC, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la vue. Quand la vueIndex
se charge, le composantCounter
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}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
Pour plus d’informations, consultez la section Afficher des composants d’une page ou d’une vue.
Utiliser des composants routables dans une application Razor Pages
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications Razor Pages :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
Ajoutez une page
_Host
au projet avec le contenu suivant.Pages/_Host.cshtml
:@page "/blazor" @namespace {APP NAMESPACE}.Pages.Shared @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = "_Layout"; } <component type="typeof(App)" render-mode="ServerPrerendered" />
Dans ce scénario, les composants utilisent le fichier
_Layout.cshtml
partagé pour leur disposition.Important
L’utilisation d’une page de disposition (
_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu<head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Dans les points de terminaison
Program.cs
, ajoutez un itinéraire de faible priorité pour la page_Host
comme dernier point de terminaison :app.MapFallbackToPage("/_Host");
Ajoutez des composants routables au projet. L’exemple suivant est un composant
RoutableCounter
basé sur le composantCounter
des modèles de projet Blazor.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Utiliser des composants routables dans une application MVC
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications MVC :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
Ajoutez une vue
_Host
au projet avec le contenu suivant.Views/Home/_Host.cshtml
:@namespace {APP NAMESPACE}.Views.Shared @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = "_Layout"; } <component type="typeof(App)" render-mode="ServerPrerendered" />
Les composants utilisent le fichier
_Layout.cshtml
partagé pour leur disposition.Important
L’utilisation d’une page de disposition (
_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu<head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Ajoutez une action au contrôleur Home.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Dans les points de terminaison
Program.cs
, ajoutez un itinéraire de faible priorité pour l’action du contrôleur qui retourne la vue_Host
:app.MapFallbackToController("Blazor", "Home");
Créez un dossier
Pages
dans l’application MVC et ajoutez des composants routables. L’exemple suivant est un composantRoutableCounter
basé sur le composantCounter
des modèles de projet Blazor.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Afficher des composants à partir d’une page ou d’une vue
Cette section concerne l’ajout de composants à des pages ou des vues, où les composants ne sont pas routables directement à partir des requêtes utilisateurs.
Pour afficher un composant à partir d’une page ou d’une vue, utilisez l’assistance des balises de composant.
Afficher des composants interactifs avec état
Des composants interactifs avec état peuvent être ajoutés à une page ou à une vue Razor.
Lorsque 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.
La page Razor suivante affiche un composant Counter
:
<h1>Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
Important
L’utilisation d’une page de disposition (_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu <head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications ASP.NET Core Blazor.
Afficher des composants non interactifs
Dans la page Razor suivante, le composant Counter
est affiché de manière statique avec une valeur initiale spécifiée à l’aide d’un formulaire. Comme le composant est affiché de manière statique, il n’est pas interactif :
<h1>Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
Important
L’utilisation d’une page de disposition (_Layout.cshtml
) avec une assistance des balises de composant pour un composant HeadOutlet est nécessaire pour contrôler le contenu <head>
, tel que le titre de page (composant PageTitle) et d’autres éléments principaux (composant HeadContent). Pour plus d’informations, consultez Contrôle du contenu des en-têtes dans les applications 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
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.
Conserver l’état prérendu
Si l’état utilisé durant le prérendu n’est pas conservé, il est perdu et doit être recréé lorsque l’application est entièrement chargée. Si un état est configuré de manière asynchrone, l’interface utilisateur peut scintiller, car l’interface utilisateur prérendue est remplacée par des espaces réservés temporaires avant d’être entièrement affichée.
Pour résoudre ces problèmes, Blazor prend en charge l’état persistant dans une page prérendue à l’aide de l’assistance des balises d’état de composant persistant. Ajoutez la balise de l’assistance des balises, <persist-component-state />
, à l’intérieur de la balise fermante </body>
.
Pages/_Layout.cshtml
:
<body>
...
<persist-component-state />
</body>
Déterminez l’état à conserver à l’aide du service PersistentComponentState. PersistentComponentState.RegisterOnPersisting
enregistre un rappel pour conserver l’état du composant avant que l’application ne soit suspendue. L’état est récupéré lorsque l’application reprend.
L’exemple suivant est une version mise à jour du composant FetchData
dans une application Blazor WebAssembly hébergée basée sur le modèle de projet Blazor. Le composant WeatherForecastPreserveState
conserve l’état des prévisions météorologiques pendant le prérendu, puis récupère l’état pour initialiser le composant. L’assistance des balises d’état du composant persistant conserve l’état du composant après tous les appels de composant.
Pages/WeatherForecastPreserveState.razor
:
@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState
<PageTitle>Weather Forecast</PageTitle>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistForecasts);
if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
"fetchdata", out var restored))
{
forecasts =
await WeatherForecastService.GetForecastAsync(DateTime.Now);
}
else
{
forecasts = restored!;
}
}
private Task PersistForecasts()
{
ApplicationState.PersistAsJson("fetchdata", forecasts);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
persistingSubscription.Dispose();
}
}
En initialisant des composants avec le même état que celui utilisé durant le prérendu, toutes les étapes d’initialisation coûteuses ne sont exécutées qu’une seule fois. L’interface utilisateur rendue correspond également à l’interface utilisateur prérendue, de sorte qu’aucun scintillement ne se produit dans le navigateur.
Ressources Blazor WebAssembly supplémentaires
- Gestion de l’état : gérer le prérendu
- Prise en charge du prérendu avec chargement différé de l’assembly
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Initialisation des composants (
OnInitialized{Async}
) - Après le rendu de composant (
OnAfterRender{Async}
) - Reconnexion avec état après le prérendu : bien que le contenu de la section se concentre sur Blazor Server et la reconnexion SignalR avec état, le scénario de prérendu dans les applications Blazor WebAssembly hébergées (WebAssemblyPrerendered) implique des conditions et approches similaires pour empêcher l’exécution du code du développeur deux fois. Pour conserver l’état pendant l’exécution du code d’initialisation lors du prérendu, consultez Conserver l’état prérendu.
- Prérendu avec l’interopérabilité JavaScript
- Initialisation des composants (
- Sujets d’authentification et d’autorisation relatifs au prérendu
- Héberger et déployer : Blazor WebAssembly
Taille d’état prérendu et limite de taille du message SignalR
Une grande taille d’état prédéfini peut dépasser la limite de taille du message du circuit SignalR, ce qui entraîne les résultats suivants :
- Le circuit SignalR ne parvient pas à s’initialiser avec une erreur sur le client : Circuit host not initialized.
- L’interface utilisateur de reconnexion sur le client s’affiche lors de l’échec du circuit. La récupération n’est pas possible.
Pour résoudre le problème, utilisez l’une des approches suivantes :
- Réduisez la quantité de données que vous placez dans l’état prérendu.
- Augmentez la limite de taille des messages SignalR. AVERTISSEMENT : l’augmentation de la limite peut augmenter le risque d’attaques par déni de service (DoS).
Ressources Blazor Server supplémentaires
- Gestion de l’état : gérer le prérendu
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Authentification et autorisation : aspects généraux
- Gérer les erreurs : prérendu
- Héberger et déployer : Blazor Server
- Atténuation des menaces : scripting inter-sites (XSS)
Les composants Razor peuvent être intégrés dans des applications Razor Pages et MVC dans une solution Blazor WebAssembly hébergée. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Configuration de la solution
Configuration de du prérendu
Pour configurer le prérendu d’une application Blazor WebAssembly hébergée :
Hébergez l’application Blazor WebAssembly dans une application ASP.NET Core. Vous pouvez ajouter une application Blazor WebAssembly autonome à une solution ASP.NET Core ou utiliser une application Blazor WebAssembly hébergée créée à partir du modèle de projet Blazor WebAssembly avec l’option hébergée :
- Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée
BlazorHosted
. - Interpréteur de commandes CLI Visual Studio Code/.NET :
dotnet new blazorwasm -ho
(utilisez l’option-ho|--hosted
). Utilisez l’option-o|--output {LOCATION}
pour créer un dossier pour la solution et définir les espaces de noms du projet de la solution. Dans les exemples présentés dans cet article, la solution est nomméeBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Dans les exemples de cet article, l’espace de noms du projet client est
BlazorHosted.Client
, et l’espace de noms du projet serveur estBlazorHosted.Server
.- Visual Studio : cochez la case ASP.NET Core Hébergé dans la boîte de dialogue Informations supplémentaires lors de la création de l’applicationBlazor WebAssembly. Dans les exemples présentés dans cet article, la solution est nommée
Supprimez le fichier
wwwroot/index.html
du projet Blazor WebAssemblyClient.Dans le projet Client, supprimez la ligne suivante dans
Program.cs
:- builder.RootComponents.Add<App>("#app");
Ajoutez un fichier
Pages/_Host.cshtml
au dossierPages
du projet Server. Vous pouvez obtenir un fichier_Host.cshtml
depuis un projet créé à partir du modèle Blazor Server avec la commandedotnet new blazorserver -o BlazorServer
dans un interpréteur de commandes (l’option-o BlazorServer
crée un dossier pour le projet). Après avoir placé le fichierPages/_Host.cshtml
dans le projet Server de la solution Blazor WebAssembly hébergée, effectuez les modifications suivantes au fichier :Fournissez une directive
@using
pour le projet Client (par exemple,@using BlazorHosted.Client
).Mettez à jour les liens de la feuille de style pour qu’ils pointent vers les feuilles de style du projet WebAssembly. Dans l’exemple suivant, l’espace de noms du projet client est
BlazorHosted.Client
:- <link href="css/site.css" rel="stylesheet" /> - <link href="_content/BlazorServer/_framework/scoped.styles.css" rel="stylesheet" /> + <link href="css/app.css" rel="stylesheet" /> + <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
Remarque
Garder l’élément
<link>
qui demande la feuille de style Bootstrap (css/bootstrap/bootstrap.min.css
) en place.Mettez à jour le
render-mode
de l’assistance des balises de composant pour donner le prérendu la racine du composantApp
avec WebAssemblyPrerendered :- <component type="typeof(App)" render-mode="ServerPrerendered" /> + <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Mettez à jour la source de script Blazor pour utiliser le script Blazor WebAssembly côté client :
- <script src="_framework/blazor.server.js"></script> + <script src="_framework/blazor.webassembly.js"></script>
Dans
Startup.Configure
du projet Server, remplacez le secours du fichierindex.html
par la page_Host.cshtml
.Startup.cs
:- endpoints.MapFallbackToFile("index.html"); + endpoints.MapFallbackToPage("/_Host");
Si les projets Client et Server utilisent un ou plusieurs services courants pendant le prérendu, factorisez les inscriptions de service dans une méthode qui peut être appelée à partir des deux projets. Pour plus d’informations, consultez Injection de dépendances Blazor ASP.NET Core.
Exécutez le projet Server. L’application Blazor WebAssembly hébergée est prérendue par le projet Server pour les clients.
Configuration pour l’incorporation des composants Razor dans des pages et des vues
Les sections et exemples suivants de cet article pour l’incorporation de composants Razor de l’application Blazor WebAssembly client dans des pages et des vues de l’application serveur nécessitent une configuration supplémentaire.
Utilisez un fichier de disposition Razor Pages ou MVC par défaut dans le projet Server. Le projet Server doit contenir les fichiers et dossiers suivants.
Razor Pages :
Pages/Shared/_Layout.cshtml
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC :
Views/Shared/_Layout.cshtml
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
Obtenez les fichiers précédents depuis une application créée à partir du modèle de projet Razor Pages ou MVC. Pour plus d’informations, consultez Tutoriel : démarrage avec Razor Pages dans ASP.NET Core ou Démarrage avec ASP.NET Core MVC.
Mettez à jour les espaces de noms dans le fichier _ViewImports.cshtml
importé pour les faire correspondre aux espaces de noms utilisés par le projet Server destinataire des fichiers.
Mettez à jour le fichier de disposition importé (_Layout.cshtml
) pour inclure les styles du projet Client. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
. L’élément <title>
peut être mis à jour simultanément.
Pages/Shared/_Layout.cshtml
(Razor Pages) ou Views/Shared/_Layout.cshtml
(MVC) :
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>@ViewData["Title"] - DonorProject</title>
+ <title>@ViewData["Title"] - BlazorHosted</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
+ <link href="css/app.css" rel="stylesheet" />
+ <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
</head>
La disposition importée contient des liens de navigation Home
et Privacy
. Pour que les liens Home
pointent vers l’application Blazor WebAssembly hébergée, modifiez le lien hypertexte :
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Dans un fichier de disposition MVC :
- <a class="nav-link text-dark" asp-area="" asp-controller="Home"
- asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Pour que le lien Privacy
mène à une page de confidentialité, ajoutez une page de confidentialité au projet Server.
Pages/Privacy.cshtml
dans le projet Server :
@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}
<h1>Privacy Policy</h1>
Si une vue de confidentialité basée sur MVC est préférée, créez une vue de confidentialité dans le projet Server.
View/Home/Privacy.cshtml
:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
Dans le contrôleur Home
, retournez la vue.
Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Importez des ressources statiques dans le projet Server à partir du dossier wwwroot
du projet donateur :
- Dossier et contenus
wwwroot/css
- Dossier et contenus
wwwroot/js
- Dossier et contenus
wwwroot/lib
Si le projet donateur est créé à partir d’un modèle de projet ASP.NET Core et que les fichiers ne sont pas modifiés, vous pouvez copier le dossier wwwroot
dans son intégralité depuis le projet donateur dans le projet Server et supprimer le fichier d’icônes favicon.
Warning
Évitez de placer la ressource statique à la fois dans les dossiers Client et Server wwwroot
. Si le même fichier est présent dans les deux dossiers, une exception est levée parce que les ressources statiques de chaque fichier se partagent le même chemin racine web. Par conséquent, hébergez une ressource statique dans l’un des dossiers wwwroot
, non dans les deux.
Afficher des composants dans une page ou une vue avec l’outil d’assistance des balises de composant
Après avoir configuré la solution, y compris la configuration supplémentaire, l’assistance des balises de composant prend en charge deux modes de rendu pour le rendu d’un composant à partir d’une application Blazor WebAssembly dans une page ou une vue :
Dans l’exemple Razor Pages suivant, le composant Counter
est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page. Pour éviter d’utiliser l’espace de noms complet du composant Counter
avec l’assistance des balises de composant ({ASSEMBLY NAME}.Pages.Counter
), ajoutez une directive @using
pour l’espace de noms Pages
du projet client. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
.
Dans le projet Server, Pages/RazorPagesCounter1.cshtml
:
@page
@using BlazorHosted.Client.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter1
. Le composant Counter
prérendu est incorporé dans la page.
RenderMode configure si le composant :
- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts
d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head>
d’une disposition.
Afficher les composants dans une page ou une vue à l’aide d’un sélecteur CSS
Après avoir configuré la solution, y compris la configuration supplémentaire, ajoutez des composants racines au projet Client d’une solution Blazor WebAssembly hébergée dans Program.cs
. Dans l’exemple suivant, le composant Counter
est déclaré en tant que composant racine avec un sélecteur CSS qui sélectionne l’élément avec le id
correspondant à counter-component
. Dans l’exemple suivant, l’espace de noms du projet Client est BlazorHosted.Client
.
Dans Program.cs
du projet Client, ajoutez l’espace de noms des composants Razor du projet en haut du fichier :
using BlazorHosted.Client.Pages;
Une fois que builder
est établi dans Program.cs
, ajoutez le composant Counter
en tant que composant racine :
builder.RootComponents.Add<Counter>("#counter-component");
Dans l’exemple Razor Pages suivant, le composant Counter
est affiché dans une page. Pour que le composant devienne interactif, le script Blazor WebAssembly est inclus dans la section de rendu de la page.
Dans le projet Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Exécutez le projet Server. Accédez à la page Razor sur /razorpagescounter2
. Le composant Counter
prérendu est incorporé dans la page.
Un travail supplémentaire peut être nécessaire en fonction des ressources statiques utilisées par les composants et de l’organisation des pages de disposition dans une application. En général, des scripts sont ajoutés à la section de rendu Scripts
d’une page ou d’une vie et des feuilles de style sont ajoutées au contenu d’un élément <head>
d’une disposition.
Remarque
L’exemple précédent lève un JSException si une application Blazor WebAssembly est prérendue et intégrée à une application Razor Pages ou MVC simultanément avec un sélecteur CSS. La navigation vers l’un des composants Razor du projet Client lève l’exception suivante :
Microsoft.JS Interop.JS Exception impossible de trouver un élément qui corresponde au sélecteur « #counter-component ».
Il s’agit d’un comportement normal, car le prérendu et l’intégration d’une application Blazor WebAssembly avec des composants Razor routables sont incompatibles avec l’utilisation des sélecteurs CSS.
Les composants Razor peuvent être intégrés dans les applications Razor Pages et MVC. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Après avoir configuré le projet, suivez l’aide dans les sections suivantes en fonction des exigences du projet :
- Composants routables : pour les composants qui sont directement routables à partir des requêtes utilisateur. Suivez cette aide lorsque les visiteurs doivent être en mesure d’envoyer une requête HTTP dans leur navigateur pour un composant avec une directive
@page
. - Afficher des composants à partir d’une page ou d’une vue : pour les composants qui ne sont pas routables directement à partir des requêtes utilisateur. Suivez cette aide quand l’application intègre des composants dans les pages et vues existantes à l’aide de l’assistance des balises de composant.
Configuration
Une application Razor Pages ou MVC existante peut intégrer des composants Razor dans des pages et des vues :
Dans le fichier de disposition du projet :
Ajoutez la balise
<base>
suivante à l’élément<head>
dansPages/Shared/_Layout.cshtml
(Razor Pages) ouViews/Shared/_Layout.cshtml
(MVC) :<base href="~/" />
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.Ajoutez une balise
<script>
au scriptblazor.server.js
immédiatement avant la section de renduScripts
.Pages/Shared/_Layout.cshtml
(Razor Pages) ouViews/Shared/_Layout.cshtml
(MVC) :... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
L’infrastructure ajoute le script
blazor.server.js
à l’application. Il n’est pas nécessaire d’ajouter manuellement un fichier de scriptblazor.server.js
à l’application.
Ajoutez un fichier d’importation au dossier racine du projet avec le contenu suivant. Remplacez l’espace réservé
{APP NAMESPACE}
par l’espace de noms du projet._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using {APP NAMESPACE}
Enregistrez le service Blazor Server dans
Startup.ConfigureServices
.Dans
Startup.cs
:services.AddServerSideBlazor();
Ajoutez le point de terminaison du hub Blazor aux points de terminaison (
app.UseEndpoints
) deStartup.Configure
.Startup.cs
:endpoints.MapBlazorHub();
Intégrez des composants à n’importe quelle page ou vue. Par exemple, ajoutez un composant
Counter
au dossier du projetShared
.Pages/Shared/Counter.razor
(Razor Pages) ouViews/Shared/Counter.razor
(MVC) :<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++; } }
Razor Pages :
Dans la page
Index
du projet d’une application Razor Pages, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la page. Quand la pageIndex
se charge, le composantCounter
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}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Dans l’exemple précédent, remplacez l’espace réservé
{APP NAMESPACE}
par l’espace de noms de l’application.MVC :
Dans la vue
Index
du projet d’une application MVC, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la vue. Quand la vueIndex
se charge, le composantCounter
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}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Pour plus d’informations, consultez la section Afficher des composants d’une page ou d’une vue.
Utiliser des composants routables dans une application Razor Pages
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications Razor Pages :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
Remarque
Depuis le lancement d’ASP.NET Core 5.0.1 et pour les éventuelles versions 5.x supplémentaires, le composant
Router
comprend le paramètrePreferExactMatches
, qui est défini sur@true
. Pour plus d’informations, consultez Migrer de ASP.NET Core 3.1 vers 5.0.Ajoutez une page
_Host
au projet avec le contenu suivant.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Les composants utilisent le fichier
_Layout.cshtml
partagé pour leur disposition.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Dans les points de terminaison
Startup.Configure
deStartup.cs
, ajoutez un itinéraire de faible priorité pour la page_Host
comme dernier point de terminaison :endpoints.MapFallbackToPage("/_Host");
L’exemple suivant présente la ligne ajoutée dans une configuration du point de terminaison d’une application standard :
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
Ajoutez des composants routables au projet.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Utiliser des composants routables dans une application MVC
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications MVC :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
Remarque
Depuis le lancement d’ASP.NET Core 5.0.1 et pour les éventuelles versions 5.x supplémentaires, le composant
Router
comprend le paramètrePreferExactMatches
, qui est défini sur@true
. Pour plus d’informations, consultez Migrer de ASP.NET Core 3.1 vers 5.0.Ajoutez une vue
_Host
au projet avec le contenu suivant.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Les composants utilisent le fichier
_Layout.cshtml
partagé pour leur disposition.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Ajoutez une action au contrôleur Home.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Dans les points de terminaison
Startup.Configure
deStartup.cs
, ajoutez un itinéraire de faible priorité à l’action du contrôleur qui retourne la vue_Host
:endpoints.MapFallbackToController("Blazor", "Home");
L’exemple suivant présente la ligne ajoutée dans une configuration du point de terminaison d’une application standard :
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
Ajoutez des composants routables au projet.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Afficher des composants à partir d’une page ou d’une vue
Cette section concerne l’ajout de composants à des pages ou des vues, où les composants ne sont pas routables directement à partir des requêtes utilisateurs.
Pour afficher un composant à partir d’une page ou d’une vue, utilisez l’assistance des balises de composant.
Afficher des composants interactifs avec état
Des composants interactifs avec état peuvent être ajoutés à une page ou à une vue Razor.
Lorsque 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.
La page Razor suivante affiche un composant Counter
:
<h1>My Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
Afficher des composants non interactifs
Dans la page Razor suivante, le composant Counter
est affiché de manière statique avec une valeur initiale spécifiée à l’aide d’un formulaire. Comme le composant est affiché de manière statique, il n’est pas interactif :
<h1>My Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
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
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 Blazor WebAssembly supplémentaires
- Gestion de l’état : gérer le prérendu
- Prise en charge du prérendu avec chargement différé de l’assembly
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Initialisation des composants (
OnInitialized{Async}
) - Après le rendu de composant (
OnAfterRender{Async}
) - Reconnexion avec état après le prérendu : bien que le contenu de la section se concentre sur Blazor Server et la reconnexion SignalR avec état, le scénario de prérendu dans les applications Blazor WebAssembly hébergées (WebAssemblyPrerendered) implique des conditions et approches similaires pour empêcher l’exécution du code du développeur deux fois. Pour conserver l’état pendant l’exécution du code d’initialisation lors du prérendu, consultez Conserver l’état prérendu.
- Prérendu avec l’interopérabilité JavaScript
- Initialisation des composants (
- Sujets d’authentification et d’autorisation relatifs au prérendu
- Héberger et déployer : Blazor WebAssembly
Taille d’état prérendu et limite de taille du message SignalR
Une grande taille d’état prédéfini peut dépasser la limite de taille du message du circuit SignalR, ce qui entraîne les résultats suivants :
- Le circuit SignalR ne parvient pas à s’initialiser avec une erreur sur le client : Circuit host not initialized.
- L’interface utilisateur de reconnexion sur le client s’affiche lors de l’échec du circuit. La récupération n’est pas possible.
Pour résoudre le problème, utilisez l’une des approches suivantes :
- Réduisez la quantité de données que vous placez dans l’état prérendu.
- Augmentez la limite de taille des messages SignalR. AVERTISSEMENT : l’augmentation de la limite peut augmenter le risque d’attaques par déni de service (DoS).
Ressources Blazor Server supplémentaires
- Gestion de l’état : gérer le prérendu
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Authentification et autorisation : aspects généraux
- Gérer les erreurs : prérendu
- Héberger et déployer : Blazor Server
- Atténuation des menaces : scripting inter-sites (XSS)
L’intégration des composants Razor dans des applications Razor Pages et MVC d’une Blazor WebAssemblysolution hébergée est prise en charge dans ASP.NET Core dans la version .NET 5 ou ultérieure. Sélectionnez une version .NET 5 ou ultérieure de cet article.
Les composants Razor peuvent être intégrés dans les applications Razor Pages et MVC. Lorsque la page ou la vue est affichée, les composants peuvent être prérendus en même temps.
Le prérendu peut améliorer l’optimisation du référencement d’un site auprès d’un moteur de recherche (SEO) en affichant le contenu de la réponse HTTP initiale utilisée par les moteurs de recherche peuvent utiliser pour calculer l’ordre de priorité de la page.
Après avoir configuré le projet, suivez l’aide dans les sections suivantes en fonction des exigences du projet :
- Composants routables : pour les composants qui sont directement routables à partir des requêtes utilisateur. Suivez cette aide lorsque les visiteurs doivent être en mesure d’envoyer une requête HTTP dans leur navigateur pour un composant avec une directive
@page
. - Afficher des composants à partir d’une page ou d’une vue : pour les composants qui ne sont pas routables directement à partir des requêtes utilisateur. Suivez cette aide quand l’application intègre des composants dans les pages et vues existantes à l’aide de l’assistance des balises de composant.
Configuration
Une application Razor Pages ou MVC existante peut intégrer des composants Razor dans des pages et des vues :
Dans le fichier de disposition du projet :
Ajoutez la balise
<base>
suivante à l’élément<head>
dansPages/Shared/_Layout.cshtml
(Razor Pages) ouViews/Shared/_Layout.cshtml
(MVC) :+ <base href="~/" />
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.Ajoutez une balise
<script>
au scriptblazor.server.js
immédiatement avant la section de renduScripts
.Pages/Shared/_Layout.cshtml
(Razor Pages) ouViews/Shared/_Layout.cshtml
(MVC) :... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
L’infrastructure ajoute le script
blazor.server.js
à l’application. Il n’est pas nécessaire d’ajouter manuellement un fichier de scriptblazor.server.js
à l’application.
Ajoutez un fichier d’importation au dossier racine du projet avec le contenu suivant. Remplacez l’espace réservé
{APP NAMESPACE}
par l’espace de noms du projet._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using {APP NAMESPACE}
Enregistrez le service Blazor Server dans
Startup.ConfigureServices
.Startup.cs
:services.AddServerSideBlazor();
Ajoutez le point de terminaison du hub Blazor aux points de terminaison (
app.UseEndpoints
) deStartup.Configure
.Startup.cs
:endpoints.MapBlazorHub();
Intégrez des composants à n’importe quelle page ou vue. Par exemple, ajoutez un composant
Counter
au dossier du projetShared
.Pages/Shared/Counter.razor
(Razor Pages) ouViews/Shared/Counter.razor
(MVC) :<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++; } }
Razor Pages :
Dans la page
Index
du projet d’une application Razor Pages, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la page. Quand la pageIndex
se charge, le composantCounter
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}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Dans l’exemple précédent, remplacez l’espace réservé
{APP NAMESPACE}
par l’espace de noms de l’application.MVC :
Dans la vue
Index
du projet d’une application MVC, ajoutez l’espace de noms du composantCounter
et incorporez le composant dans la vue. Quand la vueIndex
se charge, le composantCounter
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}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Pour plus d’informations, consultez la section Afficher des composants d’une page ou d’une vue.
Utiliser des composants routables dans une application Razor Pages
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications Razor Pages :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
Ajoutez une page
_Host
au projet avec le contenu suivant.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Les composants utilisent le fichier
_Layout.cshtml
partagé pour leur disposition.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Dans les points de terminaison
Startup.Configure
deStartup.cs
, ajoutez un itinéraire de faible priorité pour la page_Host
comme dernier point de terminaison :endpoints.MapFallbackToPage("/_Host");
L’exemple suivant présente la ligne ajoutée dans une configuration du point de terminaison d’une application standard :
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
Ajoutez des composants routables au projet.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Utiliser des composants routables dans une application MVC
Cette section concerne l’ajout de composants directement routables à partir des requêtes utilisateur.
Pour prendre en charge les composants Razor routables dans les applications MVC :
Suivez l’aide de la section Configuration.
Ajoutez un composant
App
à la racine du projet avec le contenu suivant.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
Ajoutez une vue
_Host
au projet avec le contenu suivant.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Les composants utilisent le fichier
_Layout.cshtml
partagé pour leur disposition.RenderMode configure si le composant
App
:- est prérendu dans la page.
- est rendu en tant que code HTML statique sur la page ou s’il inclut les informations nécessaires pour démarrer une application Blazor à partir de l’agent utilisateur.
Pour plus d’informations sur l’assistant de balise de composant, y compris la transmission des paramètres et la configuration RenderMode, consultez Assistance des balises de composant dans ASP.NET Core.
Ajoutez une action au contrôleur Home.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Dans les points de terminaison
Startup.Configure
deStartup.cs
, ajoutez un itinéraire de faible priorité à l’action du contrôleur qui retourne la vue_Host
:endpoints.MapFallbackToController("Blazor", "Home");
L’exemple suivant présente la ligne ajoutée dans une configuration du point de terminaison d’une application standard :
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
Ajoutez des composants routables au projet.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
routable sur/routable-counter
.
Pour plus d’informations sur les espaces de noms, consultez la section Espaces de noms de composant.
Afficher des composants à partir d’une page ou d’une vue
Cette section concerne l’ajout de composants à des pages ou des vues, où les composants ne sont pas routables directement à partir des requêtes utilisateurs.
Pour afficher un composant à partir d’une page ou d’une vue, utilisez l’assistance des balises de composant.
Afficher des composants interactifs avec état
Des composants interactifs avec état peuvent être ajoutés à une page ou à une vue Razor.
Lorsque 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.
La page Razor suivante affiche un composant Counter
:
<h1>My Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
Afficher des composants non interactifs
Dans la page Razor suivante, le composant Counter
est affiché de manière statique avec une valeur initiale spécifiée à l’aide d’un formulaire. Comme le composant est affiché de manière statique, il n’est pas interactif :
<h1>My Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Pour plus d’informations, consultez assistance des balises de composant dans ASP.NET Core.
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
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.
Taille d’état prérendu et limite de taille du message SignalR
Une grande taille d’état prédéfini peut dépasser la limite de taille du message du circuit SignalR, ce qui entraîne les résultats suivants :
- Le circuit SignalR ne parvient pas à s’initialiser avec une erreur sur le client : Circuit host not initialized.
- L’interface utilisateur de reconnexion sur le client s’affiche lors de l’échec du circuit. La récupération n’est pas possible.
Pour résoudre le problème, utilisez l’une des approches suivantes :
- Réduisez la quantité de données que vous placez dans l’état prérendu.
- Augmentez la limite de taille des messages SignalR. AVERTISSEMENT : l’augmentation de la limite peut augmenter le risque d’attaques par déni de service (DoS).
Ressources Blazor Server supplémentaires
- Gestion de l’état : gérer le prérendu
- Sujets de cycle de vie des composants Razor qui se rapportent au prérendu
- Authentification et autorisation : aspects généraux
- Gérer les erreurs : prérendu
- Héberger et déployer : Blazor Server
- Atténuation des menaces : scripting inter-sites (XSS)