Integrace základních komponent ASP.NET Razor s MVC nebo Razor stránkami v hostovaných Blazor WebAssembly řešeních

Note

Hostovaná Blazor WebAssembly řešení zůstávají podporovaná, ale šablona projektu byla odebrána a už není podporována v .NET 8 nebo novějším. Tento článek se zobrazí v obsahu až do .NET 7 pro referenci, ale upozorňujeme, že .NET 7 je verze Standard Support Term , která se už nepodporuje.

Warning

Tato verze ASP.NET Core již není podporována. Pro více informací se podívejte na Zásady podpory .NET a .NET Core.

Tento článek vysvětluje Razor scénáře integrace komponent pro hostované Blazor WebAssembly aplikace, včetně předběžného Razor nastavení komponent na serveru.

Important

Změny architektury napříč verzemi ASP.NET Core vedly k různým sadám pokynů v tomto článku. Než použijete pokyny k tomuto článku, ověřte, že selektor verzí dokumentu v horní části tohoto článku odpovídá verzi ASP.NET Core, kterou chcete pro svou aplikaci používat.

Prerendering může zlepšit optimalizaci vyhledávacího webu (SEO) vykreslením obsahu pro počáteční odpověď HTTP, kterou můžou vyhledávací weby použít k výpočtu pořadí stránek.

Konfigurace řešení

Konfigurace předběžného vykreslování

Nastavení předběžného nastavení hostované Blazor WebAssembly aplikace:

1. Hostujte Blazor WebAssembly aplikaci v aplikaci ASP.NET Core. Samostatnou Blazor WebAssembly aplikaci můžete přidat do řešení ASP.NET Core nebo můžete použít hostované Blazor WebAssembly aplikace vytvořené ze Blazor WebAssembly šablony projektu s hostovanými možnostmi:

   • Visual Studio: V dialogovém okně Další informace zaškrtněte při vytváření aplikace zaškrtávací políčko ASP.NET Core Hosted. V příkladech tohoto článku je řešení pojmenováno BlazorHosted.
   • Příkazové prostředí Visual Studio Code/.NET CLI: dotnet new blazorwasm -ho (použijte tuto -ho|--hosted možnost). -o|--output {LOCATION} Pomocí možnosti vytvořte složku pro řešení a nastavte obory názvů projektu řešení. V příkladech tohoto článku je řešení pojmenované BlazorHosted (dotnet new blazorwasm -ho -o BlazorHosted).

   V příkladech v tomto článku je BlazorHostednázev hostovaného řešení (název sestavení) . Obor názvů klientského projektu je BlazorHosted.Clienta obor názvů projektu serveru je BlazorHosted.Server.

2. wwwroot/index.html soubor z Blazor WebAssemblyClient projektu.

3. Client V projektu odstraňte následující řádky vProgram.cs:

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

4. Přidejte _Host.cshtml soubor do Server složky projektu Pages . Soubory můžete získat z projektu vytvořeného ze šablony Blazor Server pomocí sady Visual Studio nebo pomocí rozhraní příkazového řádku .NET CLI s příkazem dotnet new blazorserver -o BlazorServer v příkazovém prostředí (možnost -o BlazorServer vytvoří složku pro projekt). Po umístění souborů do Server složky projektu Pages proveďte následující změny souborů.

   Proveďte následující změny v souboru _Host.cshtml.

   • Pages Aktualizujte obor názvů v horní části souboru tak, aby odpovídal oboru názvů Server stránek aplikace. Zástupný symbol {APP NAMESPACE} v následujícím příkladu představuje obor názvů stránek aplikace dárce, která poskytla soubor _Host.cshtml.

     Delete:

     - @namespace {APP NAMESPACE}.Pages
     

     Add:

     @namespace BlazorHosted.Server.Pages
     

   • Přidejte direktivu @usingClient pro projekt v horní části souboru:

     @using BlazorHosted.Client
     

   • Aktualizujte odkazy šablon stylů tak, aby směřovaly na šablony stylů projektu WebAssembly. V následujícím příkladu je obor názvů klientského projektu BlazorHosted.Client. Zástupný symbol {APP NAMESPACE} představuje jmenný prostor aplikace dárce, která poskytla soubor _Host.cshtml. Aktualizujte pomocnou rutinu značky komponenty (<component> značku) pro komponentu HeadOutlet tak, aby předkreslila komponentu.

     Delete:

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

     Add:

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

     Note

     <link> Ponechte prvek, který požaduje šablonu stylů Bootstrap (css/bootstrap/bootstrap.min.css) na místě.

   • Blazor Aktualizujte zdroj skriptu tak, aby používal klientský Blazor WebAssembly skript.

     Delete:

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

     Add:

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

   • render-mode Aktualizujte pomocníka značky komponenty tak, aby přerendroval kořenovou App komponentu:WebAssemblyPrerendered

     Delete:

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

     Add:

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

     Important

     U koncových bodů ověřování (/authentication/ segment cesty) se nepodporuje předběžné vykreslování. Další informace najdete v tématu Další scénáře zabezpečení ASP.NET Core Blazor WebAssembly.

5. Program.cs V souboru Server projektu změňte záložní koncový bod ze index.html souboru na _Host.cshtml stránku:

   Delete:

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

   Add:

   app.MapFallbackToPage("/_Host");
   

6. Pokud projekty ClientServer během předrenderování používají jednu nebo více běžných služeb, zajistěte registraci služby do metody, kterou lze volat z obou projektů. Další informace najdete v tématu Injektáž závislostí v ASP.NET CoreBlazor.

7. Spusťte projekt Server. Hostovaná Blazor WebAssembly aplikace je předem vytvářena projektem Server pro klienty.

Konfigurace pro vkládání Razor komponent do stránek nebo zobrazení.

Následující části a příklady pro vložení Razor součástí z ClientBlazor WebAssembly aplikace na stránky nebo zobrazení serverové aplikace vyžadují další konfiguraci.

Projekt Server musí obsahovat následující soubory a složky.

Razor Stránky:

• 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

Předchozí soubory lze získat vygenerováním aplikace ze šablon projektu ASP.NET Core pomocí:

• Nové nástroje pro vytváření projektů v sadě Visual Studio
• Otevření příkazového řádku a spuštění dotnet new webapp -o {PROJECT NAME} (Razor Stránky) nebo dotnet new mvc -o {PROJECT NAME} (MVC). Možnost -o|--output s hodnotou zástupného symbolu {PROJECT NAME} poskytuje název aplikace a vytvoří pro aplikaci složku.

Aktualizujte obory názvů v importovaném _ViewImports.cshtml souboru tak, aby odpovídaly těm, které používá projekt, který Server soubory přijímá.

Pages/_ViewImports.cshtml (Razor Stránky):

@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

Aktualizujte importovaný soubor rozložení, který je Pages/Shared/_Layout.cshtml určený pro Razor stránky nebo Views/Shared/_Layout.cshtml pro MVC.

Nejprve odstraňte název a šablonu stylů z projektu dárce, který je RPDonor.styles.css v následujícím příkladu. Zástupný {PROJECT NAME} symbol představuje název aplikace projektu dárce.

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

Client Do souboru rozložení zahrňte styly projektu. V následujícím příkladu má projekt Client obor názvů BlazorHosted.Client. Prvek <title> lze aktualizovat současně.

Do obsahu souboru rozložení umístěte následující řádky <head> :

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

Importované rozložení obsahuje dvě Home (Index stránka) a Privacy navigační odkazy. Pokud chcete vytvořit odkazy Home na hostované Blazor WebAssembly aplikace, změňte hypertextové odkazy:

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

V souboru rozložení 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>

Aktualizujte název aplikace elementu <footer> . Následující příklad používá název BlazorHostedaplikace:

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

V předchozím příkladu {DATE} zástupný symbol představuje datum autorských práv v aplikaci vygenerované ze Razor šablony projektu Pages nebo MVC.

Pokud chcete, aby odkaz Privacy vedl na stránku ochrany osobních údajů (Razor Stránky), přidejte stránku ochrany osobních údajů do projektu Server.

Pages/Privacy.cshtml Server v projektu:

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

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

Pro zobrazení ochrany osobních údajů založených na MVC vytvořte v projektu Server zobrazení ochrany osobních údajů.

View/Home/Privacy.cshtml Server v projektu:

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

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

Home V kontroleru aplikace MVC vraťte zobrazení.

Do Controllers/HomeController.cspřidejte následující kód:

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

Pokud importujete soubory z aplikace dárců, nezapomeňte aktualizovat všechny obory názvů v souborech tak, aby odpovídaly Server projektu (například BlazorHosted.Server).

Import statických prostředků do Server projektu ze složky dárcovského projektu wwwroot:

• wwwroot/css složka a obsah
• wwwroot/js složka a obsah
• wwwroot/lib složka a obsah

Pokud je projekt dárce vytvořen ze šablony projektu ASP.NET Core a soubory se nezmění, můžete zkopírovat celou wwwroot složku z projektu dárce do Server projektu a odebrat favicon soubor ikony.

Warning

Vyhněte se umístění statického prostředku do složek Client a Serverwwwroot. Pokud je v obou složkách stejný soubor, vyvolá se výjimka, protože statické prostředky sdílejí stejnou webovou kořenovou cestu. Proto hostujte statický prostředek v některé z wwwroot těchto složek, nikoli v obou složkách.

Po přijetí předchozí konfigurace vložte Razor komponenty na stránky nebo zobrazení Server projektu. Pokyny najdete v následujících částech tohoto článku:

• Vykreslování komponent na stránce nebo zobrazení s využitím Tag Helper komponenty
• Vykreslete komponenty na stránce nebo v zobrazení pomocí selektoru CSS

Vykreslení komponent na stránce nebo zobrazení pomocí Tag Helper komponenty

Po konfiguraci řešení, včetně další konfigurace, podporuje pomocník značky komponenty dva režimy vykreslování pro vykreslení komponenty z Blazor WebAssembly aplikace na stránce nebo zobrazení:

• WebAssembly
• WebAssemblyPrerendered

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky. Abyste se vyhnuli použití úplného oboru názvů pro komponentu s pomocníkem značky komponenty (c2), přidejte direktivu pro obor názvů klientského projektu . V následujícím příkladu má projekt Client obor názvů BlazorHosted.Client.

Server V projektu: Pages/RazorPagesCounter1.cshtml

@page
@using BlazorHosted.Client.Pages

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

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

Spusťte projekt Server. Přejděte na Razor stránku na adrese /razorpagescounter1. Předem renderovaná Counter komponenta je vložena na stránce.

RenderMode nakonfiguruje, jestli komponenta:

• Je předem vykreslený na stránku.
• Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

Další informace o pomocné rutině značky komponenty, včetně předání parametrů a konfigurace RenderMode, najdete v článku Pomocné rutiny značek komponent v ASP.NET Core.

V závislosti na statických prostředcích, které komponenty používají, a na způsobu uspořádání rozložení stránek v aplikaci, může být potřeba další práce. Skripty se obvykle přidávají do sekce vykreslování stránky nebo zobrazení Scripts, a styly do obsahu prvku <head> rozvržení.

Nastavení podřízeného obsahu prostřednictvím fragmentu vykreslení

Pomocná rutina značky komponenty nepodporuje příjem delegátaRenderFragment pro podřízený obsah (například param-ChildContent="..."). Doporučujeme vytvořit součást (Razor), která odkazuje na komponentu.razor, kterou chcete vykreslit s podřízeným obsahem, který chcete předat, a poté vyvolat Razor komponentu ze stránky nebo zobrazení.

Ujistěte se, že se při publikování neoříznou předem připravené komponenty nejvyšší úrovně.

Pokud pomocník značky komponenty přímo odkazuje na komponentu z knihovny, která je předmětem oříznutí při publikování, může být komponenta během publikování oříznutá, protože na ni nejsou žádné odkazy z kódu aplikace na straně klienta. V důsledku toho komponenta není předem vykreslená, což ve výstupu zanechává prázdné místo. Pokud k tomu dojde, instruujte trimmer, aby zachoval komponent knihovny přidáním atributu DynamicDependency do jakékoli třídy v klientské aplikaci. Chcete-li zachovat komponentu SomeLibraryComponentToBePreserved, přidejte do jakékoli komponenty následující:

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

Předchozí přístup obvykle není nutný, protože aplikace obvykle předem předrenderuje své komponenty (které nejsou oříznuté), které zase odkazují na komponenty z knihoven (což také způsobuje, že se neoříznou). Explicitně používejte DynamicDependency pouze pro předkreslování komponenty knihovny přímo, pokud bude knihovna podléhat oříznutí.

Vykreslení komponent na stránce nebo zobrazení pomocí CSS selektoru

Po konfiguraci řešení, včetně další konfigurace, přidejte do projektu hostovaného Client řešení v Blazor WebAssembly souboru kořenové komponentyProgram.cs. V následujícím příkladu Counter je komponenta deklarována jako kořenová komponenta se selektorem CSS, který vybere prvek, id který odpovídá counter-component. V následujícím příkladu má projekt Client obor názvů BlazorHosted.Client.

V Program.cs souboru Client projektu přidejte obor názvů pro součásti projektu Razor do horní části souboru:

using BlazorHosted.Client.Pages;

Po vytvoření builder v Program.cs přidejte komponentu Counter jako kořenovou komponentu.

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

V následujícím Razor příkladu Pages se komponenta Counter vykreslí na stránce. Aby byla komponenta Blazor WebAssembly interaktivní, skript je součástí oddílu vykreslení stránky.

Server V projektu: Pages/RazorPagesCounter2.cshtml

@page

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

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

Spusťte projekt Server. Přejděte na Razor stránku na adrese /razorpagescounter2. Předem renderovaná Counter komponenta je vložena na stránce.

V závislosti na statických prostředcích, které komponenty používají, a na způsobu uspořádání rozložení stránek v aplikaci, může být potřeba další práce. Skripty se obvykle přidávají do sekce vykreslování stránky nebo zobrazení Scripts, a styly do obsahu prvku <head> rozvržení.

Note

Předchozí příklad vyhodí JSException, pokud je předvykreslená aplikace Blazor WebAssembly integrována do aplikace Pages nebo MVC Razor s použitím selektoru CSS. Přechod na jednu ze Client součástí projektu Razor nebo přechod na stránku nebo zobrazení Server s vloženou komponentou vyvolá jednu nebo více JSException.

Toto je normální chování, protože prerendering a integrace Blazor WebAssembly aplikace se směrovatelnými Razor komponentami není kompatibilní s použitím selektorů CSS.

Pokud jste pracovali s příklady v předchozích částech a chcete vidět práci selektoru CSS ve vaší ukázkové aplikaci, vložte do komentáře specifikaci App kořenové komponenty souboru Client projektu Program.cs:

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

Přejděte na stránku nebo zobrazení s vloženou Razor komponentou, která používá CSS selektor (například /razorpagescounter2 v předchozím příkladu). Stránka nebo zobrazení se načte s vloženou komponentou a vložená komponenta funguje podle očekávání.

Zachovat předrenderovaný stav

Bez trvalého uložení předem vykresleného stavu se stav použitý během předběžného vykreslování ztrácí a musí být znovu vytvořen, když je aplikace plně načtena. Pokud je nějaký stav nastaven asynchronně, uživatelské rozhraní může blikat, protože se předem vykreslené uživatelské rozhraní nahradí dočasnými zástupnými symboly a pak se znovu plně vykreslí.

Chcete-li zachovat stav pro předem vykreslené součásti, použijte Pomocníka značky pro zachování stavu komponenty (referenční zdroj). Přidejte značku <persist-component-state />pomocné rutiny značky uvnitř koncové </body> značky _Host stránky v aplikaci, která předkončí komponenty.

Note

Odkazy na referenční zdroj .NET v dokumentaci obvykle otevřou výchozí větev úložiště, která představuje aktuální vývoj další verze .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí mezi větvemi nebo značkami. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

V Pages/_Host.cshtml aplikacích Blazor, které jsou předem vykreslené prostřednictvím WebAssembly v hostované WebAssemblyPrerendered aplikaci:Blazor WebAssembly

<body>
    ...

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

Rozhodněte se, jaký stav zachovat pomocí služby PersistentComponentState. PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte při obnovení aplikace. Proveďte volání na konci inicializačního kódu, abyste se vyhnuli možné kolizi během ukončení aplikace.

V následujícím příkladu:

• Zástupný {TYPE} symbol představuje typ dat, která se mají zachovat (například WeatherForecast[]).
• Zástupný {TOKEN} symbol je řetězec identifikátoru stavu (například 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();
    }
}

Následující příklad je aktualizovaná verze FetchData komponenty v hostované Blazor WebAssembly aplikaci na Blazor základě šablony projektu. Komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během předrenderování a poté načte stav, aby inicializovala komponentu. Pomocník značky pro trvalý stav komponenty zachovává stav komponenty po všech vyvoláních komponent.

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

Inicializací komponentů se stejným stavem, jaký byl použit během předrenderování, jsou jakékoliv nákladné kroky inicializace provedeny pouze jednou. Vykreslené uživatelské rozhraní se také shoduje s předem vykresleným uživatelským rozhraním, takže v prohlížeči nedojde k žádnému blikání.

Trvalý prerenderovaný stav se přenese do klienta, kde se používá k obnovení stavu komponenty. V případě předběžného vykreslování v hostované Blazor WebAssembly aplikaci se data zveřejňují v prohlížeči a nesmí obsahovat citlivé a soukromé informace.

Další Blazor WebAssembly zdroje informací

• Podpora předrenderování s opožděným načítáním sestavení
• Razor témata životního cyklu komponent, která se týkají předběžného vykreslení
  • Inicializace komponent (OnInitialized{Async})
  • Po vykreslení komponenty (OnAfterRender{Async})
  • Stavové opětovné připojení po předběžném vykreslování: I když se obsah v této části zaměřuje na Blazor Server stavové SignalRopětovné připojení, scénář předběžného vykreslování v hostovaných Blazor WebAssembly aplikacích (WebAssemblyPrerendered) zahrnuje podobné podmínky a přístupy, aby se zabránilo dvojímu spuštění kódu vývojáře. Chcete-li zachovat stav během provádění inicializačního kódu při předvykreslování, přečtěte si část Zachování předvykresleného stavu tohoto článku.
  • Předběžné renderování s JavaScriptovou interoperabilitou
• Témata ověřování a autorizace, která se týkají předběžného vykreslování
  • Obecné aspekty
  • Předběžné nastavení s ověřováním v hostovaných Blazor WebAssembly aplikacích
• Hostování a nasazení serveru ASP.NET Core Blazor WebAssembly
• Zpracování chyb: Předběžné vykreslování
• OnNavigateAsync se provádí dvakrát při předběžném vykreslování: Řešte asynchronní události při navigaci s OnNavigateAsync