Prerender e integrare componenti ASP.NET Core Razor
Nota
Questa non è la versione più recente di questo articolo. Per la versione più recente di questo articolo, vedere la versione di .NET 7.
Questo articolo illustra gli Razor scenari di integrazione dei componenti per Blazor le app, inclusa la pre-gestione dei Razor componenti nel server.
Importante
Le modifiche al framework nelle versioni di ASP.NET Core hanno portato a diversi set di istruzioni in questo articolo. Prima di usare il materiale sussidiario di questo articolo, verificare che il selettore della versione del documento in questa pagina corrisponda alla versione di ASP.NET Core che si intende usare per l'app.
Razori componenti possono essere integrati nelle Razor app Pages e MVC in una soluzione ospitataBlazor WebAssembly. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Configurazione della soluzione
Prerendering della configurazione
Per configurare la prerendering per un'app ospitata Blazor WebAssembly :
Ospitare l'app Blazor WebAssembly in un'app ASP.NET Core. Un'app autonoma Blazor WebAssembly può essere aggiunta a una soluzione ASP.NET Core oppure è possibile usare un'app ospitata Blazor WebAssembly creata dal Blazor WebAssembly modello di progetto con l'opzione ospitata:
- Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata
BlazorHosted
. - Shell dei comandi dell'interfaccia della riga di comando di Visual Studio Code/.NET:
dotnet new blazorwasm -ho
(usare l'opzione-ho|--hosted
). Usare l'opzione-o|--output {LOCATION}
per creare una cartella per la soluzione e impostare gli spazi dei nomi del progetto della soluzione. Negli esempi di questo articolo la soluzione è denominataBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Per gli esempi in questo articolo, il nome della soluzione ospitata (nome dell'assembly) è
BlazorHosted
. Lo spazio dei nomi del progetto client èBlazorHosted.Client
e lo spazio dei nomi del progetto server èBlazorHosted.Server
.- Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata
Eliminare il
wwwroot/index.html
file dal Blazor WebAssemblyClient progetto.Client Nel progetto eliminare le righe seguenti in
Program.cs
:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Aggiungere
_Host.cshtml
il file alla Server cartella delPages
progetto. È possibile ottenere i file da un progetto creato dal Blazor Server modello usando Visual Studio o usando l'interfaccia della riga di comando di .NET con ildotnet new blazorserver -o BlazorServer
comando in una shell dei comandi (l'opzione-o BlazorServer
crea una cartella per il progetto). Dopo aver inserito i file nella Server cartella delPages
progetto, apportare le modifiche seguenti ai file.Apportare le modifiche seguenti al
_Host.cshtml
file:Aggiornare lo
Pages
spazio dei nomi nella parte superiore del file in modo che corrisponda allo spazio dei nomi delle Server pagine dell'app. Il{APP NAMESPACE}
segnaposto nell'esempio seguente rappresenta lo spazio dei nomi delle pagine dell'app donatore che ha fornito il_Host.cshtml
file:Eliminazione:
- @namespace {APP NAMESPACE}.Pages
Aggiungi:
@namespace BlazorHosted.Server.Pages
Aggiungere una
@using
direttiva per il Client progetto all'inizio del file:@using BlazorHosted.Client
Aggiornare i collegamenti del foglio di stile in modo che puntino ai fogli di stile del progetto WebAssembly. Nell'esempio seguente lo spazio dei nomi del progetto client è
BlazorHosted.Client
. Il{APP NAMESPACE}
segnaposto rappresenta lo spazio dei nomi dell'app donatore che ha fornito il_Host.cshtml
file. Aggiornare l'helper tag del componente (<component>
tag) per il componente per eseguire ilHeadOutlet
pre-riavvio del componente.Eliminazione:
- <link href="css/site.css" rel="stylesheet" /> - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" /> - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Aggiungi:
<link href="css/app.css" rel="stylesheet" /> <link href="BlazorHosted.Client.styles.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Nota
Lasciare l'elemento
<link>
che richiede il foglio di stile Bootstrap (css/bootstrap/bootstrap.min.css
) sul posto.Aggiornare l'origine Blazor script per usare lo script sul lato Blazor WebAssembly client:
Eliminazione:
- <script src="_framework/blazor.server.js"></script>
Aggiungi:
<script src="_framework/blazor.webassembly.js"></script>
Aggiornare l'oggetto dell'helper
render-mode
tag del componente per prerendere il componente radiceApp
con WebAssemblyPrerendered:Eliminazione:
- <component type="typeof(App)" render-mode="ServerPrerendered" />
Aggiungi:
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Importante
Il prerendering non è supportato per gli endpoint di autenticazione (
/authentication/
segmento di percorso). Per altre informazioni, vedere Scenari di sicurezza aggiuntivi per ASP.NET Core Blazor WebAssembly.
Program.cs
Nel file del Server progetto modificare l'endpoint di fallback dalindex.html
file alla_Host.cshtml
pagina:Eliminazione:
- app.MapFallbackToFile("index.html");
Aggiungi:
app.MapFallbackToPage("/_Host");
Se i Client progetti e Server usano uno o più servizi comuni durante la pre-esecuzione del provisioning, considerare le registrazioni del servizio in un metodo che può essere chiamato da entrambi i progetti. Per altre informazioni, vedere ASP.NET Core Blazor dependency injection.
Eseguire il Server progetto. L'app ospitata Blazor WebAssembly viene prerenderata dal Server progetto per i client.
Configurazione per l'incorporamento di Razor componenti in pagine e visualizzazioni
Le sezioni e gli esempi seguenti per l'incorporamento di Razor componenti dall'app ClientBlazor WebAssembly in pagine e visualizzazioni dell'app server richiedono una configurazione aggiuntiva.
Il Server progetto deve avere i file e le cartelle seguenti.
Razor Pagine:
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
I file precedenti possono essere ottenuti generando un'app dai modelli di progetto ASP.NET Core usando:
- Nuovi strumenti di creazione del progetto di Visual Studio.
- Apertura di una shell dei comandi ed esecuzione
dotnet new webapp -o {PROJECT NAME}
(Razor Pages) odotnet new mvc -o {PROJECT NAME}
(MVC). L'opzione-o|--output
con un valore per il{PROJECT NAME}
segnaposto fornisce un nome per l'app e crea una cartella per l'app.
Aggiornare gli spazi dei nomi nel file importato _ViewImports.cshtml
in modo che corrispondano a quelli in uso dal Server progetto che riceve i file.
Pages/_ViewImports.cshtml
(Razor Pagine):
@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
Aggiornare il file di layout importato, ovvero Pages/Shared/_Layout.cshtml
per Razor Pages o Views/Shared/_Layout.cshtml
per MVC.
Prima di tutto, eliminare il titolo e il foglio di stile dal progetto donatore, che si trova RPDonor.styles.css
nell'esempio seguente. Il {PROJECT NAME}
segnaposto rappresenta il nome dell'app del progetto di donatore.
- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />
Includere gli Client stili del progetto nel file di layout. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
. L'elemento <title>
può essere aggiornato contemporaneamente.
Inserire le righe seguenti nel <head>
contenuto del file di layout:
<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" />
Il layout importato contiene due Home
(Index
pagina) e Privacy
collegamenti di spostamento. Per fare in modo che i Home
collegamenti puntino all'app ospitata Blazor WebAssembly , modificare i collegamenti ipertestuali:
- <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>
In un file di layout 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>
Aggiornare il <footer>
nome dell'app dell'elemento. L'esempio seguente usa il nome BlazorHosted
dell'app :
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>
Nell'esempio precedente il {DATE}
segnaposto rappresenta la data di copyright in un'app generata dal Razor modello di progetto Pages o MVC.
Per fare in modo che il Privacy
collegamento conduca a una pagina di privacy (Razor Pagine), aggiungere una pagina di privacy al Server progetto.
Pages/Privacy.cshtml
nel Server progetto:
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Per una visualizzazione della privacy basata su MVC, creare una visualizzazione della privacy nel Server progetto.
View/Home/Privacy.cshtml
nel Server progetto:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Home
Nel controller dell'app MVC restituire la visualizzazione.
Aggiungere il codice seguente a Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Se si importano file da un'app donatore, assicurarsi di aggiornare gli spazi dei nomi nei file in modo che corrispondano a quello del Server progetto (ad esempio, BlazorHosted.Server
).
Importare asset statici nel Server progetto dalla cartella del wwwroot
progetto di donatore:
wwwroot/css
cartella e contenutowwwroot/js
cartella e contenutowwwroot/lib
cartella e contenuto
Se il progetto di donatore viene creato da un modello di progetto ASP.NET Core e i file non vengono modificati, è possibile copiare l'intera wwwroot
cartella dal progetto donatore nel Server progetto e rimuovere il favicon file icona.
Avviso
Evitare di inserire l'asset statico in entrambe le Client cartelle e Server wwwroot
. Se lo stesso file è presente in entrambe le cartelle, viene generata un'eccezione perché gli asset statici condividono lo stesso percorso radice Web. Pertanto, ospitare un asset statico in una delle wwwroot
cartelle, non entrambi.
Dopo aver adottato la configurazione precedente, incorporare Razor i componenti in pagine o visualizzazioni del Server progetto. Usare le linee guida nelle sezioni seguenti di questo articolo:
- Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente
- Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS
Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente
Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, l'helper tag componente supporta due modalità di rendering per il rendering di un componente da un'app Blazor WebAssembly in una pagina o in una visualizzazione:
Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter
componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina. Per evitare di usare lo spazio dei nomi completo per il Counter
componente con l'helper tag del componente ({ASSEMBLY NAME}.Pages.Counter
), aggiungere una @using
direttiva per lo spazio dei nomi del Pages
progetto client. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
.
Nel progetto 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>
}
Eseguire il Server progetto. Passare alla Razor pagina in /razorpagescounter1
. Il componente pre-predefinito Counter
è incorporato nella pagina.
RenderMode configura se il componente:
- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts
una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head>
layout.
Impostare il contenuto figlio tramite un frammento di rendering
L'helper tag del componente non supporta la ricezione di un delegato per il RenderFragment
contenuto figlio , ad esempio param-ChildContent="..."
. È consigliabile creare un Razor componente (.razor
) che faccia riferimento al componente di cui si vuole eseguire il rendering con il contenuto figlio da passare e quindi richiamare il Razor componente dalla pagina o dalla visualizzazione.
Assicurarsi che i componenti prerenderati di primo livello non vengano eliminati durante la pubblicazione
Se un helper tag componente fa direttamente riferimento a un componente da una libreria soggetta a taglio durante la pubblicazione, il componente potrebbe essere eliminato durante la pubblicazione perché non vi sono riferimenti dal codice dell'app sul lato client. Di conseguenza, il componente non viene prerenderato, lasciando un punto vuoto nell'output. In questo caso, indicare al trimmer di mantenere il componente di libreria aggiungendo un DynamicDependency
attributo a qualsiasi classe nell'app lato client. Per mantenere un componente denominato SomeLibraryComponentToBePreserved
, aggiungere quanto segue a qualsiasi componente:
@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All,
typeof(SomeLibraryComponentToBePreserved))]
L'approccio precedente in genere non è necessario perché nella maggior parte dei casi l'app esegue il pre-riavvio dei relativi componenti (che non vengono tagliati), che a sua volta fa riferimento ai componenti dalle librerie (causando anche il mancato taglio). Usare DynamicDependency
in modo esplicito solo per la pre-gestione diretta di un componente di libreria quando la libreria è soggetta a taglio.
Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS
Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, aggiungere i componenti radice al Client progetto di una soluzione ospitata Blazor WebAssembly nel Program.cs
file. Nell'esempio seguente il Counter
componente viene dichiarato come componente radice con un selettore CSS che seleziona l'elemento con l'oggetto id
corrispondente counter-component
a . Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
.
Nel Program.cs
file del Client progetto aggiungere lo spazio dei nomi per i componenti del Razor progetto all'inizio del file:
using BlazorHosted.Client.Pages;
Dopo aver stabilito in builder
Program.cs
, aggiungere il Counter
componente come componente radice:
builder.RootComponents.Add<Counter>("#counter-component");
Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter
componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina.
Nel progetto Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Eseguire il Server progetto. Passare alla Razor pagina in /razorpagescounter2
. Il componente pre-predefinito Counter
è incorporato nella pagina.
Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts
una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head>
layout.
Nota
L'esempio precedente genera un'eccezione JSException se un'app Blazor WebAssembly viene prerenderata e integrata in un'app Razor Pages o MVC contemporaneamente con l'uso di un selettore CSS. Passare a uno dei Client componenti del Razor progetto o passare a una pagina o a una visualizzazione di Server con un componente incorporato genera uno o più JSExceptionelementi .
Questo comportamento è normale perché il prerendering e l'integrazione di un'app Blazor WebAssembly con componenti instradabili Razor non è compatibile con l'uso di selettori CSS.
Se si lavora con gli esempi nelle sezioni precedenti e si vuole semplicemente visualizzare il lavoro del selettore CSS nell'app di esempio, impostare come commento la specifica del App
componente radice del Client file del Program.cs
progetto:
- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");
Passare alla pagina o alla visualizzazione con il componente incorporato Razor che usa un selettore CSS( ad esempio, /razorpagescounter2
dell'esempio precedente). La pagina o la visualizzazione viene caricata con il componente incorporato e il componente incorporato funziona come previsto.
Razor i componenti possono essere integrati nelle Razor app Pages e MVC. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Dopo aver configurato il progetto, usare le indicazioni riportate nelle sezioni seguenti in base ai requisiti del progetto:
- Per i componenti che sono direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando i visitatori devono essere in grado di effettuare una richiesta HTTP nel browser per un componente con una
@page
direttiva . - Per i componenti che non sono direttamente instradabili dalle richieste utente, vedere la sezione Eseguire il rendering dei componenti da una pagina o da una vista . Seguire queste indicazioni quando l'app incorpora i componenti in pagine e visualizzazioni esistenti con l'helper tag del componente.
Impostazione
Usare le indicazioni seguenti per integrare Razor componenti in pagine e visualizzazioni di un'app Pages o MVC esistente Razor .
Aggiungere un file imports alla cartella radice del progetto con il contenuto seguente. Modificare il
{APP NAMESPACE}
segnaposto nello spazio dei nomi del progetto._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}
Nel file di layout del progetto (
Pages/Shared/_Layout.cshtml
nelle Razor app Pages oViews/Shared/_Layout.cshtml
nelle app MVC):Aggiungere il tag e HeadOutlet l'helper tag del componente seguenti
<base>
all'elemento<head>
:<base href="~/" /> <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" render-mode="ServerPrerendered" />
Il
href
valore (percorso di base dell'app) nell'esempio precedente presuppone che l'app risieda nel percorso URL radice (/
). Se l'app è un'applicazione secondaria, seguire le indicazioni nella sezione Percorso di base dell'app dell'articolo Host e distribuire ASP.NET Core Blazor .Il componente viene usato per eseguire il HeadOutlet rendering del contenuto head (
<head>
) per i titoli di pagina (PageTitle componente) e altri elementi head (HeadContent componente) impostati dai Razor componenti. Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.Aggiungere un
<script>
tag per loblazor.server.js
script immediatamente prima dellaScripts
sezione render (@await RenderSectionAsync(...)
):<script src="_framework/blazor.server.js"></script>
Il framework aggiunge lo
blazor.server.js
script all'app. Non è necessario aggiungere manualmente unblazor.server.js
file di script all'app.
Nota
In genere, il layout viene caricato tramite un
_ViewStart.cshtml
file.Registrare i Blazor Server servizi in
Program.cs
cui sono registrati i servizi:builder.Services.AddServerSideBlazor();
Aggiungere l'endpoint Blazor hub agli endpoint di
Program.cs
dove vengono mappate le route. Inserire la riga seguente dopo la chiamata aMapRazorPages
(Razor Pages) oMapControllerRoute
(MVC):app.MapBlazorHub();
Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un
Counter
componente alla cartella delShared
progetto.Pages/Shared/Counter.razor
(Razor Pages) oViews/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 Pagine:
Nella pagina del progetto di
Index
un'app Razor Pages aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella pagina. Quando laIndex
pagina viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
MVC:
Nella visualizzazione del progetto di
Index
un'app MVC aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella visualizzazione. Quando laIndex
visualizzazione viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
Per altre informazioni, vedere la sezione Componenti di rendering da una pagina o una vista .
Usare i componenti instradabili in un'app Razor Pages
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare i componenti instradabili Razor nelle Razor app Pages:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Aggiungere una
_Host
pagina al progetto con il contenuto seguente. Sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi dell'app.Pages/_Host.cshtml
:@page @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <component type="typeof(App)" render-mode="ServerPrerendered" />
Nota
L'esempio precedente presuppone che il rendering del HeadOutlet componente e Blazor dello script (
_framework/blazor.server.js
) venga eseguito dal layout dell'app. Per altre informazioni, vedere la sezione Configurazione .RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Program.cs
Negli endpoint aggiungere una route con priorità bassa per la_Host
pagina come ultimo endpoint:app.MapFallbackToPage("/_Host");
Aggiungere componenti instradabili al progetto. L'esempio seguente è un
RoutableCounter
componente basato sulCounter
componente nei modelli di Blazor progetto.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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Usare i componenti instradabili in un'app MVC
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare componenti instradabili Razor nelle app MVC:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Aggiungere una
_Host
visualizzazione al progetto con il contenuto seguente. Sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi dell'app.Views/Home/_Host.cshtml
:@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <component type="typeof(App)" render-mode="ServerPrerendered" />
Nota
L'esempio precedente presuppone che il rendering del HeadOutlet componente e Blazor dello script (
_framework/blazor.server.js
) venga eseguito dal layout dell'app. Per altre informazioni, vedere la sezione Configurazione .RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Aggiungere un'azione al Home controller.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Program.cs
Negli endpoint aggiungere una route con priorità bassa per l'azione del controller che restituisce la_Host
visualizzazione:app.MapFallbackToController("Blazor", "Home");
Creare una
Pages
cartella nell'app MVC e aggiungere componenti instradabili. L'esempio seguente è unRoutableCounter
componente basato sulCounter
componente nei modelli di Blazor progetto.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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Eseguire il rendering dei componenti da una pagina o una vista
Questa sezione riguarda l'aggiunta di componenti a pagine o visualizzazioni, in cui i componenti non sono direttamente instradabili dalle richieste utente.
Per eseguire il rendering di un componente da una pagina o da una visualizzazione, usare l'helper tag del componente.
Eseguire il rendering di componenti interattivi con stato
I componenti interattivi con stato possono essere aggiunti a una pagina o a una Razor visualizzazione.
Quando viene eseguito il rendering della pagina o della visualizzazione:
- Il componente viene prerenderato con la pagina o la visualizzazione.
- Lo stato del componente iniziale usato per la pre-esecuzione del pre-riavvio viene perso.
- Quando viene stabilita la connessione, viene creato un nuovo stato del SignalR componente.
La pagina seguente Razor esegue il rendering di un Counter
componente:
<h1>Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Eseguire il rendering di componenti non interattivi
Nella pagina seguente Razor il rendering del Counter
componente viene eseguito in modo statico con un valore iniziale specificato usando un modulo. Poiché il rendering del componente viene eseguito in modo statico, il componente non è interattivo:
<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; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Spazi dei nomi dei componenti
Quando si usa una cartella personalizzata per contenere i componenti del Razor progetto, aggiungere lo spazio dei nomi che rappresenta la cartella alla pagina/visualizzazione o al _ViewImports.cshtml
file. Nell'esempio seguente :
- I componenti vengono archiviati nella
Components
cartella del progetto. - Il
{APP NAMESPACE}
segnaposto è lo spazio dei nomi del progetto.Components
rappresenta il nome della cartella.
@using {APP NAMESPACE}.Components
Il _ViewImports.cshtml
file si trova nella Pages
cartella di un'app Razor Pages o nella Views
cartella di un'app MVC.
Per altre informazioni, vedere ASP.NET Componenti di baseRazor.
Mantenere lo stato prerenderato
Senza rendere persistente lo stato prerenderato, lo stato usato durante il prerendering viene perso e deve essere ricreato quando l'app viene completamente caricata. Se uno stato è configurato in modo asincrono, l'interfaccia utente potrebbe sfarfalliare perché l'interfaccia utente prerisorsa viene sostituita con segnaposto temporaneo e quindi nuovamente sottoposto a rendering completo.
Per mantenere lo stato per i componenti prerenderati, usare l'helper Persist Component State Tag (origine di riferimento). Aggiungere il tag dell'helper tag, <persist-component-state />
, all'interno del tag di chiusura </body>
della _Host
pagina in un'app che prerendere i componenti.
Nota
I collegamenti della documentazione all'origine del riferimento .NET in genere caricano il ramo predefinito del repository, che rappresenta lo sviluppo corrente per la versione successiva di .NET. Per selezionare un tag per una versione specifica, usare l'elenco a discesa Switch branches or tags. Per altre informazioni, vedere How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Come selezionare un tag di versione del codice sorgente di ASP.NET - dotnet/AspNetCore.Docs #26205).
In Pages/_Host.cshtml
delle Blazor app prerenderate (WebAssemblyPrerendered
) di WebAssembly in un'app ospitata Blazor WebAssembly o ServerPrerendered
in un'app Blazor Server :
<body>
...
<persist-component-state />
</body>
Decidere quale stato rendere persistente usando il PersistentComponentState servizio. PersistentComponentState.RegisterOnPersisting
registra un callback per rendere persistente lo stato del componente prima che l'app venga sospesa. Lo stato viene recuperato quando l'applicazione riprende.
Nell'esempio seguente :
- Il
{TYPE}
segnaposto rappresenta il tipo di dati da rendere persistenti, ad esempioWeatherForecast[]
. - Il
{TOKEN}
segnaposto è una stringa di identificatore di stato , ad esempiofetchdata
.
@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'esempio seguente è una versione aggiornata del FetchData
componente in un'app ospitata Blazor WebAssembly in base al modello di Blazor progetto. Il WeatherForecastPreserveState
componente mantiene lo stato delle previsioni meteo durante la pre-esecuzione del servizio e quindi recupera lo stato per inizializzare il componente. L'helper Persist Component State Tag mantiene lo stato del componente dopo tutte le chiamate al componente.
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();
}
}
Inizializzando i componenti con lo stesso stato usato durante la pre-esecuzione, tutti i passaggi di inizializzazione costosi vengono eseguiti una sola volta. L'interfaccia utente sottoposta a rendering corrisponde anche all'interfaccia utente prerisorsa, quindi non si verifica alcun sfarfallio nel browser.
Risorse aggiuntive Blazor WebAssembly
- Gestione dello stato: Gestire la pre-gestione
- Supporto di pre-gestione con caricamento differita dell'assembly
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Inizializzazione dei componenti (
OnInitialized{Async}
) - Dopo il rendering del componente (
OnAfterRender{Async}
) - Riconnessione con stato dopo il prerendering: anche se il contenuto della sezione è incentrato sulla riconnessione con stato e sulla Blazor Server riconnessione conSignalR stato, lo scenario per la prerendering nelle app ospitate Blazor WebAssembly (WebAssemblyPrerendered) prevede condizioni e approcci simili per impedire l'esecuzione del codice dello sviluppatore due volte. Per mantenere lo stato durante l'esecuzione del codice di inizializzazione durante la pre-gestione, vedere la sezione Rendere persistente lo stato prerenderato di questo articolo.
- Prerendering con interoperabilità JavaScript
- Inizializzazione dei componenti (
- Soggetti di autenticazione e autorizzazione che riguardano il prerendering
- Ospitare e distribuire: Blazor WebAssembly
- Gestire gli errori: Prerendering
- OnNavigateAsync viene eseguito due volte quando si esegue la pre-esecuzione: gestire gli eventi di spostamento asincroni con
OnNavigateAsync
Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi
Una dimensione dello stato prerendered di grandi dimensioni può superare il limite di dimensioni del messaggio del SignalR circuito, il che comporta quanto segue:
- L'inizializzazione del SignalR circuito non riesce con un errore nel client: Circuit host not initialized.
- L'interfaccia utente di riconnessione nel client viene visualizzata quando il circuito ha esito negativo. Il ripristino non è possibile.
Per risolvere il problema, usare uno degli approcci seguenti:
- Ridurre la quantità di dati inseriti nello stato pre-temporaneo.
- Aumentare il limite di dimensioni del SignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).
Risorse aggiuntive Blazor Server
- Gestione dello stato: Gestire la pre-gestione
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Autenticazione e autorizzazione: aspetti generali
- Gestire gli errori: Prerendering
- Ospitare e distribuire: Blazor Server
- Mitigazione delle minacce: scripting tra siti (XSS)
- OnNavigateAsync viene eseguito due volte quando si esegue la pre-esecuzione: gestire gli eventi di spostamento asincroni con
OnNavigateAsync
Razori componenti possono essere integrati nelle Razor app Pages e MVC in una soluzione ospitataBlazor WebAssembly. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Configurazione della soluzione
Prerendering della configurazione
Per configurare la prerendering per un'app ospitata Blazor WebAssembly :
Ospitare l'app Blazor WebAssembly in un'app ASP.NET Core. Un'app autonoma Blazor WebAssembly può essere aggiunta a una soluzione ASP.NET Core oppure è possibile usare un'app ospitata Blazor WebAssembly creata dal Blazor WebAssembly modello di progetto con l'opzione ospitata:
- Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata
BlazorHosted
. - Shell dei comandi dell'interfaccia della riga di comando di Visual Studio Code/.NET:
dotnet new blazorwasm -ho
(usare l'opzione-ho|--hosted
). Usare l'opzione-o|--output {LOCATION}
per creare una cartella per la soluzione e impostare gli spazi dei nomi del progetto della soluzione. Negli esempi di questo articolo la soluzione è denominataBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Per gli esempi in questo articolo, lo spazio dei nomi del progetto client è
BlazorHosted.Client
e lo spazio dei nomi del progetto server èBlazorHosted.Server
.- Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata
Eliminare il
wwwroot/index.html
file dal Blazor WebAssemblyClient progetto.Client Nel progetto eliminare le righe seguenti in
Program.cs
:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Aggiungere
_Host.cshtml
file e_Layout.cshtml
alla Server cartella delPages
progetto. È possibile ottenere i file da un progetto creato dal Blazor Server modello usando Visual Studio o usando l'interfaccia della riga di comando di .NET con ildotnet new blazorserver -o BlazorServer
comando in una shell dei comandi (l'opzione-o BlazorServer
crea una cartella per il progetto). Dopo aver inserito i file nella Server cartella delPages
progetto, apportare le modifiche seguenti ai file.Importante
L'uso di una pagina di layout (
_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare<head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.Apportare le modifiche seguenti al
_Layout.cshtml
file:Aggiornare lo
Pages
spazio dei nomi nella parte superiore del file in modo che corrisponda allo spazio dei nomi delle Server pagine dell'app. Il{APP NAMESPACE}
segnaposto nell'esempio seguente rappresenta lo spazio dei nomi delle pagine dell'app donatore che ha fornito il_Layout.cshtml
file:Eliminazione:
- @namespace {APP NAMESPACE}.Pages
Aggiungi:
@namespace BlazorHosted.Server.Pages
Aggiungere una
@using
direttiva per il Client progetto all'inizio del file:@using BlazorHosted.Client
Aggiornare i collegamenti del foglio di stile in modo che puntino ai fogli di stile del progetto WebAssembly. Nell'esempio seguente lo spazio dei nomi del progetto client è
BlazorHosted.Client
. Il{APP NAMESPACE}
segnaposto rappresenta lo spazio dei nomi dell'app donatore che ha fornito il_Layout.cshtml
file. Aggiornare l'helper tag del componente (<component>
tag) per il componente per eseguire ilHeadOutlet
pre-riavvio del componente.Eliminazione:
- <link href="css/site.css" rel="stylesheet" /> - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" /> - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Aggiungi:
<link href="css/app.css" rel="stylesheet" /> <link href="BlazorHosted.Client.styles.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Nota
Lasciare l'elemento
<link>
che richiede il foglio di stile Bootstrap (css/bootstrap/bootstrap.min.css
) sul posto.Aggiornare l'origine Blazor script per usare lo script sul lato Blazor WebAssembly client:
Eliminazione:
- <script src="_framework/blazor.server.js"></script>
Aggiungi:
<script src="_framework/blazor.webassembly.js"></script>
Nel file
_Host.cshtml
:Modificare lo
Pages
spazio dei nomi in quello del Client progetto. Il{APP NAMESPACE}
segnaposto rappresenta lo spazio dei nomi delle pagine dell'app donatore che ha fornito il_Host.cshtml
file:Eliminazione:
- @namespace {APP NAMESPACE}.Pages
Aggiungi:
@namespace BlazorHosted.Client
Aggiornare l'oggetto dell'helper
render-mode
tag del componente per prerendere il componente radiceApp
con WebAssemblyPrerendered:Eliminazione:
- <component type="typeof(App)" render-mode="ServerPrerendered" />
Aggiungi:
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Importante
Il prerendering non è supportato per gli endpoint di autenticazione (
/authentication/
segmento di percorso). Per altre informazioni, vedere Scenari di sicurezza aggiuntivi per ASP.NET Core Blazor WebAssembly.
Nel mapping dell'endpoint del Server progetto in
Program.cs
modificare il fallback dalindex.html
file alla_Host.cshtml
pagina:Eliminazione:
- app.MapFallbackToFile("index.html");
Aggiungi:
app.MapFallbackToPage("/_Host");
Se i Client progetti e Server usano uno o più servizi comuni durante la pre-esecuzione del provisioning, considerare le registrazioni del servizio in un metodo che può essere chiamato da entrambi i progetti. Per altre informazioni, vedere ASP.NET Core Blazor dependency injection.
Eseguire il Server progetto. L'app ospitata Blazor WebAssembly viene prerenderata dal Server progetto per i client.
Configurazione per l'incorporamento di Razor componenti in pagine e visualizzazioni
Le sezioni e gli esempi seguenti per l'incorporamento di Razor componenti dall'app ClientBlazor WebAssembly in pagine e visualizzazioni dell'app server richiedono una configurazione aggiuntiva.
Il Server progetto deve avere i file e le cartelle seguenti.
Razor Pagine:
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
Importante
L'uso di una pagina di layout (_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare <head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.
I file precedenti possono essere ottenuti generando un'app dai modelli di progetto ASP.NET Core usando:
- Nuovi strumenti di creazione del progetto di Visual Studio.
- Apertura di una shell dei comandi ed esecuzione
dotnet new webapp -o {PROJECT NAME}
(Razor Pages) odotnet new mvc -o {PROJECT NAME}
(MVC). L'opzione-o|--output
con un valore per il{PROJECT NAME}
segnaposto fornisce un nome per l'app e crea una cartella per l'app.
Aggiornare gli spazi dei nomi nel file importato _ViewImports.cshtml
in modo che corrispondano a quelli in uso dal Server progetto che riceve i file.
Pages/_ViewImports.cshtml
(Razor Pagine):
@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
Aggiornare il file di layout importato, ovvero Pages/Shared/_Layout.cshtml
per Razor Pages o Views/Shared/_Layout.cshtml
per MVC.
Prima di tutto, eliminare il titolo e il foglio di stile dal progetto donatore, che si trova RPDonor.styles.css
nell'esempio seguente. Il {PROJECT NAME}
segnaposto rappresenta il nome dell'app del progetto di donatore.
- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />
Includere gli Client stili del progetto nel file di layout. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
. L'elemento <title>
può essere aggiornato contemporaneamente.
Inserire le righe seguenti nel <head>
contenuto del file di layout:
<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" />
Il layout importato contiene due Home
(Index
pagina) e Privacy
collegamenti di spostamento. Per fare in modo che i Home
collegamenti puntino all'app ospitata Blazor WebAssembly , modificare i collegamenti ipertestuali:
- <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>
In un file di layout 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>
Aggiornare il <footer>
nome dell'app dell'elemento. L'esempio seguente usa il nome BlazorHosted
dell'app :
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>
Nell'esempio precedente il {DATE}
segnaposto rappresenta la data di copyright in un'app generata dal Razor modello di progetto Pages o MVC.
Per fare in modo che il Privacy
collegamento conduca a una pagina di privacy (Razor Pagine), aggiungere una pagina di privacy al Server progetto.
Pages/Privacy.cshtml
nel Server progetto:
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Per una visualizzazione della privacy basata su MVC, creare una visualizzazione della privacy nel Server progetto.
View/Home/Privacy.cshtml
nel Server progetto:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Home
Nel controller dell'app MVC restituire la visualizzazione.
Aggiungere il codice seguente a Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Se si importano file da un'app donatore, assicurarsi di aggiornare gli spazi dei nomi nei file in modo che corrispondano a quello del Server progetto (ad esempio, BlazorHosted.Server
).
Importare asset statici nel Server progetto dalla cartella del wwwroot
progetto di donatore:
wwwroot/css
cartella e contenutowwwroot/js
cartella e contenutowwwroot/lib
cartella e contenuto
Se il progetto di donatore viene creato da un modello di progetto ASP.NET Core e i file non vengono modificati, è possibile copiare l'intera wwwroot
cartella dal progetto donatore nel Server progetto e rimuovere il favicon file icona.
Avviso
Evitare di inserire l'asset statico in entrambe le Client cartelle e Server wwwroot
. Se lo stesso file è presente in entrambe le cartelle, viene generata un'eccezione perché l'asset statico in ogni cartella condivide lo stesso percorso radice Web. Pertanto, ospitare un asset statico in entrambe le wwwroot
cartelle, non entrambi.
Dopo aver adottato la configurazione precedente, incorporare Razor i componenti in pagine o visualizzazioni del Server progetto. Usare le linee guida nelle sezioni seguenti di questo articolo:
- Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente
- Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS
Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente
Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, l'helper tag componente supporta due modalità di rendering per il rendering di un componente da un'app Blazor WebAssembly in una pagina o in una visualizzazione:
Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter
componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina. Per evitare di usare lo spazio dei nomi completo per il Counter
componente con l'helper tag del componente ({ASSEMBLY NAME}.Pages.Counter
), aggiungere una @using
direttiva per lo spazio dei nomi del Pages
progetto client. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
.
Nel progetto 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>
}
Eseguire il Server progetto. Passare alla Razor pagina in /razorpagescounter1
. Il componente pre-predefinito Counter
è incorporato nella pagina.
RenderMode configura se il componente:
- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts
una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head>
layout.
Impostare il contenuto figlio tramite un frammento di rendering
L'helper tag del componente non supporta la ricezione di un delegato per il RenderFragment
contenuto figlio , ad esempio param-ChildContent="..."
. È consigliabile creare un Razor componente (.razor
) che faccia riferimento al componente di cui si vuole eseguire il rendering con il contenuto figlio da passare e quindi richiamare il Razor componente dalla pagina o dalla visualizzazione.
Assicurarsi che i componenti prerenderati di primo livello non vengano eliminati durante la pubblicazione
Se un helper tag componente fa direttamente riferimento a un componente da una libreria soggetta a taglio durante la pubblicazione, il componente potrebbe essere eliminato durante la pubblicazione perché non vi sono riferimenti dal codice dell'app sul lato client. Di conseguenza, il componente non viene prerenderato, lasciando un punto vuoto nell'output. In questo caso, indicare al trimmer di mantenere il componente di libreria aggiungendo un DynamicDependency
attributo a qualsiasi classe nell'app lato client. Per mantenere un componente denominato SomeLibraryComponentToBePreserved
, aggiungere quanto segue a qualsiasi componente:
@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All,
typeof(SomeLibraryComponentToBePreserved))]
L'approccio precedente in genere non è necessario perché nella maggior parte dei casi l'app esegue il pre-riavvio dei relativi componenti (che non vengono tagliati), che a sua volta fa riferimento ai componenti dalle librerie (causando anche il mancato taglio). Usare DynamicDependency
in modo esplicito solo per la pre-gestione diretta di un componente di libreria quando la libreria è soggetta a taglio.
Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS
Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, aggiungere i componenti radice al Client progetto di una soluzione ospitata Blazor WebAssembly nel Program.cs
file. Nell'esempio seguente il Counter
componente viene dichiarato come componente radice con un selettore CSS che seleziona l'elemento con l'oggetto id
corrispondente counter-component
a . Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
.
Nel Program.cs
file del Client progetto aggiungere lo spazio dei nomi per i componenti del Razor progetto all'inizio del file:
using BlazorHosted.Client.Pages;
Dopo aver stabilito in builder
Program.cs
, aggiungere il Counter
componente come componente radice:
builder.RootComponents.Add<Counter>("#counter-component");
Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter
componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina.
Nel progetto Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Eseguire il Server progetto. Passare alla Razor pagina in /razorpagescounter2
. Il componente pre-predefinito Counter
è incorporato nella pagina.
Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts
una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head>
layout.
Nota
L'esempio precedente genera un'eccezione JSException se un'app Blazor WebAssembly viene prerenderata e integrata in un'app Razor Pages o MVC contemporaneamente con l'uso di un selettore CSS. Passare a uno dei Client componenti del Razor progetto o passare a una pagina o a una visualizzazione di Server con un componente incorporato genera uno o più JSExceptionelementi .
Questo comportamento è normale perché il prerendering e l'integrazione di un'app Blazor WebAssembly con componenti instradabili Razor non è compatibile con l'uso di selettori CSS.
Se si lavora con gli esempi nelle sezioni precedenti e si vuole semplicemente visualizzare il lavoro del selettore CSS nell'app di esempio, impostare come commento la specifica del App
componente radice del Client file del Program.cs
progetto:
- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");
Passare alla pagina o alla visualizzazione con il componente incorporato Razor che usa un selettore CSS( ad esempio, /razorpagescounter2
dell'esempio precedente). La pagina o la visualizzazione viene caricata con il componente incorporato e il componente incorporato funziona come previsto.
Razor i componenti possono essere integrati nelle Razor app Pages e MVC. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Dopo aver configurato il progetto, usare le indicazioni riportate nelle sezioni seguenti in base ai requisiti del progetto:
- Componenti instradabili: per i componenti direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando i visitatori devono essere in grado di effettuare una richiesta HTTP nel browser per un componente con una
@page
direttiva . - Eseguire il rendering dei componenti da una pagina o da una vista: per i componenti che non sono direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando l'app incorpora i componenti in pagine e visualizzazioni esistenti con l'helper tag del componente.
Impostazione
Usare le indicazioni seguenti per integrare Razor componenti in pagine e visualizzazioni di un'app Pages o MVC esistente Razor .
Importante
L'uso di una pagina di layout (_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare <head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.
Nel file di layout del progetto:
Aggiungere il tag e HeadOutlet l'helper tag del componente seguenti
<base>
all'elemento<head>
inPages/Shared/_Layout.cshtml
(Razor Pages) oViews/Shared/_Layout.cshtml
(MVC):<base href="~/" /> <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Il
href
valore (percorso di base dell'app) nell'esempio precedente presuppone che l'app risieda nel percorso URL radice (/
). Se l'app è un'applicazione secondaria, seguire le indicazioni nella sezione Percorso di base dell'app dell'articolo Host e distribuire ASP.NET Core Blazor .Il componente viene usato per eseguire il HeadOutlet rendering del contenuto head (
<head>
) per i titoli di pagina (PageTitle componente) e altri elementi head (HeadContent componente) impostati dai Razor componenti. Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.Aggiungere un
<script>
tag per loblazor.server.js
script immediatamente prima dellaScripts
sezione di rendering (@await RenderSectionAsync(...)
) nel layout dell'app.Pages/Shared/_Layout.cshtml
(Razor Pages) oViews/Shared/_Layout.cshtml
(MVC):<script src="_framework/blazor.server.js"></script>
Il framework aggiunge lo
blazor.server.js
script all'app. Non è necessario aggiungere manualmente unblazor.server.js
file di script all'app.
Aggiungere un file imports alla cartella radice del progetto con il contenuto seguente. Modificare il
{APP NAMESPACE}
segnaposto nello spazio dei nomi del progetto._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}
Registrare i Blazor Server servizi in
Program.cs
cui sono registrati i servizi:builder.Services.AddServerSideBlazor();
Aggiungere l'endpoint Blazor hub agli endpoint di
Program.cs
dove vengono mappate le route.Inserire la riga seguente dopo la chiamata a
MapRazorPages
(Razor Pages) oMapControllerRoute
(MVC):app.MapBlazorHub();
Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un
Counter
componente alla cartella delShared
progetto.Pages/Shared/Counter.razor
(Razor Pages) oViews/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 Pagine:
Nella pagina del progetto di
Index
un'app Razor Pages aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella pagina. Quando laIndex
pagina viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
MVC:
Nella visualizzazione del progetto di
Index
un'app MVC aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella visualizzazione. Quando laIndex
visualizzazione viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
Per altre informazioni, vedere la sezione Componenti di rendering da una pagina o una vista .
Usare i componenti instradabili in un'app Razor Pages
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare i componenti instradabili Razor nelle Razor app Pages:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Aggiungere una
_Host
pagina al progetto con il contenuto seguente.Pages/_Host.cshtml
:@page "/blazor" @namespace {APP NAMESPACE}.Pages.Shared @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = "_Layout"; } <component type="typeof(App)" render-mode="ServerPrerendered" />
In questo scenario, i componenti usano il file condiviso
_Layout.cshtml
per il relativo layout.Importante
L'uso di una pagina di layout (
_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare<head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Program.cs
Negli endpoint aggiungere una route con priorità bassa per la_Host
pagina come ultimo endpoint:app.MapFallbackToPage("/_Host");
Aggiungere componenti instradabili al progetto. L'esempio seguente è un
RoutableCounter
componente basato sulCounter
componente nei modelli di Blazor progetto.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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Usare i componenti instradabili in un'app MVC
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare componenti instradabili Razor nelle app MVC:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Aggiungere una
_Host
visualizzazione al progetto con il contenuto seguente.Views/Home/_Host.cshtml
:@namespace {APP NAMESPACE}.Views.Shared @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = "_Layout"; } <component type="typeof(App)" render-mode="ServerPrerendered" />
I componenti usano il file condiviso
_Layout.cshtml
per il layout.Importante
L'uso di una pagina di layout (
_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare<head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Aggiungere un'azione al Home controller.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Program.cs
Negli endpoint aggiungere una route con priorità bassa per l'azione del controller che restituisce la_Host
visualizzazione:app.MapFallbackToController("Blazor", "Home");
Creare una
Pages
cartella nell'app MVC e aggiungere componenti instradabili. L'esempio seguente è unRoutableCounter
componente basato sulCounter
componente nei modelli di Blazor progetto.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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Eseguire il rendering dei componenti da una pagina o una vista
Questa sezione riguarda l'aggiunta di componenti a pagine o visualizzazioni, in cui i componenti non sono direttamente instradabili dalle richieste utente.
Per eseguire il rendering di un componente da una pagina o da una visualizzazione, usare l'helper tag del componente.
Eseguire il rendering di componenti interattivi con stato
I componenti interattivi con stato possono essere aggiunti a una pagina o a una Razor visualizzazione.
Quando viene eseguito il rendering della pagina o della visualizzazione:
- Il componente viene prerenderato con la pagina o la visualizzazione.
- Lo stato del componente iniziale usato per la pre-esecuzione del pre-riavvio viene perso.
- Quando viene stabilita la connessione, viene creato un nuovo stato del SignalR componente.
La pagina seguente Razor esegue il rendering di un Counter
componente:
<h1>Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Importante
L'uso di una pagina di layout (_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare <head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.
Eseguire il rendering di componenti non interattivi
Nella pagina seguente Razor il rendering del Counter
componente viene eseguito in modo statico con un valore iniziale specificato usando un modulo. Poiché il rendering del componente viene eseguito in modo statico, il componente non è interattivo:
<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; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Importante
L'uso di una pagina di layout (_Layout.cshtml
) con un helper tag componente per un HeadOutlet componente è necessario per controllare <head>
il contenuto, ad esempio il titolo della pagina (PageTitle componente) e altri elementi head (HeadContent componente). Per altre informazioni, vedere Controllare il contenuto head nelle app ASP.NET CoreBlazor.
Spazi dei nomi dei componenti
Quando si usa una cartella personalizzata per contenere i componenti del Razor progetto, aggiungere lo spazio dei nomi che rappresenta la cartella alla pagina/visualizzazione o al _ViewImports.cshtml
file. Nell'esempio seguente :
- I componenti vengono archiviati nella
Components
cartella del progetto. - Il
{APP NAMESPACE}
segnaposto è lo spazio dei nomi del progetto.Components
rappresenta il nome della cartella.
@using {APP NAMESPACE}.Components
Il _ViewImports.cshtml
file si trova nella Pages
cartella di un'app Razor Pages o nella Views
cartella di un'app MVC.
Per altre informazioni, vedere ASP.NET Componenti di baseRazor.
Mantenere lo stato prerenderato
Senza rendere persistente lo stato prerenderato, lo stato usato durante il prerendering viene perso e deve essere ricreato quando l'app viene completamente caricata. Se uno stato è configurato in modo asincrono, l'interfaccia utente potrebbe sfarfalliare perché l'interfaccia utente prerisorsa viene sostituita con segnaposto temporaneo e quindi nuovamente sottoposto a rendering completo.
Per risolvere questi problemi, Blazor supporta la persistenza dello stato in una pagina prerenderata usando l'helper Persist Component State Tag . Aggiungere il tag dell'helper tag, <persist-component-state />
, all'interno del tag di chiusura </body>
.
Pages/_Layout.cshtml
:
<body>
...
<persist-component-state />
</body>
Decidere quale stato rendere persistente usando il PersistentComponentState servizio. PersistentComponentState.RegisterOnPersisting
registra un callback per rendere persistente lo stato del componente prima che l'app venga sospesa. Lo stato viene recuperato quando l'applicazione riprende.
L'esempio seguente è una versione aggiornata del FetchData
componente in un'app ospitata Blazor WebAssembly in base al modello di Blazor progetto. Il WeatherForecastPreserveState
componente mantiene lo stato delle previsioni meteo durante la pre-esecuzione del servizio e quindi recupera lo stato per inizializzare il componente. L'helper Persist Component State Tag mantiene lo stato del componente dopo tutte le chiamate al componente.
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();
}
}
Inizializzando i componenti con lo stesso stato usato durante la pre-esecuzione, tutti i passaggi di inizializzazione costosi vengono eseguiti una sola volta. L'interfaccia utente sottoposta a rendering corrisponde anche all'interfaccia utente prerisorsa, quindi non si verifica alcun sfarfallio nel browser.
Risorse aggiuntive Blazor WebAssembly
- Gestione dello stato: Gestire la pre-gestione
- Supporto di pre-gestione con caricamento differita dell'assembly
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Inizializzazione dei componenti (
OnInitialized{Async}
) - Dopo il rendering del componente (
OnAfterRender{Async}
) - Riconnessione con stato dopo il prerendering: anche se il contenuto della sezione è incentrato sulla riconnessione con stato e sulla Blazor Server riconnessione conSignalR stato, lo scenario per la prerendering nelle app ospitate Blazor WebAssembly (WebAssemblyPrerendered) prevede condizioni e approcci simili per impedire l'esecuzione del codice dello sviluppatore due volte. Per mantenere lo stato durante l'esecuzione del codice di inizializzazione durante la pre-gestione, vedere la sezione Rendere persistente lo stato prerenderato di questo articolo.
- Prerendering con interoperabilità JavaScript
- Inizializzazione dei componenti (
- Soggetti di autenticazione e autorizzazione che riguardano il prerendering
- Ospitare e distribuire: Blazor WebAssembly
Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi
Una dimensione dello stato prerendered di grandi dimensioni può superare il limite di dimensioni del messaggio del SignalR circuito, il che comporta quanto segue:
- L'inizializzazione del SignalR circuito non riesce con un errore nel client: Circuit host not initialized.
- L'interfaccia utente di riconnessione nel client viene visualizzata quando il circuito ha esito negativo. Il ripristino non è possibile.
Per risolvere il problema, usare uno degli approcci seguenti:
- Ridurre la quantità di dati inseriti nello stato pre-temporaneo.
- Aumentare il limite di dimensioni del SignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).
Risorse aggiuntive Blazor Server
- Gestione dello stato: Gestire la pre-gestione
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Autenticazione e autorizzazione: aspetti generali
- Gestire gli errori: Prerendering
- Ospitare e distribuire: Blazor Server
- Mitigazione delle minacce: scripting tra siti (XSS)
Razori componenti possono essere integrati nelle Razor app Pages e MVC in una soluzione ospitataBlazor WebAssembly. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Configurazione della soluzione
Prerendering della configurazione
Per configurare la prerendering per un'app ospitata Blazor WebAssembly :
Ospitare l'app Blazor WebAssembly in un'app ASP.NET Core. Un'app autonoma Blazor WebAssembly può essere aggiunta a una soluzione ASP.NET Core oppure è possibile usare un'app ospitata Blazor WebAssembly creata dal Blazor WebAssembly modello di progetto con l'opzione ospitata:
- Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata
BlazorHosted
. - Shell dei comandi dell'interfaccia della riga di comando di Visual Studio Code/.NET:
dotnet new blazorwasm -ho
(usare l'opzione-ho|--hosted
). Usare l'opzione-o|--output {LOCATION}
per creare una cartella per la soluzione e impostare gli spazi dei nomi del progetto della soluzione. Negli esempi di questo articolo la soluzione è denominataBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Per gli esempi in questo articolo, lo spazio dei nomi del progetto client è
BlazorHosted.Client
e lo spazio dei nomi del progetto server èBlazorHosted.Server
.- Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata
Eliminare il
wwwroot/index.html
file dal Blazor WebAssemblyClient progetto.Client Nel progetto eliminare la riga seguente in
Program.cs
:- builder.RootComponents.Add<App>("#app");
Aggiungere un
Pages/_Host.cshtml
file alla Server cartella delPages
progetto. È possibile ottenere un_Host.cshtml
file da un progetto creato dal Blazor Server modello con ildotnet new blazorserver -o BlazorServer
comando in una shell dei comandi (l'opzione-o BlazorServer
crea una cartella per il progetto). Dopo aver inserito ilPages/_Host.cshtml
file nel Server progetto della soluzione ospitata Blazor WebAssembly , apportare le modifiche seguenti al file:Specificare una
@using
direttiva per il Client progetto , ad esempio@using BlazorHosted.Client
.Aggiornare i collegamenti del foglio di stile in modo che puntino ai fogli di stile del progetto WebAssembly. Nell'esempio seguente lo spazio dei nomi del progetto client è
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" />
Nota
Lasciare l'elemento
<link>
che richiede il foglio di stile Bootstrap (css/bootstrap/bootstrap.min.css
) sul posto.Aggiornare l'oggetto dell'helper
render-mode
tag del componente per prerendere il componente radiceApp
con WebAssemblyPrerendered:- <component type="typeof(App)" render-mode="ServerPrerendered" /> + <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Aggiornare l'origine Blazor script per usare lo script sul lato Blazor WebAssembly client:
- <script src="_framework/blazor.server.js"></script> + <script src="_framework/blazor.webassembly.js"></script>
In
Startup.Configure
del Server progetto modificare il fallback dalindex.html
file alla_Host.cshtml
pagina.Startup.cs
:- endpoints.MapFallbackToFile("index.html"); + endpoints.MapFallbackToPage("/_Host");
Se i Client progetti e Server usano uno o più servizi comuni durante la pre-esecuzione del provisioning, considerare le registrazioni del servizio in un metodo che può essere chiamato da entrambi i progetti. Per altre informazioni, vedere ASP.NET Core Blazor dependency injection.
Eseguire il Server progetto. L'app ospitata Blazor WebAssembly viene prerenderata dal Server progetto per i client.
Configurazione per l'incorporamento di Razor componenti in pagine e visualizzazioni
Le sezioni e gli esempi seguenti in questo articolo per l'incorporamento Razor di componenti dell'app client Blazor WebAssembly in pagine e visualizzazioni dell'app server richiedono una configurazione aggiuntiva.
Usare un file di layout MVC o Pages predefinito Razor nel Server progetto. Il Server progetto deve avere i file e le cartelle seguenti.
Razor Pagine:
Pages/Shared/_Layout.cshtml
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC:
Views/Shared/_Layout.cshtml
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
Ottenere i file precedenti da un'app creata dal modello di Razor progetto Pages o MVC. Per altre informazioni, vedere Esercitazione: Introduzione alle Razor pagine in ASP.NET Core o Introduzione a ASP.NET Core MVC.
Aggiornare gli spazi dei nomi nel file importato _ViewImports.cshtml
in modo che corrispondano a quelli in uso dal Server progetto che riceve i file.
Aggiornare il file di layout importato (_Layout.cshtml
) per includere gli Client stili del progetto. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
. L'elemento <title>
può essere aggiornato contemporaneamente.
Pages/Shared/_Layout.cshtml
(Razor Pages) o 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>
Il layout importato contiene Home
collegamenti di spostamento e Privacy
. Per impostare il Home
punto di collegamento all'app ospitata Blazor WebAssembly , modificare il collegamento ipertestuale:
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
In un file di layout 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>
Per fare in modo che il Privacy
collegamento conduca a una pagina di privacy, aggiungere una pagina di privacy al Server progetto.
Pages/Privacy.cshtml
nel Server progetto:
@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}
<h1>Privacy Policy</h1>
Se si preferisce una visualizzazione della privacy basata su MVC, creare una visualizzazione della privacy nel Server progetto.
View/Home/Privacy.cshtml
:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
Home
Nel controller restituire la visualizzazione.
Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Importare asset statici nel Server progetto dalla cartella del wwwroot
progetto di donatore:
wwwroot/css
cartella e contenutowwwroot/js
cartella e contenutowwwroot/lib
cartella e contenuto
Se il progetto di donatore viene creato da un modello di progetto ASP.NET Core e i file non vengono modificati, è possibile copiare l'intera wwwroot
cartella dal progetto donatore nel Server progetto e rimuovere il favicon file icona.
Avviso
Evitare di inserire l'asset statico in entrambe le Client cartelle e Server wwwroot
. Se lo stesso file è presente in entrambe le cartelle, viene generata un'eccezione perché l'asset statico in ogni cartella condivide lo stesso percorso radice Web. Pertanto, ospitare un asset statico in entrambe le wwwroot
cartelle, non entrambi.
Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente
Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, l'helper tag componente supporta due modalità di rendering per il rendering di un componente da un'app Blazor WebAssembly in una pagina o in una visualizzazione:
Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter
componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina. Per evitare di usare lo spazio dei nomi completo per il Counter
componente con l'helper tag del componente ({ASSEMBLY NAME}.Pages.Counter
), aggiungere una @using
direttiva per lo spazio dei nomi del Pages
progetto client. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
.
Nel progetto 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>
}
Eseguire il Server progetto. Passare alla Razor pagina in /razorpagescounter1
. Il componente pre-predefinito Counter
è incorporato nella pagina.
RenderMode configura se il componente:
- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts
una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head>
layout.
Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS
Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, aggiungere i componenti radice al Client progetto di una soluzione ospitata Blazor WebAssembly in Program.cs
. Nell'esempio seguente il Counter
componente viene dichiarato come componente radice con un selettore CSS che seleziona l'elemento con l'oggetto id
corrispondente counter-component
a . Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client
.
In Program.cs
del Client progetto aggiungere lo spazio dei nomi per i componenti del Razor progetto all'inizio del file:
using BlazorHosted.Client.Pages;
Dopo aver stabilito in builder
Program.cs
, aggiungere il Counter
componente come componente radice:
builder.RootComponents.Add<Counter>("#counter-component");
Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter
componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina.
Nel progetto Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Eseguire il Server progetto. Passare alla Razor pagina in /razorpagescounter2
. Il componente pre-predefinito Counter
è incorporato nella pagina.
Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts
una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head>
layout.
Nota
L'esempio precedente genera un'eccezione JSException se un'app Blazor WebAssembly viene prerenderata e integrata in un'app Razor Pages o MVC contemporaneamente con un selettore CSS. Passando a uno dei Client componenti del Razor progetto, viene generata l'eccezione seguente:
Microsoft.JSInteroperabilità.JSEccezione: non è stato possibile trovare alcun selettore corrispondente all'elemento '#counter-component'.
Questo comportamento è normale perché il prerendering e l'integrazione di un'app Blazor WebAssembly con componenti instradabili Razor non è compatibile con l'uso di selettori CSS.
Razor i componenti possono essere integrati nelle Razor app Pages e MVC. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Dopo aver configurato il progetto, usare le indicazioni riportate nelle sezioni seguenti in base ai requisiti del progetto:
- Componenti instradabili: per i componenti direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando i visitatori devono essere in grado di effettuare una richiesta HTTP nel browser per un componente con una
@page
direttiva . - Eseguire il rendering dei componenti da una pagina o da una vista: per i componenti che non sono direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando l'app incorpora i componenti in pagine e visualizzazioni esistenti con l'helper tag del componente.
Impostazione
Un'app Pages o MVC esistente Razor può integrare Razor componenti in pagine e visualizzazioni:
Nel file di layout del progetto:
Aggiungere il tag seguente
<base>
all'elemento<head>
inPages/Shared/_Layout.cshtml
(Razor Pages) oViews/Shared/_Layout.cshtml
(MVC):<base href="~/" />
Il
href
valore (percorso di base dell'app) nell'esempio precedente presuppone che l'app risieda nel percorso URL radice (/
). Se l'app è un'applicazione secondaria, seguire le indicazioni nella sezione Percorso di base dell'app dell'articolo Host e distribuire ASP.NET Core Blazor .Aggiungere un
<script>
tag per loblazor.server.js
script immediatamente prima dellaScripts
sezione di rendering.Pages/Shared/_Layout.cshtml
(Razor Pages) oViews/Shared/_Layout.cshtml
(MVC):... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
Il framework aggiunge lo
blazor.server.js
script all'app. Non è necessario aggiungere manualmente unblazor.server.js
file di script all'app.
Aggiungere un file imports alla cartella radice del progetto con il contenuto seguente. Modificare il
{APP NAMESPACE}
segnaposto nello spazio dei nomi del progetto._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}
Registrare il Blazor Server servizio in
Startup.ConfigureServices
.In
Startup.cs
:services.AddServerSideBlazor();
Aggiungere l'endpoint Blazor hub agli endpoint (
app.UseEndpoints
) diStartup.Configure
.Startup.cs
:endpoints.MapBlazorHub();
Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un
Counter
componente alla cartella delShared
progetto.Pages/Shared/Counter.razor
(Razor Pages) oViews/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 Pagine:
Nella pagina del progetto di
Index
un'app Razor Pages aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella pagina. Quando laIndex
pagina viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Nell'esempio precedente sostituire il
{APP NAMESPACE}
segnaposto con lo spazio dei nomi dell'app.MVC:
Nella visualizzazione del progetto di
Index
un'app MVC aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella visualizzazione. Quando laIndex
visualizzazione viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Per altre informazioni, vedere la sezione Componenti di rendering da una pagina o una vista .
Usare i componenti instradabili in un'app Razor Pages
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare i componenti instradabili Razor nelle Razor app Pages:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Nota
Con la versione di ASP.NET Core 5.0.1 e per eventuali versioni 5.x aggiuntive, il componente
Router
include il parametroPreferExactMatches
impostato su@true
. Per altre informazioni, vedere Eseguire la migrazione da ASP.NET Core 3.1 a 5.0.Aggiungere una
_Host
pagina al progetto con il contenuto seguente.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
I componenti usano il file condiviso
_Layout.cshtml
per il layout.RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Startup.Configure
Negli endpoint diStartup.cs
aggiungere una route con priorità bassa per la_Host
pagina come ultimo endpoint:endpoints.MapFallbackToPage("/_Host");
L'esempio seguente mostra la riga aggiunta nella configurazione dell'endpoint di un'app tipica:
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
Aggiungere componenti instradabili al progetto.
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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Usare i componenti instradabili in un'app MVC
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare componenti instradabili Razor nelle app MVC:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Nota
Con la versione di ASP.NET Core 5.0.1 e per eventuali versioni 5.x aggiuntive, il componente
Router
include il parametroPreferExactMatches
impostato su@true
. Per altre informazioni, vedere Eseguire la migrazione da ASP.NET Core 3.1 a 5.0.Aggiungere una
_Host
visualizzazione al progetto con il contenuto seguente.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
I componenti usano il file condiviso
_Layout.cshtml
per il layout.RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Aggiungere un'azione al Home controller.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Startup.Configure
Negli endpoint diStartup.cs
aggiungere una route con priorità bassa per l'azione del controller che restituisce la_Host
visualizzazione:endpoints.MapFallbackToController("Blazor", "Home");
L'esempio seguente mostra la riga aggiunta nella configurazione dell'endpoint di un'app tipica:
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
Aggiungere componenti instradabili al progetto.
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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Eseguire il rendering dei componenti da una pagina o una vista
Questa sezione riguarda l'aggiunta di componenti a pagine o visualizzazioni, in cui i componenti non sono direttamente instradabili dalle richieste utente.
Per eseguire il rendering di un componente da una pagina o da una visualizzazione, usare l'helper tag del componente.
Eseguire il rendering di componenti interattivi con stato
I componenti interattivi con stato possono essere aggiunti a una pagina o a una Razor visualizzazione.
Quando viene eseguito il rendering della pagina o della visualizzazione:
- Il componente viene prerenderato con la pagina o la visualizzazione.
- Lo stato del componente iniziale usato per la pre-esecuzione del pre-riavvio viene perso.
- Quando viene stabilita la connessione, viene creato un nuovo stato del SignalR componente.
La pagina seguente Razor esegue il rendering di un Counter
componente:
<h1>My Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Eseguire il rendering di componenti non interattivi
Nella pagina seguente Razor il rendering del Counter
componente viene eseguito in modo statico con un valore iniziale specificato usando un modulo. Poiché il rendering del componente viene eseguito in modo statico, il componente non è interattivo:
<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; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Spazi dei nomi dei componenti
Quando si usa una cartella personalizzata per contenere i componenti del Razor progetto, aggiungere lo spazio dei nomi che rappresenta la cartella alla pagina/visualizzazione o al _ViewImports.cshtml
file. Nell'esempio seguente :
- I componenti vengono archiviati nella
Components
cartella del progetto. - Il
{APP NAMESPACE}
segnaposto è lo spazio dei nomi del progetto.Components
rappresenta il nome della cartella.
@using {APP NAMESPACE}.Components
Il _ViewImports.cshtml
file si trova nella Pages
cartella di un'app Razor Pages o nella Views
cartella di un'app MVC.
Per altre informazioni, vedere ASP.NET Componenti di baseRazor.
Risorse aggiuntive Blazor WebAssembly
- Gestione dello stato: Gestire la pre-gestione
- Supporto di pre-gestione con caricamento differita dell'assembly
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Inizializzazione dei componenti (
OnInitialized{Async}
) - Dopo il rendering del componente (
OnAfterRender{Async}
) - Riconnessione con stato dopo il prerendering: anche se il contenuto della sezione è incentrato sulla riconnessione con stato e sulla Blazor Server riconnessione conSignalR stato, lo scenario per la prerendering nelle app ospitate Blazor WebAssembly (WebAssemblyPrerendered) prevede condizioni e approcci simili per impedire l'esecuzione del codice dello sviluppatore due volte. Per mantenere lo stato durante l'esecuzione del codice di inizializzazione durante la pre-gestione, vedere la sezione Rendere persistente lo stato prerenderato di questo articolo.
- Prerendering con interoperabilità JavaScript
- Inizializzazione dei componenti (
- Soggetti di autenticazione e autorizzazione che riguardano il prerendering
- Ospitare e distribuire: Blazor WebAssembly
Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi
Una dimensione dello stato prerendered di grandi dimensioni può superare il limite di dimensioni del messaggio del SignalR circuito, il che comporta quanto segue:
- L'inizializzazione del SignalR circuito non riesce con un errore nel client: Circuit host not initialized.
- L'interfaccia utente di riconnessione nel client viene visualizzata quando il circuito ha esito negativo. Il ripristino non è possibile.
Per risolvere il problema, usare uno degli approcci seguenti:
- Ridurre la quantità di dati inseriti nello stato pre-temporaneo.
- Aumentare il limite di dimensioni del SignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).
Risorse aggiuntive Blazor Server
- Gestione dello stato: Gestire la pre-gestione
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Autenticazione e autorizzazione: aspetti generali
- Gestire gli errori: Prerendering
- Ospitare e distribuire: Blazor Server
- Mitigazione delle minacce: scripting tra siti (XSS)
L'integrazione di Razor componenti nelle Razor app Pages e MVC in una soluzione ospitata Blazor WebAssemblyè supportata in ASP.NET Core in .NET 5 o versione successiva. Selezionare una versione .NET 5 o successiva di questo articolo.
Razor i componenti possono essere integrati nelle Razor app Pages e MVC. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.
Il prerendering può migliorare l'ottimizzazione del motore di ricerca (SEO) eseguendo il rendering del contenuto per la risposta HTTP iniziale che i motori di ricerca possono usare per calcolare la classificazione delle pagine.
Dopo aver configurato il progetto, usare le indicazioni riportate nelle sezioni seguenti in base ai requisiti del progetto:
- Componenti instradabili: per i componenti direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando i visitatori devono essere in grado di effettuare una richiesta HTTP nel browser per un componente con una
@page
direttiva . - Eseguire il rendering dei componenti da una pagina o da una vista: per i componenti che non sono direttamente instradabili dalle richieste utente. Seguire queste indicazioni quando l'app incorpora i componenti in pagine e visualizzazioni esistenti con l'helper tag del componente.
Impostazione
Un'app Pages o MVC esistente Razor può integrare Razor componenti in pagine e visualizzazioni:
Nel file di layout del progetto:
Aggiungere il tag seguente
<base>
all'elemento<head>
inPages/Shared/_Layout.cshtml
(Razor Pages) oViews/Shared/_Layout.cshtml
(MVC):+ <base href="~/" />
Il
href
valore (percorso di base dell'app) nell'esempio precedente presuppone che l'app risieda nel percorso URL radice (/
). Se l'app è un'applicazione secondaria, seguire le indicazioni nella sezione Percorso di base dell'app dell'articolo Host e distribuire ASP.NET Core Blazor .Aggiungere un
<script>
tag per loblazor.server.js
script immediatamente prima dellaScripts
sezione di rendering.Pages/Shared/_Layout.cshtml
(Razor Pages) oViews/Shared/_Layout.cshtml
(MVC):... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
Il framework aggiunge lo
blazor.server.js
script all'app. Non è necessario aggiungere manualmente unblazor.server.js
file di script all'app.
Aggiungere un file imports alla cartella radice del progetto con il contenuto seguente. Modificare il
{APP NAMESPACE}
segnaposto nello spazio dei nomi del progetto._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}
Registrare il Blazor Server servizio in
Startup.ConfigureServices
.Startup.cs
:services.AddServerSideBlazor();
Aggiungere l'endpoint Blazor hub agli endpoint (
app.UseEndpoints
) diStartup.Configure
.Startup.cs
:endpoints.MapBlazorHub();
Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un
Counter
componente alla cartella delShared
progetto.Pages/Shared/Counter.razor
(Razor Pages) oViews/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 Pagine:
Nella pagina del progetto di
Index
un'app Razor Pages aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella pagina. Quando laIndex
pagina viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Nell'esempio precedente sostituire il
{APP NAMESPACE}
segnaposto con lo spazio dei nomi dell'app.MVC:
Nella visualizzazione del progetto di
Index
un'app MVC aggiungere loCounter
spazio dei nomi del componente e incorporare il componente nella visualizzazione. Quando laIndex
visualizzazione viene caricata, ilCounter
componente viene prerisorso nella pagina. Nell'esempio seguente sostituire il{APP NAMESPACE}
segnaposto con lo spazio dei nomi del progetto.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Per altre informazioni, vedere la sezione Componenti di rendering da una pagina o una vista .
Usare i componenti instradabili in un'app Razor Pages
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare i componenti instradabili Razor nelle Razor app Pages:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Aggiungere una
_Host
pagina al progetto con il contenuto seguente.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
I componenti usano il file condiviso
_Layout.cshtml
per il layout.RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Startup.Configure
Negli endpoint diStartup.cs
aggiungere una route con priorità bassa per la_Host
pagina come ultimo endpoint:endpoints.MapFallbackToPage("/_Host");
L'esempio seguente mostra la riga aggiunta nella configurazione dell'endpoint di un'app tipica:
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
Aggiungere componenti instradabili al progetto.
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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Usare i componenti instradabili in un'app MVC
Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.
Per supportare componenti instradabili Razor nelle app MVC:
Seguire le indicazioni nella sezione Configurazione .
Aggiungere un
App
componente alla radice del progetto con il contenuto seguente.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>
Aggiungere una
_Host
visualizzazione al progetto con il contenuto seguente.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
I componenti usano il file condiviso
_Layout.cshtml
per il layout.RenderMode configura se il
App
componente:- Viene eseguito il pre-riavvio nella pagina.
- Viene eseguito il rendering come HTML statico nella pagina o se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.
Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.
Aggiungere un'azione al Home controller.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Startup.Configure
Negli endpoint diStartup.cs
aggiungere una route con priorità bassa per l'azione del controller che restituisce la_Host
visualizzazione:endpoints.MapFallbackToController("Blazor", "Home");
L'esempio seguente mostra la riga aggiunta nella configurazione dell'endpoint di un'app tipica:
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
Aggiungere componenti instradabili al progetto.
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++; } }
Eseguire il progetto e passare al componente instradabile
RoutableCounter
in/routable-counter
.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Eseguire il rendering dei componenti da una pagina o una vista
Questa sezione riguarda l'aggiunta di componenti a pagine o visualizzazioni, in cui i componenti non sono direttamente instradabili dalle richieste utente.
Per eseguire il rendering di un componente da una pagina o da una visualizzazione, usare l'helper tag del componente.
Eseguire il rendering di componenti interattivi con stato
I componenti interattivi con stato possono essere aggiunti a una pagina o a una Razor visualizzazione.
Quando viene eseguito il rendering della pagina o della visualizzazione:
- Il componente viene prerenderato con la pagina o la visualizzazione.
- Lo stato del componente iniziale usato per la pre-esecuzione del pre-riavvio viene perso.
- Quando viene stabilita la connessione, viene creato un nuovo stato del SignalR componente.
La pagina seguente Razor esegue il rendering di un Counter
componente:
<h1>My Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Eseguire il rendering di componenti non interattivi
Nella pagina seguente Razor il rendering del Counter
componente viene eseguito in modo statico con un valore iniziale specificato usando un modulo. Poiché il rendering del componente viene eseguito in modo statico, il componente non è interattivo:
<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; }
}
Per altre informazioni, vedere Component Tag Helper in ASP.NET Core.
Spazi dei nomi dei componenti
Quando si usa una cartella personalizzata per contenere i componenti del Razor progetto, aggiungere lo spazio dei nomi che rappresenta la cartella alla pagina/visualizzazione o al _ViewImports.cshtml
file. Nell'esempio seguente :
- I componenti vengono archiviati nella
Components
cartella del progetto. - Il
{APP NAMESPACE}
segnaposto è lo spazio dei nomi del progetto.Components
rappresenta il nome della cartella.
@using {APP NAMESPACE}.Components
Il _ViewImports.cshtml
file si trova nella Pages
cartella di un'app Razor Pages o nella Views
cartella di un'app MVC.
Per altre informazioni, vedere ASP.NET Componenti di baseRazor.
Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi
Una dimensione dello stato prerendered di grandi dimensioni può superare il limite di dimensioni del messaggio del SignalR circuito, il che comporta quanto segue:
- L'inizializzazione del SignalR circuito non riesce con un errore nel client: Circuit host not initialized.
- L'interfaccia utente di riconnessione nel client viene visualizzata quando il circuito ha esito negativo. Il ripristino non è possibile.
Per risolvere il problema, usare uno degli approcci seguenti:
- Ridurre la quantità di dati inseriti nello stato pre-temporaneo.
- Aumentare il limite di dimensioni del SignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).
Risorse aggiuntive Blazor Server
- Gestione dello stato: Gestire la pre-gestione
- Razor soggetti del ciclo di vita dei componenti che riguardano il prerendering
- Autenticazione e autorizzazione: aspetti generali
- Gestire gli errori: Prerendering
- Ospitare e distribuire: Blazor Server
- Mitigazione delle minacce: scripting tra siti (XSS)