Condividi tramite

Integrare componenti ASP.NET Core Razor in app ASP.NET Core

  • Articolo

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 dell'app:

Usare componenti non instradabili in pagine o visualizzazioni

Usare le indicazioni seguenti per integrare Razor componenti in pagine o visualizzazioni di un'app Pages o MVC esistente Razor con l'helper tag del componente.

Nota

Se l'app richiede componenti instradabili direttamente (non incorporati in pagine o visualizzazioni), ignorare questa sezione e usare le indicazioni nella sezione Aggiungi Blazor supporto a un'app ASP.NET Core.

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 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 lo blazor.web.js script immediatamente prima della Scripts sezione render (@await RenderSectionAsync(...)):

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

    Il Blazor framework aggiunge automaticamente lo blazor.web.js script 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 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();

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" />

Aggiungere Blazor il supporto a un'app ASP.NET Core

Questa sezione illustra l'aggiunta Blazor del supporto a un'app ASP.NET Core:

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>

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="@Assets["{ASSEMBLY NAME}.styles.css"]" />
    <HeadOutlet />
</head>

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

</html>

<!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="{ASSEMBLY NAME}.styles.css" />
    <HeadOutlet />
</head>

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

</html>

Il {ASSEMBLY NAME} segnaposto è il nome dell'assembly dell'app. Ad esempio, un progetto con un nome di assembly di ContosoApp usa il nome del file del ContosoApp.styles.css foglio di stile.

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 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;

  • 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 App componente (App.razor) specificato come componente radice predefinito (il primo componente caricato). Inserire il codice seguente prima della riga che chiama app.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 donatore Blazor Web App per fornire risorse all'app. Seguire le indicazioni riportate nell'articolo Strumenti per ASP.NET Core Blazor , selezionando il supporto per le funzionalità del modello seguenti durante la generazione di Blazor Web App.

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 .

Dal donatore copiare Blazor Web Appl'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 dal donatore Blazor Web App 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 (.Client cartella di progetto del donatore Blazor Web App)

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 il donatore è stato denominato quando è stato creato il progetto di donatore Blazor Web App uguale all'app core ASP.NET, 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 donatore Blazor Web App , è necessario modificare gli spazi dei nomi tra gli asset donati in modo che corrispondano se si intende utilizzare questa rest 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 il donatore Blazor Web App, 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 .Client cartella e selezionare il file di progetto (.csproj).

  • Interfaccia della riga di comando di .NET: usare il dotnet sln add comando per aggiungere il .Client progetto 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 .Client progetto 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.csproj

    Il comando precedente presuppone quanto segue:

    • Il nome del file di progetto è BlazorSample.Client.csproj.
    • Il .Client progetto si trova in una BlazorSample.Client cartella all'interno della cartella della soluzione. La .Client cartella è affiancata alla cartella del progetto ASP.NET Core.

    Per altre informazioni sul dotnet add reference comando, vedere dotnet add reference (documentazione di .NET).

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 .Client mapping 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.Client in modo che corrisponda allo .Client spazio 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 Pages cartella del .Client progetto.
  • Rimuovere la @rendermode direttiva 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.

Implementare Blazoril layout e gli stili

Facoltativamente, assegnare un componente di layout predefinito usando il RouteView.DefaultLayout parametro del RouteView componente.

In Routes.razorl'esempio seguente usa un MainLayout componente come layout predefinito:

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

Per altre informazioni, vedere layout ASP.NET CoreBlazor.

Blazor Il layout del modello di progetto e i fogli di stile sono disponibili nel dotnet/aspnetcore repository GitHub:

  • MainLayout.razor
  • MainLayout.razor.css
  • NavMenu.razor
  • NavMenu.razor.css

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).

A seconda della modalità di organizzazione dei file di layout nell'app, potrebbe essere necessario aggiungere un'istruzione @using per la cartella dei file di layout nel file dell'app _Imports.razor per visualizzarli per l'uso nei componenti dell'app.

Non è necessario fare riferimento in modo esplicito ai fogli di stile quando si usa l'isolamento CSS. Il Blazor framework aggrega automaticamente i fogli di stile dei singoli componenti. Il foglio di stile in bundle dell'app è già a cui viene fatto riferimento nel componente dell'app App ({ASSEMBLY NAME}.styles.cssdove il segnaposto è il {ASSEMBLY NAME} nome dell'assembly dell'app).

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() => 
    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 Components cartella del progetto.
  • Il {APP NAMESPACE} segnaposto è lo spazio dei nomi del progetto. Components rappresenta 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

Prerender ASP.NET Componenti di base Razor