Condividi tramite

Integrare i componenti di ASP.NET Core Razor con MVC o Razor Pagine

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Avviso

Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Razor i componenti possono essere integrati nelle Razor app Pages o MVC. Quando viene eseguito il rendering della pagina o della visualizzazione, i componenti possono essere prerisorsi contemporaneamente.

Importante

Le modifiche al framework nelle versioni di ASP.NET Core hanno portato a diversi set di istruzioni in questo articolo. Prima di usare le indicazioni di questo articolo, verificare che il selettore della versione del documento nella parte superiore di questo articolo corrisponda alla versione di ASP.NET Core che si intende usare per l'app.

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:

Impostazione

Usare le indicazioni seguenti per integrare Razor componenti in pagine o visualizzazioni di un'app Pages o MVC esistente Razor .

  1. 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}

  2. Nel file di layout del progetto (Pages/Shared/_Layout.cshtml nelle Razor app Pages o Views/Shared/_Layout.cshtml nelle app MVC):

    • Aggiungere il seguente tag <base> e il componente Tag Helper HeadOutlet 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, vedere percorso di base dell'app ASP.NET CoreBlazor.

      Il componente HeadOutlet viene usato per il rendering del contenuto dell'intestazione (<head>) per i titoli di pagina (componente PageTitle) e altri elementi dell'intestazione (componente HeadContent) impostati dai componenti Razor. Per ulteriori informazioni, vedere Blazor.

    • Aggiungere un <script> tag per lo blazor.server.js script immediatamente prima della Scripts 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 un blazor.server.js file di script all'app.

    Nota

    In genere, il layout viene caricato tramite un _ViewStart.cshtml file.

  3. Registrare i Blazor Server servizi in Program.cs cui sono registrati i servizi:

    builder.Services.AddServerSideBlazor();

  4. 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) o MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un componente Counter alla cartella Shared del progetto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/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:

    Alla pagina del progetto dell'app Index Pages, aggiungere lo Razor spazio dei nomi del componente, e incorporare il componente nella pagina. Quando la Index pagina viene caricata, il Counter componente viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace 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 vista di un'app MVC del progetto Index, aggiungere il namespace del componente Counter e incorporare il componente nella vista. Quando la Index visualizzazione viene caricata, il componente Counter viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace del progetto.

    Views/Home/Index.cshtml:

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

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

Per ulteriori informazioni, fare riferimento alla sezione Componenti di rendering da una pagina o 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:

  1. Seguire le indicazioni nella sezione Configurazione .

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

  3. Aggiungere una _Host pagina al progetto con il contenuto seguente. Sostituire il segnaposto {APP NAMESPACE} 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 componente HeadOutlet e lo script Blazor (_framework/blazor.server.js) siano renderizzati dal layout dell'app. Per altre informazioni, vedere la sezione Configurazione .

    RenderMode configura se il App componente:

    • Viene pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Program.cs Negli endpoint aggiungere una route con priorità bassa per la _Host pagina come ultimo endpoint:

    app.MapFallbackToPage("/_Host");

  5. Aggiungere componenti instradabili al progetto. L'esempio seguente è un componente RoutableCounter basato sul componente Counter nei modelli di progetto Blazor.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  6. Eseguire il progetto e navigare fino 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'applicazione MVC

Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.

Per supportare componenti instradabili Razor nelle app MVC:

  1. Seguire le indicazioni nella sezione Configurazione .

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

  3. Aggiungere una _Host visualizzazione al progetto con il contenuto seguente. Sostituire il segnaposto {APP NAMESPACE} 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 componente HeadOutlet e lo script Blazor (_framework/blazor.server.js) siano renderizzati dal layout dell'app. Per altre informazioni, vedere la sezione Configurazione .

    RenderMode configura se il App componente:

    • Viene pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Aggiungere un'azione al Home controller.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Negli endpoint Program.cs, aggiungere una route a bassa priorità per l'azione del controller che restituisce la vista _Host.

    app.MapFallbackToController("Blazor", "Home");

  6. Creare una Pages cartella nell'app MVC e aggiungere componenti instradabili. L'esempio seguente è un componente RoutableCounter basato sul componente Counter nei modelli di progetto Blazor.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  7. Eseguire il progetto e navigare fino 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 vista, usa il Tag Helper 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 iniziale del componente utilizzato per la prerenderizzazione 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.

Namespace 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 è il namespace 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 Razor di base.

Conservare lo stato pre-elaborato

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 è impostato in modo asincrono, l'interfaccia utente potrebbe sfarfallare perché l'interfaccia utente prerenderizzata viene sostituita con segnaposti temporanei e quindi nuovamente resa completamente.

Per mantenere lo stato dei componenti prerenderizzati, usa l'helper di tag "Persist Component State" (fonte di riferimento). Aggiungere il tag dell'helper tag, <persist-component-state />, all'interno del tag di chiusura </body> della pagina _Host in un'app che prerenderizza i componenti.

Nota

I collegamenti della documentazione al codice sorgente di riferimento .NET in genere caricano il ramo predefinito del repository, che rappresenta lo sviluppo corrente per la prossima release di .NET. Per selezionare un tag per una versione specifica, usare il menu 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 che si trovano ServerPrerendered in un'applicazione Blazor Server :

<body>
    ...

    <persist-component-state />
</body>

Decidere quale stato rendere persistente usando il PersistentComponentState servizio. L'attributo [SupplyParameterFromPersistentComponentState] applicato a una proprietà registra un callback per mantenere lo stato persistente durante la pre-renderizzazione e lo carica quando il componente viene renderizzato interattivamente o il servizio viene istanziato.

Nell'esempio seguente il {TYPE} segnaposto rappresenta il tipo di dati da rendere persistenti, ad esempio WeatherForecast[].

@code {
    [SupplyParameterFromPersistentComponentState]
    public {TYPE} Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Data ??= await ...;
    }
}

Nell'esempio seguente, il componente WeatherForecastPreserveState mantiene lo stato delle previsioni meteorologiche durante la prerenderizzazione 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.

WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService

<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 {
    [SupplyParameterFromPersistentComponentState]
    public WeatherForecast[]? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await WeatherForecastService.GetForecastAsync(
            DateOnly.FromDateTime(DateTime.Now));
    }
}

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. Effettuare la chiamata alla fine del codice di inizializzazione per evitare una potenziale race condition durante l'arresto dell'app.

Nell'esempio seguente :

  • Il {TYPE} segnaposto rappresenta il tipo di dati da rendere persistenti, ad esempio WeatherForecast[].
  • Il {TOKEN} segnaposto è una stringa di identificatore di stato , ad esempio fetchdata.
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Nell'esempio seguente, il componente WeatherForecastPreserveState mantiene lo stato delle previsioni meteorologiche durante la prerenderizzazione 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()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(
                    DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), 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.

Lo stato prerenderato persistente viene trasferito al client, in cui viene usato per ripristinare lo stato del componente. ASP.NET Protezione dei dati di base garantisce che i dati vengano trasferiti in modo sicuro nelle Blazor Server app.

Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi

Una dimensione dello stato prerendered di grandi dimensioni può superare Blazoril limite di dimensioni dei messaggi 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 limiteSignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).

Risorse aggiuntive Blazor Server

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:

Impostazione

Usare le indicazioni seguenti per integrare Razor componenti in pagine o visualizzazioni di un'app Pages o MVC esistente Razor .

Importante

L'uso di una pagina di layout (_Layout.cshtml) con un Component Tag Helper per un HeadOutlet componente è necessario per controllare il contenuto <head>, come il titolo della pagina (PageTitle componente) e altri elementi dell'intestazione (HeadContent componente). Per ulteriori informazioni, vedere Blazor.

  1. Nel file di layout del progetto:

    • Aggiungere il tag <base> e l'helper tag del componente HeadOutlet seguenti all'elemento <head> in Pages/Shared/_Layout.cshtml (Razor Pages) o Views/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, vedere percorso di base dell'app ASP.NET CoreBlazor.

      Il componente HeadOutlet viene usato per il rendering del contenuto dell'intestazione (<head>) per i titoli di pagina (componente PageTitle) e altri elementi dell'intestazione (componente HeadContent) impostati dai componenti Razor. Per ulteriori informazioni, vedere Blazor.

    • Aggiungere un <script> tag per il blazor.server.js script immediatamente prima della Scripts sezione di rendering (@await RenderSectionAsync(...)) nel layout dell'app.

      Pages/Shared/_Layout.cshtml (Razor Pages) o Views/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 un blazor.server.js file di script all'app.

  2. 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}

  3. Registrare i Blazor Server servizi in Program.cs cui sono registrati i servizi:

    builder.Services.AddServerSideBlazor();

  4. 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) o MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un componente Counter alla cartella Shared del progetto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/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:

    Alla pagina del progetto dell'app Index Pages, aggiungere lo Razor spazio dei nomi del componente, e incorporare il componente nella pagina. Quando la Index pagina viene caricata, il Counter componente viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace 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 vista di un'app MVC del progetto Index, aggiungere il namespace del componente Counter e incorporare il componente nella vista. Quando la Index visualizzazione viene caricata, il componente Counter viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace del progetto.

    Views/Home/Index.cshtml:

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

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

Per ulteriori informazioni, fare riferimento alla sezione Componenti di rendering da una pagina o 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:

  1. Seguire le indicazioni nella sezione Configurazione .

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

  3. 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 Component Tag Helper per un HeadOutlet componente è necessario per controllare il contenuto <head>, come il titolo della pagina (PageTitle componente) e altri elementi dell'intestazione (HeadContent componente). Per ulteriori informazioni, vedere Blazor.

    RenderMode configura se il App componente:

    • Viene pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Program.cs Negli endpoint aggiungere una route con priorità bassa per la _Host pagina come ultimo endpoint:

    app.MapFallbackToPage("/_Host");

  5. Aggiungere componenti instradabili al progetto. L'esempio seguente è un componente RoutableCounter basato sul componente Counter nei modelli di progetto Blazor.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  6. Eseguire il progetto e navigare fino 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'applicazione MVC

Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.

Per supportare componenti instradabili Razor nelle app MVC:

  1. Seguire le indicazioni nella sezione Configurazione .

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

  3. 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 Component Tag Helper per un HeadOutlet componente è necessario per controllare il contenuto <head>, come il titolo della pagina (PageTitle componente) e altri elementi dell'intestazione (HeadContent componente). Per ulteriori informazioni, vedere Blazor.

    RenderMode configura se il App componente:

    • Viene pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Aggiungere un'azione al Home controller.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Negli endpoint Program.cs, aggiungere una route a bassa priorità per l'azione del controller che restituisce la vista _Host.

    app.MapFallbackToController("Blazor", "Home");

  6. Creare una Pages cartella nell'app MVC e aggiungere componenti instradabili. L'esempio seguente è un componente RoutableCounter basato sul componente Counter nei modelli di progetto Blazor.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  7. Eseguire il progetto e navigare fino 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 vista, usa il Tag Helper 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 iniziale del componente utilizzato per la prerenderizzazione 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 Component Tag Helper per un HeadOutlet componente è necessario per controllare il contenuto <head>, come il titolo della pagina (PageTitle componente) e altri elementi dell'intestazione (HeadContent componente). Per ulteriori informazioni, vedere Blazor.

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 Component Tag Helper per un HeadOutlet componente è necessario per controllare il contenuto <head>, come il titolo della pagina (PageTitle componente) e altri elementi dell'intestazione (HeadContent componente). Per ulteriori informazioni, vedere Blazor.

Namespace 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 è il namespace 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 Razor di base.

Conservare lo stato pre-elaborato

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 è impostato in modo asincrono, l'interfaccia utente potrebbe sfarfallare perché l'interfaccia utente prerenderizzata viene sostituita con segnaposti temporanei e quindi nuovamente resa completamente.

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 dei 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. Effettuare la chiamata alla fine del codice di inizializzazione per evitare una potenziale race condition durante l'arresto dell'app.

Nell'esempio seguente, il componente WeatherForecastPreserveState mantiene lo stato delle previsioni meteorologiche durante la prerenderizzazione 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()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), 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.

Lo stato prerenderato persistente viene trasferito al client, in cui viene usato per ripristinare lo stato del componente. ASP.NET Protezione dei dati di base garantisce che i dati vengano trasferiti in modo sicuro nelle Blazor Server app.

Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi

Una dimensione dello stato prerendered di grandi dimensioni può superare Blazoril limite di dimensioni dei messaggi 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 limiteSignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).

Risorse aggiuntive Blazor Server

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:

Impostazione

Un'app Pages o MVC esistente Razor può integrare Razor componenti in pagine o visualizzazioni:

  1. Nel file di layout del progetto:

    • Aggiungere il tag seguente <base> all'elemento <head> in Pages/Shared/_Layout.cshtml (Razor Pages) o Views/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, vedere percorso di base dell'app ASP.NET CoreBlazor.

    • Aggiungere un <script> tag per lo blazor.server.js script immediatamente prima della Scripts sezione di rendering.

      Pages/Shared/_Layout.cshtml (Razor Pages) o Views/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 un blazor.server.js file di script all'app.

  2. 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}

  3. Registrare il Blazor Server servizio in Startup.ConfigureServices.

    In Startup.cs:

    services.AddServerSideBlazor();

  4. Aggiungere l'endpoint Blazor hub agli endpoint (app.UseEndpoints) di Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un componente Counter alla cartella Shared del progetto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/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:

    Alla pagina del progetto dell'app Index Pages, aggiungere lo Razor spazio dei nomi del componente, e incorporare il componente nella pagina. Quando la Index pagina viene caricata, il Counter componente viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace 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 segnaposto {APP NAMESPACE} con lo spazio dei nomi dell'app.

    MVC:

    Nella vista di un'app MVC del progetto Index, aggiungere il namespace del componente Counter e incorporare il componente nella vista. Quando la Index visualizzazione viene caricata, il componente Counter viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace 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 ulteriori informazioni, fare riferimento alla sezione Componenti di rendering da una pagina o 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:

  1. Seguire le indicazioni nella sezione Configurazione .

  2. 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 .NET 5.0.1 e per le versioni 5.x aggiuntive, il Router componente include il PreferExactMatches parametro impostato su @true. Per altre informazioni, vedere Eseguire la migrazione da ASP.NET Core 3.1 a .NET 5.

  3. 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 pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Startup.Configure Negli endpoint di Startup.csaggiungere 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");
});

  5. 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++;
    }
}

  6. Eseguire il progetto e navigare fino 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'applicazione MVC

Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.

Per supportare componenti instradabili Razor nelle app MVC:

  1. Seguire le indicazioni nella sezione Configurazione .

  2. 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 .NET 5.0.1 e per le versioni 5.x aggiuntive, il Router componente include il PreferExactMatches parametro impostato su @true. Per altre informazioni, vedere Eseguire la migrazione da ASP.NET Core 3.1 a .NET 5.

  3. 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 pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Aggiungere un'azione al Home controller.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure Negli endpoint di Startup.csaggiungere 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");
});

  6. 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++;
    }
}

  7. Eseguire il progetto e navigare fino 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 vista, usa il Tag Helper 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 iniziale del componente utilizzato per la prerenderizzazione 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.

Namespace 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 è il namespace 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 Razor di base.

Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi

Una dimensione dello stato prerendered di grandi dimensioni può superare Blazoril limite di dimensioni dei messaggi 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 limiteSignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).

Risorse aggiuntive Blazor Server

Razor i componenti possono essere integrati nelle Razor app Pages o 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:

Impostazione

Un'app Pages o MVC esistente Razor può integrare Razor componenti in pagine o visualizzazioni:

  1. Nel file di layout del progetto:

    • Aggiungere il tag seguente <base> all'elemento <head> in Pages/Shared/_Layout.cshtml (Razor Pages) o Views/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, vedere percorso di base dell'app ASP.NET CoreBlazor.

    • Aggiungere un <script> tag per lo blazor.server.js script immediatamente prima della Scripts sezione di rendering.

      Pages/Shared/_Layout.cshtml (Razor Pages) o Views/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 un blazor.server.js file di script all'app.

  2. 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}

  3. Registrare il Blazor Server servizio in Startup.ConfigureServices.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Aggiungere l'endpoint Blazor hub agli endpoint (app.UseEndpoints) di Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrare i componenti in qualsiasi pagina o visualizzazione. Ad esempio, aggiungere un componente Counter alla cartella Shared del progetto.

    Pages/Shared/Counter.razor (Razor Pages) o Views/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:

    Alla pagina del progetto dell'app Index Pages, aggiungere lo Razor spazio dei nomi del componente, e incorporare il componente nella pagina. Quando la Index pagina viene caricata, il Counter componente viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace 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 segnaposto {APP NAMESPACE} con lo spazio dei nomi dell'app.

    MVC:

    Nella vista di un'app MVC del progetto Index, aggiungere il namespace del componente Counter e incorporare il componente nella vista. Quando la Index visualizzazione viene caricata, il componente Counter viene prerenderizzato nella pagina. Nell'esempio seguente, sostituisci il segnaposto {APP NAMESPACE} con il namespace 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 ulteriori informazioni, fare riferimento alla sezione Componenti di rendering da una pagina o 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:

  1. Seguire le indicazioni nella sezione Configurazione .

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

  3. 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 pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Startup.Configure Negli endpoint di Startup.csaggiungere 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");
});

  5. 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++;
    }
}

  6. Eseguire il progetto e navigare fino 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'applicazione MVC

Questa sezione riguarda l'aggiunta di componenti direttamente instradabili dalle richieste utente.

Per supportare componenti instradabili Razor nelle app MVC:

  1. Seguire le indicazioni nella sezione Configurazione .

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

  3. 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 pre-renderizzato nella pagina.
    • Viene eseguito il rendering come HTML statico nella pagina, oppure include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

    Per ulteriori informazioni sul Component Tag Helper, compreso il passaggio di parametri e la configurazione di RenderMode, vedere Component Tag Helper in ASP.NET Core.

  4. Aggiungere un'azione al Home controller.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure Negli endpoint di Startup.csaggiungere 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");
});

  6. 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++;
    }
}

  7. Eseguire il progetto e navigare fino 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 vista, usa il Tag Helper 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 iniziale del componente utilizzato per la prerenderizzazione 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.

Namespace 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 è il namespace 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 Razor di base.

Dimensioni dello stato prerisorse e SignalR limite di dimensioni dei messaggi

Una dimensione dello stato prerendered di grandi dimensioni può superare Blazoril limite di dimensioni dei messaggi 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 limiteSignalR messaggio. AVVISO: l'aumento del limite può aumentare il rischio di attacchi Denial of Service (DoS).

Risorse aggiuntive Blazor Server