Integrare componenti ASP.NET Core Razor in app ASP.NET Core
Questo articolo illustra gli Razor scenari di integrazione dei componenti per ASP.NET app Core.
Razor integrazione dei componenti
Razor i componenti possono essere integrati in Razor Pages, MVC e altri tipi di app ASP.NET Core. Razor i componenti possono anche essere integrati in qualsiasi app Web, incluse le app non basate su ASP.NET Core, come elementi HTML personalizzati.
Usare le linee guida nelle sezioni seguenti a seconda dei requisiti del progetto:
- Blazor Il supporto può essere aggiunto a un'app ASP.NET Core.
- Per i componenti interattivi che non sono direttamente instradabili dalle richieste degli utenti, vedere la sezione Usare componenti non instradabili nelle pagine o nelle visualizzazioni . Seguire queste indicazioni quando l'app incorpora i componenti in pagine e visualizzazioni esistenti con l'helper tag del componente.
- Per i componenti interattivi che sono direttamente instradabili dalle richieste degli utenti, vedere la sezione Usare componenti instradabili. Seguire queste indicazioni quando i visitatori devono essere in grado di effettuare una richiesta HTTP nel browser per un componente con una
@pagedirettiva .
Aggiungere Blazor il supporto a un'app ASP.NET Core
Questa sezione illustra l'aggiunta Blazor del supporto a un'app ASP.NET Core:
- Aggiungere il rendering statico lato server (SSR statico)
- Abilitare il rendering lato server interattivo (SSR interattivo)
- Abilitare il rendering automatico interattivo (Auto) o il rendering lato client (CSR)
Nota
Per gli esempi in questa sezione, il nome e lo spazio dei nomi dell'app di esempio sono BlazorSample.
Aggiungere il rendering statico lato server (SSR statico)
Aggiungere una Components cartella all'app.
Aggiungere il file seguente _Imports per gli spazi dei nomi usati dai Razor componenti.
Components/_Imports.razor:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components
Modificare il segnaposto dello spazio dei nomi ({APP NAMESPACE}) nello spazio dei nomi dell'app. Ad esempio:
@using BlazorSample
@using BlazorSample.Components
Aggiungere il Blazor router (<Router>, Router) all'app in un Routes componente, che viene inserito nella cartella dell'app Components .
Components/Routes.razor:
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
</Router>
È possibile fornire un layout predefinito con il RouteView.DefaultLayout parametro del RouteView componente:
<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
Per altre informazioni, vedere layout ASP.NET CoreBlazor.
Aggiungere un App componente all'app, che funge da componente radice, ovvero il primo componente caricato dall'app.
Components/App.razor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="BlazorSample.styles.css" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
Per l'elemento nell'esempio <link> precedente, modificare BlazorSample il nome del file del foglio di stile in modo che corrisponda al nome del progetto dell'app. Ad esempio, un progetto denominato ContosoApp usa il nome del file del ContosoApp.styles.css foglio di stile:
<link rel="stylesheet" href="ContosoApp.styles.css" />
Aggiungere una Pages cartella alla Components cartella per contenere componenti instradabili Razor .
Aggiungere il componente seguente Welcome per illustrare ssr statico.
Components/Pages/Welcome.razor:
@page "/welcome"
<PageTitle>Welcome!</PageTitle>
<h1>Welcome to Blazor!</h1>
<p>@message</p>
@code {
private string message =
"Hello from a Razor component and welcome to Blazor!";
}
Nel file del Program progetto ASP.NET Core:
Aggiungere un'istruzione
usingall'inizio del file per i componenti del progetto:using {APP NAMESPACE}.Components;Nella riga precedente modificare il
{APP NAMESPACE}segnaposto nello spazio dei nomi dell'app. Ad esempio:using BlazorSample.Components;Aggiungere Razor servizi componenti (AddRazorComponents), che aggiunge automaticamente anche servizi antiforgery (AddAntiforgery). Aggiungere la riga seguente prima della riga che chiama
builder.Build():builder.Services.AddRazorComponents();Aggiungere il middleware antiforgery alla pipeline di elaborazione delle richieste con UseAntiforgery. UseAntiforgery viene chiamato dopo la chiamata a UseRouting. Se sono presenti chiamate a UseRouting e UseEndpoints, la chiamata a UseAntiforgery deve passare tra di esse. Una chiamata a UseAntiforgery deve essere effettuata dopo le chiamate a UseAuthentication e UseAuthorization.
app.UseAntiforgery();Aggiungere MapRazorComponents alla pipeline di elaborazione delle richieste dell'app con il
Appcomponente (App.razor) specificato come componente radice predefinito (il primo componente caricato). Inserire il codice seguente prima della riga che chiamaapp.Run:app.MapRazorComponents<App>();
Quando l'app viene eseguita, si accede al Welcome componente all'endpoint /welcome .
Abilitare il rendering lato server interattivo (SSR interattivo)
Seguire le indicazioni nella sezione Aggiungere rendering statico lato server (SSR statico).
Nel file dell'app Program aggiungere una chiamata a AddInteractiveServerComponents dove Razor vengono aggiunti i servizi componenti con AddRazorComponents:
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
Aggiungere una chiamata a AddInteractiveServerRenderMode dove Razor vengono mappati i componenti con MapRazorComponents:
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
Aggiungere il componente seguente Counter all'app che adotta il rendering lato server interattivo (SSR interattivo).
Components/Pages/Counter.razor:
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Quando l'app viene eseguita, si accede al Counter componente all'indirizzo /counter.
Abilitare il rendering automatico interattivo (Auto) o il rendering lato client (CSR)
Seguire le indicazioni nella sezione Aggiungere rendering statico lato server (SSR statico).
I componenti che usano la modalità di rendering automatico interattivo usano inizialmente SSR interattivo. Il runtime .NET e il bundle dell'app vengono scaricati nel client in background e memorizzati nella cache in modo che possano essere usati nelle visite future. I componenti che usano la modalità di rendering Interactive WebAssembly vengono visualizzati in modo interattivo solo sul client dopo il download del Blazor bundle e il Blazor runtime viene attivato. Tenere presente che quando si usano le modalità di rendering Interactive Auto o Interactive WebAssembly, il codice del componente scaricato nel client non è privato. Per altre informazioni, vedere ASP.NET Modalità di rendering coreBlazor.
Dopo aver deciso quale modalità di rendering adottare:
- Se si prevede di adottare la modalità di rendering automatico interattivo, seguire le indicazioni nella sezione Abilitare il rendering lato server interattivo (SSR interattivo).
- Se si prevede di adottare solo il rendering Interactive WebAssembly, continuare senza aggiungere SSR interattivo.
Aggiungere un riferimento al pacchetto NuGet all'app Microsoft.AspNetCore.Components.WebAssembly.Server .
Nota
Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.
Creare un'app Web per il donatore Blazor per fornire risorse all'app. Seguire le indicazioni nell'articolo Strumenti per ASP.NET Core Blazor , selezionando il supporto per le funzionalità del modello seguenti durante la generazione dell'app Blazor Web.
Per il nome dell'app, usa lo stesso nome dell'app ASP.NET Core, che comporta la corrispondenza del markup del nome dell'app nei componenti e negli spazi dei nomi corrispondenti nel codice. L'uso dello stesso nome/spazio dei nomi non è strettamente obbligatorio, perché gli spazi dei nomi possono essere modificati dopo che gli asset vengono spostati dall'app donatore all'app ASP.NET Core. Tuttavia, il tempo viene salvato associando gli spazi dei nomi all'inizio.
Visual Studio:
- In Modalità di rendering interattivo selezionare Auto (Server e WebAssembly).
- Impostare la posizione interattività su Per pagina/componente.
- Deselezionare la casella di controllo Includi pagine di esempio.
Interfaccia della riga di comando di .NET:
- Usare l'opzione
-int Auto. - Non usare l'opzione .
-ai|--all-interactive - Passare l'opzione
-e|--empty.
Dall'app Web del donatore copiare Blazor l'intero .Client progetto nella cartella della soluzione dell'app ASP.NET Core.
Importante
Non copiare la .Client cartella nella cartella del progetto ASP.NET Core. L'approccio migliore per organizzare le soluzioni .NET consiste nell'inserire ogni progetto della soluzione nella propria cartella all'interno di una cartella di soluzione di primo livello. Se una cartella della soluzione sopra la cartella del progetto ASP.NET Core non esiste, crearne una. Copiare quindi la .Client cartella del progetto dall'app Web del donatore Blazor nella cartella della soluzione. La struttura di cartelle del progetto finale deve avere il layout seguente:
BlazorSampleSolution(cartella della soluzione di primo livello)BlazorSample(progetto core ASP.NET originale)BlazorSample.Client(.Clientcartella del progetto dall'app Web donatore Blazor )
Per il file di soluzione ASP.NET Core, è possibile lasciarlo nella cartella del progetto ASP.NET Core. In alternativa, è possibile spostare il file della soluzione o crearne uno nuovo nella cartella della soluzione di primo livello, purché i riferimenti al progetto puntino correttamente ai file di progetto (.csproj) dei due progetti nella cartella della soluzione.
Se è stata denominata l'app Web del donatore Blazor quando è stato creato il progetto di donatore uguale all'app ASP.NET Core, gli spazi dei nomi usati dagli asset donati corrispondono a quelli nell'app ASP.NET Core. Non è necessario eseguire ulteriori passaggi per trovare le corrispondenze con gli spazi dei nomi. Se è stato usato uno spazio dei nomi diverso durante la creazione del progetto di app Web per il donatore Blazor , è necessario modificare gli spazi dei nomi tra gli asset donati in modo che corrispondano se si intende usare il resto di queste linee guida esattamente come presentato. Se gli spazi dei nomi non corrispondono, modificare gli spazi dei nomi prima di procedere o modificare gli spazi dei nomi seguendo le indicazioni rimanenti in questa sezione.
Eliminare l'app Web del donatore Blazor , perché non ha ulteriore uso in questo processo.
Aggiungere il .Client progetto alla soluzione:
Visual Studio: fare clic con il pulsante destro del mouse sulla soluzione in Esplora soluzioni e scegliere Aggiungi>progetto esistente. Passare alla
.Clientcartella e selezionare il file di progetto (.csproj).Interfaccia della riga di comando di .NET: usare il
dotnet sln addcomando per aggiungere il.Clientprogetto alla soluzione.
Aggiungere un riferimento al progetto ASP.NET Core al progetto client:
Visual Studio: fare clic con il pulsante destro del mouse sul progetto ASP.NET Core e scegliere Aggiungi>riferimento al progetto. Selezionare il
.Clientprogetto e selezionare OK.Interfaccia della riga di comando di .NET: dalla cartella del progetto ASP.NET Core usare il comando seguente:
dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csprojIl comando precedente presuppone quanto segue:
- Il nome del file di progetto è
BlazorSample.Client.csproj. - Il
.Clientprogetto si trova in unaBlazorSample.Clientcartella all'interno della cartella della soluzione. La.Clientcartella è affiancata alla cartella del progetto ASP.NET Core.
Per altre informazioni sul
dotnet add referencecomando, vederedotnet add reference(documentazione di .NET).- Il nome del file di progetto è
Apportare le modifiche seguenti al file dell'app Program ASP.NET Core:
Aggiungere servizi componenti Interactive WebAssembly con la AddInteractiveWebAssemblyComponents posizione in cui Razor vengono aggiunti i servizi componenti con AddRazorComponents.
Per il rendering automatico interattivo:
builder.Services.AddRazorComponents() .AddInteractiveServerComponents() .AddInteractiveWebAssemblyComponents();Solo per il rendering Interattivo WebAssembly:
builder.Services.AddRazorComponents() .AddInteractiveWebAssemblyComponents();Aggiungere la modalità di rendering Interactive WebAssembly (AddInteractiveWebAssemblyRenderMode) e altri assembly per il progetto in cui Razor viene eseguito il
.Clientmapping dei componenti con MapRazorComponents.Per il rendering automatico interattivo (automatico):
app.MapRazorComponents<App>() .AddInteractiveServerRenderMode() .AddInteractiveWebAssemblyRenderMode() .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);Solo per il rendering Interattivo WebAssembly:
app.MapRazorComponents<App>() .AddInteractiveWebAssemblyRenderMode() .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);Negli esempi precedenti modificare
BlazorSample.Clientin modo che corrisponda allo.Clientspazio dei nomi del progetto.
Aggiungere una Pages cartella al .Client progetto.
Se il progetto ASP.NET Core ha un componente esistente Counter :
- Spostare il componente nella
Pagescartella del.Clientprogetto. - Rimuovere la
@rendermodedirettiva all'inizio del file del componente.
Se l'app ASP.NET Core non dispone di un Counter componente, aggiungere il componente seguente Counter (Pages/Counter.razor) al .Client progetto:
@page "/counter"
@rendermode InteractiveAuto
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Se l'app adotta solo il rendering Interactive WebAssembly, rimuovere la direttiva e il @rendermode valore:
- @rendermode InteractiveAuto
Eseguire la soluzione dal progetto di app ASP.NET Core:
Visual Studio: verificare che il progetto ASP.NET Core sia selezionato in Esplora soluzioni durante l'esecuzione dell'app.
Interfaccia della riga di comando di .NET: eseguire il progetto dalla cartella del progetto ASP.NET Core.
Per caricare il Counter componente, passare a /counter.
Usare componenti non instradabili in pagine o visualizzazioni
Usare le indicazioni seguenti per integrare Razor componenti in pagine e visualizzazioni di un'app Pages o MVC esistente Razor con l'helper tag del componente.
Quando viene usato il prerendering del server e 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.
Per altre informazioni sulle modalità di rendering, incluso il rendering di componenti statici non interattivi, vedere Component Tag Helper in ASP.NET Core. Per salvare lo stato dei componenti prerenderati Razor , vedere Persist Component State Tag Helper in ASP.NET Core.
Aggiungere una Components cartella alla cartella radice del progetto.
Aggiungere un file imports alla Components cartella con il contenuto seguente. Modificare il {APP NAMESPACE} segnaposto nello spazio dei nomi del progetto.
Components/_Imports.razor:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components
Nel file di layout del progetto (Pages/Shared/_Layout.cshtml nelle Razor app Pages o Views/Shared/_Layout.cshtml nelle app MVC):
Aggiungere il tag e l'helper tag del componente seguenti
<base>per un HeadOutlet componente al<head>markup:<base href="~/" /> <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" render-mode="ServerPrerendered" />Il
hrefvalore (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.web.jsscript immediatamente prima dellaScriptssezione render (@await RenderSectionAsync(...)):<script src="_framework/blazor.web.js"></script>Non è necessario aggiungere manualmente uno
blazor.web.jsscript all'app perché il Blazor framework aggiunge loblazor.web.jsscript all'app.
Nota
In genere, il layout viene caricato tramite un _ViewStart.cshtml file.
Aggiungere un componente non operativo (no-op) App al progetto.
Components/App.razor:
@* No-op App component *@
Dove vengono registrati i servizi, aggiungere servizi per Razor componenti e servizi per supportare il rendering dei componenti Interactive Server.
Nella parte superiore del Program file aggiungere un'istruzione using all'inizio del file per i componenti del progetto:
using {APP NAMESPACE}.Components;
Nella riga precedente modificare il {APP NAMESPACE} segnaposto nello spazio dei nomi dell'app. Ad esempio:
using BlazorSample.Components;
Nel file prima della Program riga che compila l'app (builder.Build()):
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
Per altre informazioni sull'aggiunta del supporto per i componenti Interactive Server e WebAssembly, vedere ASP.NET modalità di rendering coreBlazor.
Program Nel file subito dopo la chiamata per eseguire il mapping Razor di Pages (MapRazorPages) in un'app Razor Pages o per eseguire il mapping della route controller predefinita (MapControllerRoute) in un'app MVC, chiamare MapRazorComponents per individuare i componenti disponibili e specificare il componente radice dell'app (il primo componente caricato). Per impostazione predefinita, il componente radice dell'app è il App componente (App.razor). Concatenare una chiamata a AddInteractiveInteractiveServerRenderMode per configurare il rendering lato server interattivo (SSR interattivo) per l'app:
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
Nota
Se l'app non è già stata aggiornata per includere il middleware antiforgery, aggiungere la riga seguente dopo UseAuthorization la chiamata:
app.UseAntiforgery();
Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un EmbeddedCounter componente alla cartella del Components progetto.
Components/EmbeddedCounter.razor:
<h1>Embedded Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Razor Pagine:
Nella pagina del progetto di Index un'app Razor Pages aggiungere lo EmbeddedCounter spazio dei nomi del componente e incorporare il componente nella pagina. Quando la Index pagina viene caricata, il EmbeddedCounter 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}.Components
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />
MVC:
Nella visualizzazione del progetto di Index un'app MVC aggiungere lo EmbeddedCounter spazio dei nomi del componente e incorporare il componente nella visualizzazione. Quando la Index visualizzazione viene caricata, il EmbeddedCounter 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}.Components
@{
ViewData["Title"] = "Home Page";
}
<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />
Usare componenti instradabili
Usare le indicazioni seguenti per integrare i componenti instradabili Razor in un'app Pages o MVC esistente Razor .
Le indicazioni contenute in questa sezione presuppongono:
- Il titolo dell'app è
Blazor Sample. - Lo spazio dei nomi dell'app è
BlazorSample.
Per supportare componenti instradabili Razor :
Aggiungere una Components cartella alla cartella radice del progetto.
Aggiungere un file imports alla Components cartella con il contenuto seguente.
Components/_Imports.razor:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components
Modificare il {APP NAMESPACE} segnaposto nello spazio dei nomi del progetto. Ad esempio:
@using BlazorSample
@using BlazorSample.Components
Aggiungere una Layout cartella alla Components cartella .
Aggiungere un componente piè di pagina e un foglio di stile alla Layout cartella .
Components/Layout/Footer.razor:
<footer class="border-top footer text-muted">
<div class="container">
© 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
</div>
</footer>
Nel markup precedente impostare il {APP TITLE} segnaposto sul titolo dell'app. Ad esempio:
© 2023 - Blazor Sample - <a href="/privacy">Privacy</a>
Components/Layout/Footer.razor.css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
Aggiungere un componente del menu di spostamento alla Layout cartella.
Components/Layout/NavMenu.razor:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">{APP TITLE}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/counter">Counter</a>
</li>
</ul>
</div>
</div>
</nav>
Nel markup precedente impostare il {APP TITLE} segnaposto sul titolo dell'app. Ad esempio:
<a class="navbar-brand" href="/">Blazor Sample</a>
Components/Layout/NavMenu.razor.css:
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
a {
color: #0077cc;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
Aggiungere un componente di layout principale e un foglio di stile alla Layout cartella .
Components/Layout/MainLayout.razor:
@inherits LayoutComponentBase
<header>
<NavMenu />
</header>
<div class="container">
<main role="main" class="pb-3">
@Body
</main>
</div>
<Footer />
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
Components/Layout/MainLayout.razor.css:
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
Aggiungere un Routes componente alla Components cartella con il contenuto seguente.
Components/Routes.razor:
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
</Router>
Aggiungere un App componente alla Components cartella con il contenuto seguente.
Components/App.razor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{APP TITLE}</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>
</html>
Nel codice precedente aggiornare il titolo dell'app e il nome del file del foglio di stile:
Per il
{APP TITLE}segnaposto nell'elemento<title>, impostare il titolo dell'app. Ad esempio:<title>Blazor Sample</title>Per il
{APP NAMESPACE}segnaposto nell'elemento del foglio<link>di stile, impostare lo spazio dei nomi dell'app. Ad esempio:<link rel="stylesheet" href="/BlazorSample.styles.css" />
Dove vengono registrati i servizi, aggiungere servizi per Razor componenti e servizi per supportare il rendering dei componenti Interactive Server.
Nella parte superiore del Program file aggiungere un'istruzione using all'inizio del file per i componenti del progetto:
using {APP NAMESPACE}.Components;
Nella riga precedente modificare il {APP NAMESPACE} segnaposto nello spazio dei nomi dell'app. Ad esempio:
using BlazorSample.Components;
Nel file prima della Program riga che compila l'app (builder.Build()):
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
Per altre informazioni sull'aggiunta del supporto per i componenti Interactive Server e WebAssembly, vedere ASP.NET modalità di rendering coreBlazor.
Program Nel file subito dopo la chiamata per eseguire il mapping Razor di Pages (MapRazorPages), chiamare MapRazorComponents per individuare i componenti disponibili e specificare il componente radice dell'app. Per impostazione predefinita, il componente radice dell'app è il App componente (App.razor). Concatenare una chiamata a AddInteractiveServerRenderMode per configurare il rendering lato server interattivo (SSR interattivo) per l'app:
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
Nota
Se l'app non è già stata aggiornata per includere il middleware antiforgery, aggiungere la riga seguente dopo UseAuthorization la chiamata:
app.UseAntiforgery();
Creare una Pages cartella nella Components cartella per i componenti instradabili. L'esempio seguente è un Counter componente basato sul Counter componente nei modelli di Blazor progetto.
Components/Pages/Counter.razor:
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Eseguire il progetto e passare al componente instradabile Counter in /counter.
Per altre informazioni sugli spazi dei nomi, vedere la sezione Spazi dei nomi dei componenti .
Restituire un oggetto RazorComponentResult da un'azione del controller MVC
Un'azione del controller MVC può restituire un componente con RazorComponentResult<TComponent>.
Components/Welcome.razor:
<PageTitle>Welcome!</PageTitle>
<h1>Welcome!</h1>
<p>@Message</p>
@code {
[Parameter]
public string? Message { get; set; }
}
In un controller:
public IResult GetWelcomeComponent()
{
return new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });
}
Viene restituito solo il markup HTML per il componente sottoposto a rendering. Il rendering dei layout e del markup di pagina HTML non viene eseguito automaticamente con il componente . Per produrre una pagina HTML completa, l'app può gestire un Blazor layout che fornisce markup HTML per <html>, <head>, <body>e altri tag. Il componente include il layout con la @layoutRazor direttiva all'inizio del file di definizione del componente, Welcome.razor per l'esempio in questa sezione. L'esempio seguente presuppone che l'app abbia un layout denominato RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor):
@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout
È possibile evitare di inserire l'istruzione @using per la Layout cartella nei singoli componenti spostandola nel file dell'app _Imports.razor .
Per altre informazioni, vedere layout 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
Componentscartella del progetto. - Il
{APP NAMESPACE}segnaposto è lo spazio dei nomi del progetto.Componentsrappresenta il nome della cartella.
@using {APP NAMESPACE}.Components
Ad esempio:
@using BlazorSample.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
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per