Integrare i componenti di ASP.NET Core Razor con MVC o le Razor Pagine nelle soluzioni ospitate Blazor WebAssembly

Nota

Le soluzioni ospitate Blazor WebAssembly rimangono supportate, ma il modello di progetto è stato rimosso e non è più supportato in .NET 8 o versione successiva. Questo articolo viene visualizzato nel sommario fino a .NET 7 per riferimento, ma si noti che .NET 7 è una versione a supporto standard non più supportata.

Avviso

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

Questo articolo illustra Razor scenari di integrazione dei componenti per app ospitate Blazor WebAssembly, incluso il pre-rendering dei componenti Razor sul server.

Importante

Le modifiche al framework nelle versioni di ASP.NET Core hanno portato a diversi set di istruzioni in questo articolo. Prima di usare 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.

Configurazione della soluzione

Configurazione per il prerendering

Per configurare il prerendering per un'app ospitata Blazor WebAssembly:

1. Ospitare l'app Blazor WebAssembly in un'app ASP.NET Core. Un'app autonoma Blazor WebAssembly può essere aggiunta a una soluzione ASP.NET Core oppure è possibile usare un'app ospitata Blazor WebAssembly creata dal Blazor WebAssembly modello di progetto con l'opzione ospitata:

   • Visual Studio: nella finestra di dialogo Informazioni aggiuntive selezionare la casella di controllo ASP.NET Core Hosted durante la creazione dell'app Blazor WebAssembly . Negli esempi di questo articolo la soluzione è denominata BlazorHosted.
   • Shell dei comandi di Visual Studio Code/.NET CLI: dotnet new blazorwasm -ho (usa l'opzione -ho|--hosted). Usa l'opzione -o|--output {LOCATION} per creare una cartella per la soluzione e impostare i namespace del progetto della soluzione. Negli esempi di questo articolo la soluzione è denominata BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

   Per gli esempi in questo articolo, il nome della soluzione ospitata (nome dell'assembly) è BlazorHosted. Lo spazio dei nomi del progetto client è BlazorHosted.Cliente lo spazio dei nomi del progetto server è BlazorHosted.Server.

2. Eliminare il wwwroot/index.html file dal Blazor WebAssemblyClient progetto.

3. Client Nel progetto eliminare le righe seguenti in Program.cs:

   - builder.RootComponents.Add<App>("#app");
   - builder.RootComponents.Add<HeadOutlet>("head::after");
   

4. Aggiungere il file _Host.cshtml alla cartella Server del progetto Pages. È possibile ottenere i file da un progetto creato dal Blazor Server modello usando Visual Studio o usando l'interfaccia della riga di comando di .NET con il dotnet new blazorserver -o BlazorServer comando in una shell dei comandi (l'opzione -o BlazorServer crea una cartella per il progetto). Dopo aver inserito i file nella Server cartella del Pages progetto, apportare le modifiche seguenti ai file.

   Apportare le modifiche seguenti al _Host.cshtml file:

   • Aggiornare lo Pages spazio dei nomi nella parte superiore del file in modo che corrisponda allo spazio dei nomi delle Server pagine dell'app. Il segnaposto {APP NAMESPACE} nel seguente esempio rappresenta il namespace delle pagine dell'applicazione donatrice che fornì il file _Host.cshtml.

     Eliminazione:

     - @namespace {APP NAMESPACE}.Pages
     

     Aggiungi:

     @namespace BlazorHosted.Server.Pages
     

   • Aggiungi una direttiva @using per il progetto Client all'inizio del file.

     @using BlazorHosted.Client
     

   • Aggiornare i collegamenti del foglio di stile in modo che puntino ai fogli di stile del progetto WebAssembly. Nell'esempio seguente lo spazio dei nomi del progetto client è BlazorHosted.Client. Il segnaposto {APP NAMESPACE} rappresenta lo spazio dei nomi dell'applicazione donatrice che ha fornito il file _Host.cshtml. Aggiornare il Tag Helper del componente (<component> tag) per prerenderizzare il componente HeadOutlet.

     Eliminazione:

     - <link href="css/site.css" rel="stylesheet" />
     - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" />
     - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
     

     Aggiungi:

     <link href="css/app.css" rel="stylesheet" />
     <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
     

     Nota

     Lasciare l'elemento <link> che richiede il foglio di stile Bootstrap (css/bootstrap/bootstrap.min.css) sul posto.

   • Aggiornare la sorgente del Blazor script per utilizzare il Blazor WebAssembly script lato client.

     Eliminazione:

     - <script src="_framework/blazor.server.js"></script>
     

     Aggiungi:

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

   • Aggiornare il render-mode del Tag Helper del componente per prerendere il componente radice App con WebAssemblyPrerendered:

     Eliminazione:

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

     Aggiungi:

     <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
     

     Importante

     Il prerendering non è supportato per gli endpoint di autenticazione (/authentication/ segmento di percorso). Per altre informazioni, vedere Scenari di sicurezza aggiuntivi per ASP.NET Core Blazor WebAssembly.

5. Modificare nel file Program.cs del progetto Server l'endpoint di fallback dal file index.html alla pagina _Host.cshtml.

   Eliminazione:

   - app.MapFallbackToFile("index.html");
   

   Aggiungi:

   app.MapFallbackToPage("/_Host");
   

6. Se i Client e Server progetti usano uno o più servizi comuni durante la prerenderizzazione, incorporare le registrazioni dei servizi in un metodo che può essere chiamato da entrambi i progetti. Per altre informazioni, vedere ASP.NET Core Blazor dependency injection.

7. Esegui il progetto Server. L'app ospitata Blazor WebAssembly viene prerenderata dal Server progetto per i clienti.

Configurazione per l'incorporamento di Razor componenti in pagine o visualizzazioni

Le sezioni e gli esempi seguenti per l'incorporamento di Razor componenti dall'app ClientBlazor WebAssembly in pagine o visualizzazioni dell'app server richiedono una configurazione aggiuntiva.

Il Server progetto deve avere i file e le cartelle seguenti.

Razor Pagine:

• Pages/Shared/_Layout.cshtml
• Pages/Shared/_Layout.cshtml.css
• Pages/_ViewImports.cshtml
• Pages/_ViewStart.cshtml

MVC:

• Views/Shared/_Layout.cshtml
• Views/Shared/_Layout.cshtml.css
• Views/_ViewImports.cshtml
• Views/_ViewStart.cshtml

I file precedenti possono essere ottenuti generando un'app dai modelli di progetto ASP.NET Core usando:

• Nuovi strumenti di creazione del progetto di Visual Studio.
• Apertura di una shell dei comandi ed esecuzione dotnet new webapp -o {PROJECT NAME} (Razor Pages) o dotnet new mvc -o {PROJECT NAME} (MVC). L'opzione -o|--output con un valore per il {PROJECT NAME} segnaposto fornisce un nome per l'app e crea una cartella per l'app.

Aggiornare il namespace nel file importato _ViewImports.cshtml affinché corrisponda a quello utilizzato dal progetto Server che riceve i file.

Pages/_ViewImports.cshtml (Razor Pagine):

@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewImports.cshtml (MVC):

@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Aggiornare il file di layout importato, ovvero Pages/Shared/_Layout.cshtml per Razor Pages o Views/Shared/_Layout.cshtml per MVC.

Prima di tutto, eliminare il titolo e il foglio di stile dal progetto donatore, che si trova RPDonor.styles.css nell'esempio seguente. Il {PROJECT NAME} segnaposto rappresenta il nome dell'app del progetto di donatore.

- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />

Includere gli stili del Client progetto nel file di layout. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client. L'elemento <title> può essere aggiornato contemporaneamente.

Inserire le righe seguenti nel <head> contenuto del file di layout:

<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

Il layout importato contiene due Home (Index pagina) e Privacy collegamenti di spostamento. Per fare in modo che i Home link puntino all'app ospitata Blazor WebAssembly, modificare i link:

- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

In un file di layout MVC:

- <a class="navbar-brand" asp-area="" asp-controller="Home" 
-     asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>

- <a class="nav-link text-dark" asp-area="" asp-controller="Home" 
-     asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>

Aggiornare il nome dell'app dell'elemento <footer>. L'esempio seguente usa il nome BlazorHosteddell'app :

- &copy; {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ &copy; {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>

Nell'esempio precedente il {DATE} segnaposto rappresenta la data di copyright in un'app generata dal Razor modello di progetto Pages o MVC.

Per fare in modo che il collegamento Privacy porti a una pagina di privacy (Razor Pages), aggiungere una pagina di privacy al progetto di Server.

Pages/Privacy.cshtml nel Server progetto:

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Per una visualizzazione della privacy basata su MVC, creare una visualizzazione della privacy nel progetto di Server.

View/Home/Privacy.cshtml nel Server progetto:

@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>

Nel controller dell'applicazione MVC, restituisci la visualizzazione.

Aggiungere il codice seguente a Controllers/HomeController.cs:

public IActionResult Privacy()
{
    return View();
}

Se importi file da un'applicazione fonte, assicurati di aggiornare gli spazi dei nomi nei file in modo che corrispondano a quelli del progetto Server (ad esempio, BlazorHosted.Server).

Importare asset statici nel Server progetto dalla cartella del wwwroot progetto di donatore:

• wwwroot/css cartella e contenuto
• wwwroot/js cartella e contenuto
• wwwroot/lib cartella e contenuto

Se il progetto di donatore viene creato da un modello di progetto ASP.NET Core e i file non vengono modificati, è possibile copiare l'intera wwwroot cartella dal progetto donatore nel Server progetto e rimuovere il favicon file icona.

Avviso

Evitare di inserire l'asset statico in entrambe le Client cartelle e Serverwwwroot . Se lo stesso file è presente in entrambe le cartelle, viene generata un'eccezione perché gli asset statici condividono lo stesso percorso radice Web. Pertanto, ospita un asset statico in una delle cartelle wwwroot, non in entrambe.

Dopo aver adottato la configurazione precedente, incorporare i componenti Razor in pagine o visualizzazioni del progetto Server. Usare le linee guida nelle sezioni seguenti di questo articolo:

• Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente
• Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS

Eseguire il rendering dei componenti in una pagina o in una visualizzazione con l'helper tag del componente

Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, l'helper tag componente supporta due modalità di rendering per il rendering di un componente da un'app Blazor WebAssembly in una pagina o in una visualizzazione:

• WebAssembly
• WebAssemblyPrerendered

Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina. Per evitare di usare lo spazio dei nomi completo per il componente Counter con il Tag Helper ({ASSEMBLY NAME}.Pages.Counter), aggiungere una direttiva @using per lo spazio dei nomi del progetto del client Pages. Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client.

Nel progetto Server, Pages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

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

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Esegui il progetto Server. Vai alla pagina Razor su /razorpagescounter1. Il componente pre-predefinito Counter è incorporato nella pagina.

RenderMode configura se il componente debba:

• È prerenderizzato nella pagina.
• Viene effettuato il rendering come HTML statico nella pagina, oppure se include le informazioni necessarie per avviare un'app Blazor dall'agente utente.

Per altre informazioni sull'helper tag del componente, incluso il passaggio di parametri e RenderMode configurazione, vedere Component Tag Helper in ASP.NET Core.

Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head> layout.

Impostare il contenuto figlio tramite un frammento di rendering

Il Tag Helper del componente non supporta ricevere un delegato per il contenuto figlio (ad esempio, ). È consigliabile creare un Razor componente (.razor) che faccia riferimento al componente di cui si vuole eseguire il rendering con il contenuto figlio da passare e quindi richiamare il Razor componente dalla pagina o dalla visualizzazione.

Assicurarsi che i componenti prerenderati di primo livello non vengano eliminati durante la pubblicazione

Se un helper tag componente fa direttamente riferimento a un componente da una libreria soggetta a taglio durante la pubblicazione, il componente potrebbe essere eliminato durante la pubblicazione perché non vi sono riferimenti dal codice dell'app sul lato client. Di conseguenza, il componente non viene prerenderato, lasciando un punto vuoto nell'output. In questo caso, indicare al trimmer di mantenere il componente di libreria aggiungendo un DynamicDependency attributo a qualsiasi classe nell'app lato client. Per mantenere un componente denominato SomeLibraryComponentToBePreserved, aggiungere quanto segue a qualsiasi componente:

@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All, 
    typeof(SomeLibraryComponentToBePreserved))]

L'approccio precedente in genere non è obbligatorio perché l'app esegue in genere il pre-riavvio dei relativi componenti (che non vengono tagliati), che a sua volta fa riferimento ai componenti delle librerie (causando anche il mancato taglio). Usare esplicitamente DynamicDependency solo per il prerendering diretto di un componente di libreria quando la libreria è soggetta a ottimizzazione.

Eseguire il rendering dei componenti in una pagina o in una visualizzazione con un selettore CSS

Dopo aver configurato la soluzione, inclusa la configurazione aggiuntiva, aggiungere i componenti radice al Client progetto di una soluzione ospitata Blazor WebAssembly nel Program.cs file. Nell'esempio seguente il Counter componente viene dichiarato come componente radice con un selettore CSS che seleziona l'elemento con l'oggetto id corrispondente counter-componenta . Nell'esempio seguente lo Client spazio dei nomi del progetto è BlazorHosted.Client.

Nel Program.cs file del Client progetto aggiungere lo spazio dei nomi per i componenti del Razor progetto all'inizio del file:

using BlazorHosted.Client.Pages;

Dopo aver stabilito in builderProgram.cs, aggiungere il componente Counter come componente radice.

builder.RootComponents.Add<Counter>("#counter-component");

Nell'esempio Pages seguente Razor viene eseguito il rendering del Counter componente in una pagina. Per rendere interattivo il componente, lo Blazor WebAssembly script viene incluso nella sezione rendering della pagina.

Nel progetto Server, Pages/RazorPagesCounter2.cshtml:

@page

<div id="counter-component">Loading...</div>

@section Scripts {
    <script src="_framework/blazor.webassembly.js"></script>
}

Esegui il progetto Server. Vai alla pagina Razor su /razorpagescounter2. Il componente pre-predefinito Counter è incorporato nella pagina.

Potrebbero essere necessarie operazioni aggiuntive a seconda delle risorse statiche usate dai componenti e della modalità di organizzazione delle pagine di layout in un'app. In genere, gli script vengono aggiunti alla sezione di rendering di Scripts una pagina o visualizzazione e ai fogli di stile vengono aggiunti al contenuto dell'elemento del <head> layout.

Nota

L'esempio precedente genera un'eccezione JSException se un'app Blazor WebAssembly viene prerenderata e integrata in un'app Razor Pages o MVC contemporaneamente con l'uso di un selettore CSS. Passare a uno dei Client componenti del Razor progetto o passare a una pagina o a una visualizzazione di Server con un componente incorporato genera uno o più JSExceptionelementi .

Questo comportamento è normale perché il prerendering e l'integrazione di un'app Blazor WebAssembly con componenti instradabili Razor non è compatibile con l'uso di selettori CSS.

Se hai lavorato con gli esempi nelle sezioni precedenti e vuoi semplicemente vedere il funzionamento del selettore CSS nella tua app di esempio, commenta la specifica del App componente radice del file Client del progetto Program.cs:

- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");

Passare alla pagina o alla visualizzazione con il componente incorporato Razor che usa un selettore CSS( ad esempio, /razorpagescounter2 dell'esempio precedente). La pagina o la visualizzazione viene caricata con il componente incorporato e il componente incorporato funziona come previsto.

Mantenere lo stato prerenderato

Senza rendere persistente lo stato prerenderato, lo stato usato durante il prerendering viene perso e deve essere ricreato quando l'app viene completamente caricata. Se uno stato è impostato in modo asincrono, l'interfaccia utente potrebbe sfarfalliare perché l'interfaccia utente prerenderizzata viene sostituita con segnaposti temporanei e quindi nuovamente sottoposta a rendering completo.

Per mantenere lo stato per i componenti prerenderati, usare l'helper Persist Component State Tag (origine di riferimento). Aggiungere il tag dell'helper tag, <persist-component-state />, all'interno del tag di chiusura </body> della _Host pagina in un'app che prerendere i componenti.

Nota

I collegamenti della documentazione all'origine del riferimento .NET in genere caricano il ramo predefinito del repository, che rappresenta lo sviluppo corrente per la versione successiva di .NET. Per selezionare un tag per una versione specifica, usare l'elenco a discesa Switch branches or tags. Per altre informazioni, vedere How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Come selezionare un tag di versione del codice sorgente di ASP.NET - dotnet/AspNetCore.Docs #26205).

In Pages/_Host.cshtml delle Blazor app prerisorse WebAssembly (WebAssemblyPrerendered) in un'app ospitata Blazor WebAssembly :

<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 {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();
    }
}

L'esempio seguente è una versione aggiornata del componente FetchData in un'applicazione Blazor WebAssembly ospitata basata sul template di progetto Blazor. Il WeatherForecastPreserveState componente mantiene lo stato delle previsioni meteo durante la pre-esecuzione del servizio e quindi recupera lo stato per inizializzare il componente. L'helper Persist Component State Tag mantiene lo stato del componente dopo tutte le chiamate al componente.

Pages/WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        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 all'interfaccia utente prerenderizzata, quindi non si verifica alcuno sfarfallio nel browser.

Lo stato prerenderato persistente viene trasferito al client, in cui viene usato per ripristinare lo stato del componente. Per la pre-renderizzazione in un'app ospitata Blazor WebAssembly, i dati vengono esposti al browser e non devono contenere informazioni sensibili o private.

Risorse aggiuntive Blazor WebAssembly

• Supporto di prerenderizzazione con caricamento differito dell'assemblaggio
• Razor argomenti del ciclo di vita dei componenti che riguardano il prerendering
  • Inizializzazione dei componenti (OnInitialized{Async})
  • Dopo il rendering del componente (OnAfterRender{Async})
  • Riconnessione con stato dopo il prerendering: anche se il contenuto della sezione è incentrato sulla riconnessione e sulla gestione dello stato, lo scenario del prerendering nelle app ospitate Blazor Server (SignalR) prevede condizioni e approcci simili per impedire l'esecuzione del codice dello sviluppatore due volte. Per mantenere lo stato durante l'esecuzione del codice di inizializzazione durante il pre-rendering, vedere la sezione Persistenza dello stato prerenderizzato di questo articolo.
  • Prerendering con interoperabilità JavaScript
• Argomenti di autenticazione e autorizzazione concernenti il prerendering
  • Aspetti generali
  • Prerendering con l'autenticazione nelle app ospitate Blazor WebAssembly
• Ospitare e distribuire ASP.NET Core Blazor WebAssembly
• Gestire gli errori: Prerendering
• OnNavigateAsync viene eseguito due volte quando si esegue la pre-esecuzione: gestire gli eventi di spostamento asincroni con OnNavigateAsync