Prerender a integrace komponent ASP.NET Core Razor

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 @using Client 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 rutinu znač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 Client Server 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 privacy stránku (Razor stránky), přidejte privacy do Server projektu stránku.

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í založené na privacy MVC vytvořte privacy v Server projektu zobrazení.

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.

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 Counter pomocí 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 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>
}

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 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 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 Server Pages/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í.

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

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.

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 v hostovaných Blazor WebAssembly aplikacích
• 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.
• Uživatelské rozhraní pro opětovné připojení v klientovi 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

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 BlazorHosted.Clientobor názvů klientského projektu a 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 soubory _Layout.cshtml 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ů.

   Důležité

   Použití stránky rozložení (_Layout.cshtml) s pomocným pomocníkem značky komponenty pro komponentu HeadOutlet je nutné k řízení <head> obsahu, jako je název stránky (PageTitlesoučást) a další hlavní prvky (HeadContentsoučást). Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

   Proveďte v souboru následující změny _Layout.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 _Layout.cshtml :

     Delete (Odstranit):

     - @namespace {APP NAMESPACE}.Pages
     

     Přidejte:

     @namespace BlazorHosted.Server.Pages
     

   • Přidejte direktivu @using Client 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 _Layout.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>
     

   V souboru _Host.cshtml:

   • Pages Změňte obor názvů na Client obor názvů projektu. Zástupný {APP NAMESPACE} symbol představuje obor názvů stránek aplikace dárců, které poskytly _Host.cshtml soubor:

     Delete (Odstranit):

     - @namespace {APP NAMESPACE}.Pages
     

     Přidejte:

     @namespace BlazorHosted.Client
     

   • render-mode Aktualizujte pomocnou rutinu znač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. V mapování koncového Server bodu projektu změňte Program.cszáložní z index.html tohoto souboru na _Host.cshtml stránku:

   Delete (Odstranit):

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

   Přidejte:

   app.MapFallbackToPage("/_Host");
   

6. Pokud projekty Client Server 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 privacy stránku (Razor stránky), přidejte privacy do Server projektu stránku.

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í založené na privacy MVC vytvořte privacy v Server projektu zobrazení.

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.

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 Counter pomocí 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 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>
}

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 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 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 Server Pages/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í.

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

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:

• Směrovatelné komponenty: Pro komponenty, 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
• Vykreslení komponent ze stránky nebo zobrazení: Pro komponenty, které nejsou přímo směrovatelné z uživatelských požadavků. 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. V souboru rozložení projektu:

   • Do elementu (Razor Pages/Shared/_Layout.cshtml Pages) nebo Views/Shared/_Layout.cshtml MVC přidejte následující <base> značku a HeadOutlet pomocnou rutinu <head> značky komponenty:

     <base href="~/" />
     <component type="typeof(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(...)) v rozložení aplikace.

     Pages/Shared/_Layout.cshtml (Razor Pages) nebo Views/Shared/_Layout.cshtml (MVC):

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

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

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.

   Pages/_Host.cshtml:

   @page "/blazor"
   @namespace {APP NAMESPACE}.Pages.Shared
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @{
       Layout = "_Layout";
   }
   
   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

   V tomto scénáři komponenty používají sdílený _Layout.cshtml soubor pro jejich rozložení.

   Důležité

   Použití stránky rozložení (_Layout.cshtml) s pomocným pomocníkem značky komponenty pro komponentu HeadOutlet je nutné k řízení <head> obsahu, jako je název stránky (PageTitlesoučást) a další hlavní prvky (HeadContentsoučást). Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

   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.

   Views/Home/_Host.cshtml:

   @namespace {APP NAMESPACE}.Views.Shared
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @{
       Layout = "_Layout";
   }
   
   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

   Komponenty používají sdílený _Layout.cshtml soubor pro jejich rozložení.

   Důležité

   Použití stránky rozložení (_Layout.cshtml) s pomocným pomocníkem značky komponenty pro komponentu HeadOutlet je nutné k řízení <head> obsahu, jako je název stránky (PageTitlesoučást) a další hlavní prvky (HeadContentsoučást). Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

   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.

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

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.
• Uživatelské rozhraní pro opětovné připojení v klientovi 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)

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 BlazorHosted.Clientobor názvů klientského projektu a 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í řádek vProgram.cs:

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

4. Pages/_Host.cshtml Přidejte soubor do Server složky projektuPages. Soubor můžete získat _Host.cshtml z projektu vytvořeného Blazor Server ze šablony pomocí dotnet new blazorserver -o BlazorServer příkazu v příkazovém prostředí ( -o BlazorServer možnost vytvoří složku pro projekt). Po umístění Pages/_Host.cshtml souboru do Server projektu hostovaného Blazor WebAssembly řešení proveďte v souboru následující změny:

   • Zadejte direktivu @using Client pro projekt (například @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:

     - <link href="css/site.css" rel="stylesheet" />
     - <link href="_content/BlazorServer/_framework/scoped.styles.css" rel="stylesheet" />
     + <link href="css/app.css" rel="stylesheet" />
     + <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
     

     Poznámka:

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

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

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

   • Blazor Aktualizujte zdroj skriptu tak, aby používal skript na straně Blazor WebAssembly klienta:

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

5. Server V Startup.Configure projektu změňte náhradní soubor ze index.html souboru na _Host.cshtml stránku.

   Startup.cs:

   - endpoints.MapFallbackToFile("index.html");
   + endpoints.MapFallbackToPage("/_Host");
   

6. Pokud projekty Client Server 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 v tomto článku pro vkládání Razor součástí klientské Blazor WebAssembly aplikace na stránky a zobrazení serverové aplikace vyžadují další konfiguraci.

V projektu použijte výchozí Razor soubor Server rozložení Pages nebo MVC. Projekt Server musí obsahovat následující soubory a složky.

Razor Stránky:

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

MVC:

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

Získejte předchozí soubory z aplikace vytvořené ze Razor šablony projektu Pages nebo MVC. Další informace najdete v tématu Kurz: Začínáme se stránkami Razor v ASP.NET Core nebo Začínáme s ASP.NET Core MVC.

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

Aktualizujte importovaný soubor rozložení (_Layout.cshtml) tak, aby zahrnoval Client styly projektu. V následujícím příkladu Client je BlazorHosted.Clientobor názvů projektu . Prvek <title> lze aktualizovat současně.

Pages/Shared/_Layout.cshtml (Razor Pages) nebo Views/Shared/_Layout.cshtml (MVC):

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-   <title>@ViewData["Title"] - DonorProject</title>
+   <title>@ViewData["Title"] - BlazorHosted</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
+   <link href="css/app.css" rel="stylesheet" />
+   <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
</head>

Importované rozložení obsahuje Home a Privacy navigační odkazy. Pokud chcete vytvořit Home odkaz na hostované Blazor WebAssembly aplikace, změňte hypertextový odkaz:

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

Pokud chcete, aby Privacy odkaz vedl na privacy stránku, přidejte privacy do Server projektu stránku.

Pages/Privacy.cshtmlServer v projektu:

@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}

<h1>Privacy Policy</h1>

Pokud je upřednostňované zobrazení založené na privacy MVC, vytvořte privacy v Server projektu zobrazení.

View/Home/Privacy.cshtml:

@{
    ViewData["Title"] = "Privacy Policy";
}

<h1>@ViewData["Title"]</h1>

Home V kontroleru vraťte zobrazení.

Controllers/HomeController.cs:

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

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.

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 Counter pomocí 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 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>
}

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

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í kořenové komponenty Client v Program.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 Client je BlazorHosted.Clientobor názvů projektu .

Client V Program.cs projektu přidejte obor názvů pro komponenty 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 Server Pages/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í.

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:

• Směrovatelné komponenty: Pro komponenty, 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
• Vykreslení komponent ze stránky nebo zobrazení: Pro komponenty, které nejsou přímo směrovatelné z uživatelských požadavků. 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

Existující Razor aplikace Pages nebo MVC může integrovat Razor komponenty do stránek a zobrazení:

1. V souboru rozložení projektu:

   • Do elementu (Pages) nebo Views/Shared/_Layout.cshtml (MVC) přidejte následující <base> značku:Razor <head> Pages/Shared/_Layout.cshtml

     <base href="~/" />
     

     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.

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

     Pages/Shared/_Layout.cshtml (Razor Pages) nebo Views/Shared/_Layout.cshtml (MVC):

         ...
         <script src="_framework/blazor.server.js"></script>
     
         @await RenderSectionAsync("Scripts", required: false)
     </body>
     

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

2. 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.JSInterop
   @using {APP NAMESPACE}
   

3. Blazor Server Zaregistrujte službu v Startup.ConfigureServices.

   V Startup.cs:

   services.AddServerSideBlazor();
   

4. Blazor Přidejte koncový bod centra do koncových bodů (app.UseEndpoints) z Startup.Configure.

   Startup.cs:

   endpoints.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";
   }
   
   <div>
       <component type="typeof(Counter)" render-mode="ServerPrerendered" />
   </div>
   

   V předchozím příkladu nahraďte {APP NAMESPACE} zástupný symbol oborem názvů aplikace.

   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";
   }
   
   <div>
       <component type="typeof(Counter)" render-mode="ServerPrerendered" />
   </div>
   

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

   Poznámka:

   S vydáním ASP.NET Core 5.0.1 a pro všechny další verze 5.x komponenta Router zahrnuje parametr PreferExactMatches nastavený na @true. Další informace najdete v tématu Migrace z ASP.NET Core 3.1 na verzi 5.0.

3. _Host Přidejte do projektu stránku s následujícím obsahem.

   Pages/_Host.cshtml:

   @page "/blazor"
   @{
       Layout = "_Layout";
   }
   
   <app>
       <component type="typeof(App)" render-mode="ServerPrerendered" />
   </app>
   

   Komponenty používají sdílený _Layout.cshtml soubor pro jejich rozložení.

   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. Startup.Configure Do koncových bodů Startup.cspřidejte trasu s nízkou prioritou pro _Host stránku jako poslední koncový bod:

   endpoints.MapFallbackToPage("/_Host");
   

   Následující příklad ukazuje přidaný řádek v typické konfiguraci koncového bodu aplikace:

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapRazorPages();
       endpoints.MapBlazorHub();
       endpoints.MapFallbackToPage("/_Host");
   });
   

5. Přidejte do projektu směrovatelné komponenty.

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

   Poznámka:

   S vydáním ASP.NET Core 5.0.1 a pro všechny další verze 5.x komponenta Router zahrnuje parametr PreferExactMatches nastavený na @true. Další informace najdete v tématu Migrace z ASP.NET Core 3.1 na verzi 5.0.

3. _Host Přidejte do projektu zobrazení s následujícím obsahem.

   Views/Home/_Host.cshtml:

   @{
       Layout = "_Layout";
   }
   
   <app>
       <component type="typeof(App)" render-mode="ServerPrerendered" />
   </app>
   

   Komponenty používají sdílený _Layout.cshtml soubor pro jejich rozložení.

   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. Startup.Configure Do koncových bodů Startup.cspřidejte trasu s nízkou prioritou pro akci kontroleru, která vrátí _Host zobrazení:

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

   Následující příklad ukazuje přidaný řádek v typické konfiguraci koncového bodu aplikace:

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllerRoute(
           name: "default",
           pattern: "{controller=Home}/{action=Index}/{id?}");
       endpoints.MapBlazorHub();
       endpoints.MapFallbackToController("Blazor", "Home");
   });
   

6. Přidejte do projektu směrovatelné komponenty.

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

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.

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

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.
• Uživatelské rozhraní pro opětovné připojení v klientovi 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)

Razor Integrace komponent do Razor aplikací Pages a MVC v hostované Blazor WebAssemblyřešení se podporuje v ASP.NET Core v .NET 5 nebo novějším. Vyberte verzi tohoto článku pro .NET 5 nebo novější.

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:

• Směrovatelné komponenty: Pro komponenty, 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
• Vykreslení komponent ze stránky nebo zobrazení: Pro komponenty, které nejsou přímo směrovatelné z uživatelských požadavků. 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

Existující Razor aplikace Pages nebo MVC může integrovat Razor komponenty do stránek a zobrazení:

1. V souboru rozložení projektu:

   • Do elementu (Pages) nebo Views/Shared/_Layout.cshtml (MVC) přidejte následující <base> značku:Razor <head> Pages/Shared/_Layout.cshtml

     + <base href="~/" />
     

     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.

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

     Pages/Shared/_Layout.cshtml (Razor Pages) nebo Views/Shared/_Layout.cshtml (MVC):

         ...
         <script src="_framework/blazor.server.js"></script>
     
         @await RenderSectionAsync("Scripts", required: false)
     </body>
     

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

2. 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.JSInterop
   @using {APP NAMESPACE}
   

3. Blazor Server Zaregistrujte službu v Startup.ConfigureServices.

   Startup.cs:

   services.AddServerSideBlazor();
   

4. Blazor Přidejte koncový bod centra do koncových bodů (app.UseEndpoints) z Startup.Configure.

   Startup.cs:

   endpoints.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";
   }
   
   <div>
       <component type="typeof(Counter)" render-mode="ServerPrerendered" />
   </div>
   

   V předchozím příkladu nahraďte {APP NAMESPACE} zástupný symbol oborem názvů aplikace.

   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";
   }
   
   <div>
       <component type="typeof(Counter)" render-mode="ServerPrerendered" />
   </div>
   

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(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. _Host Přidejte do projektu stránku s následujícím obsahem.

   Pages/_Host.cshtml:

   @page "/blazor"
   @{
       Layout = "_Layout";
   }
   
   <app>
       <component type="typeof(App)" render-mode="ServerPrerendered" />
   </app>
   

   Komponenty používají sdílený _Layout.cshtml soubor pro jejich rozložení.

   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. Startup.Configure Do koncových bodů Startup.cspřidejte trasu s nízkou prioritou pro _Host stránku jako poslední koncový bod:

   endpoints.MapFallbackToPage("/_Host");
   

   Následující příklad ukazuje přidaný řádek v typické konfiguraci koncového bodu aplikace:

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapRazorPages();
       endpoints.MapBlazorHub();
       endpoints.MapFallbackToPage("/_Host");
   });
   

5. Přidejte do projektu směrovatelné komponenty.

   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. 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(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. _Host Přidejte do projektu zobrazení s následujícím obsahem.

   Views/Home/_Host.cshtml:

   @{
       Layout = "_Layout";
   }
   
   <app>
       <component type="typeof(App)" render-mode="ServerPrerendered" />
   </app>
   

   Komponenty používají sdílený _Layout.cshtml soubor pro jejich rozložení.

   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. Startup.Configure Do koncových bodů Startup.cspřidejte trasu s nízkou prioritou pro akci kontroleru, která vrátí _Host zobrazení:

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

   Následující příklad ukazuje přidaný řádek v typické konfiguraci koncového bodu aplikace:

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllerRoute(
           name: "default",
           pattern: "{controller=Home}/{action=Index}/{id?}");
       endpoints.MapBlazorHub();
       endpoints.MapFallbackToController("Blazor", "Home");
   });
   

6. Přidejte do projektu směrovatelné komponenty.

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

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.

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.
• Uživatelské rozhraní pro opětovné připojení v klientovi 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)