Prerender a integrace komponent ASP.NET Core Razor

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

Důležité

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 na této stránce odpovídá verzi ASP.NET Core, kterou chcete pro svou aplikaci používat.

Razor komponenty je možné integrovat do Razor aplikací Pages a MVC v hostovaném Blazor WebAssemblyřešení. Při vykreslení stránky nebo zobrazení je možné předem vykreslit komponenty současně.

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

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í Blazor WebAssembly aplikace zaškrtávací políčko ASP.NET Core Hostované. 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 Odstraňte 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 Blazor Server ze šablony pomocí sady Visual Studio nebo pomocí rozhraní příkazového řádku .NET CLI s dotnet new blazorserver -o BlazorServer příkazem v příkazovém prostředí ( -o BlazorServer možnost 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 v souboru následující změny _Host.cshtml :

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

     Delete (Odstranit):

     - @namespace {APP NAMESPACE}.Pages
     

     Přidejte:

     @namespace BlazorHosted.Server.Pages
     

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

     @using BlazorHosted.Client
     

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

     Delete (Odstranit):

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

     Přidejte:

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

     Poznámka:

     <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 skript na straně Blazor WebAssembly klienta:

     Delete (Odstranit):

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

     Přidejte:

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

   • render-mode Aktualizujte pomocnou rutinuznačky komponenty tak, aby předkreslila kořenovou App komponentu:WebAssemblyPrerendered

     Delete (Odstranit):

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

     Přidejte:

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

     Důležité

     U koncových bodů ověřování (/authentication/ segment cesty) se nepodporuje předendering. 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 (Odstranit):

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

   Přidejte:

   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 ASP.NET injektáž závislostí jádraBlazor.

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

Konfigurace pro vkládání Razor součástí do stránek a zobrazení

Následující části a příklady pro vložení Razor součástí z ClientBlazor WebAssembly aplikace na stránky a 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 prostředí a spuštění dotnet new webapp -o {PROJECT NAME} (Razor Pages) 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 Client je BlazorHosted.Clientobor názvů projektu . 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 Privacy odkaz vedl na stránku ochrany osobních údajů (Razor stránky), přidejte do Server projektu stránku ochrany osobních údajů.

Pages/Privacy.cshtmlServer 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ů na základě MVC vytvořte v Server projektu zobrazení ochrany osobních údajů.

View/Home/Privacy.cshtmlServer 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 souboru Controllers/HomeController.cs př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 projektu wwwroot dárce:

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

Upozorňující

Vyhněte se umístění statického prostředku do složek Client i Serverwwwroot do složek. 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:

• Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky komponenty
• Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Vykreslení součástí na stránce nebo zobrazení pomocí pomocné rutiny značky 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 Counterpomocí pomocné rutiny značky komponenty ({ASSEMBLY NAME}.Pages.Counter), přidejte @using direktivu pro obor názvů klientského Pages projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu .

V projektu ServerPages/RazorPagesCounter1.cshtml:

@page
@using BlazorHosted.Client.Pages

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

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

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

RenderMode nakonfiguruje, jestli komponenta:

• Je předem vytáhlý 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ávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

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

Pomocná rutina značky komponenty nepodporuje příjem delegáta RenderFragment pro podřízený obsah (například param-ChildContent="..."). Doporučujeme vytvořit součást (.razor), která odkazuje na komponentuRazor, 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 vysunutá a ve výstupu ponechá prázdné místo. Pokud k tomu dojde, požádejte uživatele o zachování komponenty knihovny přidáním DynamicDependency atributu do libovolné třídy v aplikaci na straně klienta. Chcete-li zachovat volanou SomeLibraryComponentToBePreservedkomponentu, přidejte do jakékoli součásti následující:

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

Předchozí přístup obvykle není nutný, protože ve většině případů aplikace 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 v případě, že je knihovna předmětem oříznutí.

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

Po konfiguraci řešení, včetně další konfigurace, přidejte do projektu hostovaného Blazor WebAssembly řešení v Program.cs souboru kořenové komponentyClient. 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 Client je BlazorHosted.Clientobor názvů projektu .

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

using BlazorHosted.Client.Pages;

builder Po vytvoření Program.cskomponenty 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.

V projektu ServerPages/RazorPagesCounter2.cshtml:

@page

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

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

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

V závislosti na statických prostředcích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci může být vyžadována další práce. Skripty se obvykle přidávají na stránku nebo do oddílu vykreslování zobrazení Scripts a šablon stylů do obsahu elementu <head> rozložení.

Poznámka:

Předchozí příklad vyvolá JSException , pokud Blazor WebAssembly je aplikace předem vyřazena a integrována do Razor aplikace Pages nebo MVC současně 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 JSExceptionkomponent .

Toto je normální chování, protože předkožování 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 zobrazit práci selektorem CSS ve vaší ukázkové aplikaci, zakomentujte specifikaci App kořenové komponenty Client souboru 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á selektor šablon stylů CSS (například /razorpagescounter2 předchozí příklad). Stránka nebo zobrazení se načte s vloženou komponentou a vložená komponenta funguje podle očekávání.

Razor komponenty lze integrovat do Razor aplikací Pages a MVC. Při vykreslení stránky nebo zobrazení je možné předem vykreslit komponenty současně.

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.

Po dokončení konfigurace projektu použijte pokyny v následujících částech v závislosti na požadavcích projektu:

• U komponent, které jsou přímo směrovatelné z uživatelských požadavků. Postupujte podle těchto pokynů, když by návštěvníci měli být schopni vytvořit požadavek HTTP v prohlížeči pro komponentu s direktivou @page .
  • Použití směrovatelných komponent v Razor aplikaci Pages
  • Použití směrovatelných komponent v aplikaci MVC
• Součásti, které nejsou přímo směrovatelné z uživatelských požadavků, najdete v části Vykreslení ze stránky nebo zobrazení . Při vkládání komponent do existujících stránek a zobrazení pomocí pomocné rutiny značek komponent postupujte podle těchto pokynů.

Konfigurace

Následující doprovodné materiály použijte k integraci Razor komponent do stránek a zobrazení existujících Razor stránek nebo aplikace MVC.

1. Přidejte soubor importu do kořenové složky projektu s následujícím obsahem. {APP NAMESPACE} Změňte zástupný symbol na obor názvů projektu.

   _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. V souboru rozložení projektu (Pages/Shared/_Layout.cshtml v Razor aplikacích Pages nebo Views/Shared/_Layout.cshtml v aplikacích MVC):

   • Do elementu přidejte následující <base> značku a HeadOutlet pomocné rutiny <head> značek komponent:

     <base href="~/" />
     <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
         render-mode="ServerPrerendered" />
     

     Hodnota href (základní cesta aplikace) v předchozím příkladu předpokládá, že se aplikace nachází v kořenové cestě URL (/). Pokud je aplikace dílčí aplikací, postupujte podle pokynů v části Základní cesta aplikace v článku Hostitel a nasaďte ASP.NET CoreBlazor.

     Tato komponenta HeadOutlet slouží k vykreslení obsahu hlavy (<head>) pro názvy stránek (PageTitle součást) a další hlavní prvky (HeadContent komponenta) nastavené komponentami Razor . Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

   • <script> Přidejte značku blazor.server.js skriptu bezprostředně před Scripts oddíl vykreslení (@await RenderSectionAsync(...)):

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

     Architektura přidá blazor.server.js skript do aplikace. Do aplikace nemusíte ručně přidávat blazor.server.js soubor skriptu.

   Poznámka:

   Rozložení se obvykle načte prostřednictvím _ViewStart.cshtml souboru.

3. Blazor Server Zaregistrujte služby, ve Program.cs kterých jsou služby zaregistrované:

   builder.Services.AddServerSideBlazor();
   

4. Blazor Přidejte koncový bod centra do koncových bodůProgram.cs, ve kterých se mapují trasy. Za voláním MapRazorPages (Razor Pages) nebo MapControllerRoute (MVC) umístěte následující řádek:

   app.MapBlazorHub();
   

5. Integrujte komponenty do libovolné stránky nebo zobrazení. Přidejte například komponentu Counter do složky projektu Shared .

   Pages/Shared/Counter.razor (Razor Pages) nebo 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 Stránky:

   Na stránce Razor projektu Index aplikace Pages přidejte Counter obor názvů komponenty a vložte ji do stránky. Když se Index stránka načte, komponenta Counter je na stránce předem vyřazována. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol oborem názvů projektu.

   Pages/Index.cshtml:

   @page
   @using {APP NAMESPACE}.Pages.Shared
   @model IndexModel
   @{
       ViewData["Title"] = "Home page";
   }
   
   <component type="typeof(Counter)" render-mode="ServerPrerendered" />
   

   MVC:

   V zobrazení projektu Index aplikace MVC přidejte Counter obor názvů komponenty a vložte ji do zobrazení. Když se Index zobrazení načte, komponenta Counter je na stránce předem vyřazována. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol oborem názvů projektu.

   Views/Home/Index.cshtml:

   @using {APP NAMESPACE}.Views.Shared
   @{
       ViewData["Title"] = "Home Page";
   }
   
   <component type="typeof(Counter)" render-mode="ServerPrerendered" />
   

Další informace najdete v části Vykreslovat komponenty ze stránky nebo zobrazení .

Použití směrovatelných komponent v Razor aplikaci Pages

Tato část se týká přidání komponent, které jsou přímo směrovatelné z uživatelských požadavků.

Podpora směrovatelných Razor komponent v Razor aplikacích Pages:

1. Postupujte podle pokynů v části Konfigurace .

2. Přidejte komponentu App do kořenového adresáře projektu s následujícím obsahem.

   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. _Host Přidejte do projektu stránku s následujícím obsahem. {APP NAMESPACE} Zástupný symbol nahraďte oborem názvů aplikace.

   Pages/_Host.cshtml:

   @page
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   
   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

   Poznámka:

   Předchozí příklad předpokládá, že komponenta HeadOutlet a Blazor skript (_framework/blazor.server.js) jsou vykresleny rozložením aplikace. Další informace najdete v části Konfigurace .

   RenderMode nakonfiguruje, jestli komponenta App :

   • Je předem vytáhlý 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ávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

4. Program.cs Do koncových bodů přidejte trasu s nízkou prioritou pro _Host stránku jako poslední koncový bod:

   app.MapFallbackToPage("/_Host");
   

5. Přidejte do projektu směrovatelné komponenty. Následující příklad je komponenta RoutableCounter založená na Counter komponentě Blazor v šablonách projektu.

   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. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

Použití směrovatelných komponent v aplikaci MVC

Tato část se týká přidání komponent, které jsou přímo směrovatelné z uživatelských požadavků.

Podpora směrovatelných Razor komponent v aplikacích MVC:

1. Postupujte podle pokynů v části Konfigurace .

2. Přidejte komponentu App do kořenového adresáře projektu s následujícím obsahem.

   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. _Host Přidejte do projektu zobrazení s následujícím obsahem. {APP NAMESPACE} Zástupný symbol nahraďte oborem názvů aplikace.

   Views/Home/_Host.cshtml:

   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   
   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

   Poznámka:

   Předchozí příklad předpokládá, že komponenta HeadOutlet a Blazor skript (_framework/blazor.server.js) jsou vykresleny rozložením aplikace. Další informace najdete v části Konfigurace .

   RenderMode nakonfiguruje, jestli komponenta App :

   • Je předem vytáhlý 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ávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

4. Přidejte akci do Home kontroleru.

   Controllers/HomeController.cs:

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

5. Program.cs Do koncových bodů přidejte trasu s nízkou prioritou pro akci kontroleru, která vrací _Host zobrazení:

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

6. Vytvořte Pages složku v aplikaci MVC a přidejte směrovatelné komponenty. Následující příklad je komponenta RoutableCounter založená na Counter komponentě Blazor v šablonách projektu.

   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. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

Vykreslení komponent ze stránky nebo zobrazení

Tato část se týká přidávání komponent na stránky nebo zobrazení, kde nejsou komponenty směrovatelné přímo z uživatelských požadavků.

Pokud chcete vykreslit součást ze stránky nebo zobrazení, použijte pomocnou rutinu značky komponenty.

Vykreslení stavových interaktivních komponent

Stavové interaktivní komponenty lze přidat na Razor stránku nebo zobrazení.

Při vykreslení stránky nebo zobrazení:

• Komponenta je předem vytyčována stránkou nebo zobrazením.
• Počáteční stav součásti použitý pro předkreslování je ztracen.
• Při navázání připojení se vytvoří SignalR nový stav komponenty.

Razor Následující stránka vykreslí komponentuCounter:

<h1>Razor Page</h1>

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

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Další informace naleznete v nápovědě značky komponenty v ASP.NET Core.

Vykreslení neinteraktivních komponent

Na následující Razor stránce Counter se komponenta staticky vykreslí s počáteční hodnotou zadanou pomocí formuláře. Vzhledem k tomu, že se komponenta staticky vykresluje, není komponenta interaktivní:

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

Další informace naleznete v nápovědě značky komponenty v ASP.NET Core.

Obory názvů komponent

Při použití vlastní složky k uložení součástí projektu Razor přidejte obor názvů představující složku do stránky nebo zobrazení nebo do _ViewImports.cshtml souboru. V následujícím příkladu:

• Komponenty jsou uloženy ve Components složce projektu.
• Zástupný {APP NAMESPACE} symbol je obor názvů projektu. Components představuje název složky.

@using {APP NAMESPACE}.Components

Soubor _ViewImports.cshtml se nachází ve Pages složce Razor aplikace Pages nebo Views ve složce aplikace MVC.

Další informace najdete v tématu ASP.NET základní Razor komponenty.

Trvalý předsekenderovaný stav

Bez trvalého předrenderovaného stavu dojde ke ztrátě stavu použitého při předrenderování a při úplném načtení aplikace se musí znovu vytvořit. Pokud je nějaký stav nastaven asynchronně, uživatelské rozhraní může blikáním blikáním, protože se předsekunuté uživatelské rozhraní nahradí dočasnými zástupnými symboly a pak se znovu plně vykreslí.

Chcete-li zachovat stav pro předkazené součásti, použijte pomocníka pro zachování značky stavu součásti (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.

Poznámka:

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. 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 buď webAssembly prerendered (WebAssemblyPrerendered) v hostované Blazor WebAssembly aplikaci nebo ServerPrerendered v Blazor Server aplikaci:

<body>
    ...

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

Rozhodněte se, jaký stav se má služba zachovat 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.

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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

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

    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ředkončování a pak načte stav, který komponentu inicializuje. Pomocné rutiny značky stavu součásti zachová stav komponenty po všech vyvolání 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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

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

Inicializací komponent se stejným stavem, který se používá během předkončování, se všechny nákladné kroky inicializace spustí 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í.

Další Blazor WebAssembly zdroje informací

• Správa stavu: Zpracování předkreslování
• Podpora předrenderování s opožděným načítáním sestavení
• Razor předměty životního cyklu komponent, které se týkají předběžného provedení
  • Inicializace komponent (OnInitialized{Async})
  • Po vykreslení komponenty (OnAfterRender{Async})
  • Stavové opětovné připojení po předkončování: I když se obsah v této části zaměřuje na Blazor Server stavovéSignalR opětovné připojení, scénář předběžného dokončení 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ředrenderování, přečtěte si část o zachování předkončíného stavu tohoto článku.
  • Prerendering with JavaScript interop
• Předměty ověřování a autorizace, které se týkají předběžného vyřazování
  • Obecné aspekty
  • Předběžné nastavení s ověřováním
• Hostitel a nasazení: Blazor WebAssembly
• Zpracování chyb: Prerendering
• OnNavigateAsync při předkreslování dvakrát: Zpracování asynchronních navigačních událostí pomocíOnNavigateAsync

Předem vytyčovaná velikost stavu a SignalR omezení velikosti zprávy

Velká předsekunutá velikost stavu může překročit limit velikosti zprávy okruhu SignalR , což má za následek následující:

• Okruh SignalR se nepodaří inicializovat s chybou v klientovi: Circuit host not initialized.
• Dialogové okno pro opětovné připojení klienta se zobrazí, když okruh selže. Obnovení není možné.

Pokud chcete tento problém vyřešit, použijte některý z následujících přístupů:

• Snižte množství dat, která vkládáte do předkažovaného stavu.
• SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků DoS (DoS).

Další Blazor Server zdroje informací

• Správa stavu: Zpracování předkreslování
• Razor předměty životního cyklu komponent, které se týkají předběžného provedení
  • Inicializace komponent (OnInitialized{Async})
  • Po vykreslení komponenty (OnAfterRender{Async})
  • Stavové opětovné připojení po předkončování
  • Prerendering with JavaScript interop
• Ověřování a autorizace: Obecné aspekty
• Zpracování chyb: Prerendering
• Hostitel a nasazení: Blazor Server
• Zmírnění hrozeb: Skriptování mezi weby (XSS)
• OnNavigateAsync při předkreslování dvakrát: Zpracování asynchronních navigačních událostí pomocíOnNavigateAsync