Předběžné vykreslení a integrace ASP.NET Core Razor komponent

  • Článek
  • 18 min ke čtení

Razor Komponenty je možné integrovat do Razor aplikací Pages a MVC v hostovaném Blazor WebAssembly řešení. Když se stránka nebo zobrazení vykreslí, komponenty mohou být současně vykreslovány ve stejnou dobu.

Konfigurace řešení

Konfigurace předběžného vykreslení

Nastavení předběžného vykreslení pro hostovanou Blazor WebAssembly aplikaci:

  1. Hostování Blazor WebAssembly aplikace v ASP.NET Core aplikaci Samostatnou aplikaci je možné přidat do ASP.NET Core řešení, nebo můžete použít hostovanou aplikaci vytvořenou ze šablony projektu s Blazor WebAssembly Blazor WebAssembly hostovanou možností: Blazor WebAssembly

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

    Pro příklady v tomto článku je obor názvů projektu klienta a obor názvů projektu BlazorHosted.Client serveru je BlazorHosted.Server .

  2. Odstraňte wwwroot/index.html soubor z Blazor WebAssembly Client projektu.

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

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

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

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

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

      Odstranit:

      - @namespace {APP NAMESPACE}.Pages

      Přidejte:

      @namespace BlazorHosted.Server.Pages

    • Na @using začátek souboru Client přidejte direktivu pro projekt:

      @using BlazorHosted.Client

    • Aktualizujte odkazy na šablony stylů tak, aby odkazly na šablony stylů projektu WebAssembly. V následujícím příkladu je obor názvů projektu klienta BlazorHosted.Client . Zástupný {APP NAMESPACE} symbol představuje obor názvů aplikace, která soubor _Layout.cshtml poskytla. Aktualizujte pomocníka značek komponent (značku) pro komponentu tak, aby <component> HeadOutlet byla komponenta předem vykreslována.

      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

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

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

      Odstranit:

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

      Přidejte:

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

    V souboru _Host.cshtml:

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

      Odstranit:

      - @namespace {APP NAMESPACE}.Pages

      Přidejte:

      @namespace BlazorHosted.Client

    • Aktualizujte render-mode pomocná komponenta značek komponent tak, aby se kořenová App komponenta vykreslována pomocí WebAssemblyPrerendered :

      Odstranit:

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

      Přidejte:

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

  5. V mapování koncového Server bodu projektu v souboru Program.cs změňte záložní soubor na index.html _Host.cshtml stránku:

    Odstranit:

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

    Přidejte:

    app.MapFallbackToPage("/_Host");

  6. Spusťte Server projekt. Hostovaná Blazor WebAssembly aplikace je předem vykreslena Server projektem pro klienty.

Konfigurace pro vkládání komponent Razor na stránky a zobrazení

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

Projekt Server musí mít 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

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

  • Visual Studio nové nástroje pro vytváření projektů.
  • Otevření příkazového prostředí a spuštění dotnet new razor -o {APP NAME} Razor (Pages) nebo dotnet new mvc -o {APP NAME} (MVC) Možnost s hodnotou zástupného symbolu poskytuje název aplikace a vytvoří -o|--output {APP NAME} složku pro aplikaci.

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

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í ( _Layout.cshtml ) tak, aby zahrnoval Client styly projektu. V následujícím příkladu je Client obor názvů projektu BlazorHosted.Client . Prvek <title> lze aktualizovat současně. Zástupný symbol představuje název aplikace projektu {APP NAME} v aplikaci.

Pages/Shared/_Layout.cshtml ( Razor Stránky) 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"] - {APP NAME}</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 navigační Home Privacy odkazy a . Pokud chcete, Home aby odkaz odkazoval na hostovanou Blazor WebAssembly aplikaci, 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, Privacy aby odkaz vedl na stránku ochrany osobních údajů ( Razor Stránky), přidejte do projektu stránku ochrany Server osobních údajů.

Pages/Privacy.cshtml v Server projektu:

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

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

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

View/Home/Privacy.cshtml v Server projektu:

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

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

V Home 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, nezapomeňte aktualizovat všechny obory názvů v souborech tak, aby odpovídaly názvům projektu Server (například BlazorHosted.Server ).

Naimportujte statické prostředky do projektu ze složky projektu s názvem Server wwwroot project:

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

Pokud se projekt se vytvoří ze šablony projektu ASP.NET Core a soubory se neupraví, můžete do projektu zkopírovat celou složku z projektu s ikonou a odebrat wwwroot Server soubor favicon.ico ikony.

Upozornění

Nepoužívejte stejný soubor (například favicon.ico ) do složek Client a Server wwwroot . Pokud je stejný soubor v obou složkách, vyvolá se výjimka, protože statický prostředek v každé složce sdílí stejnou kořenovou cestu webu:

Statický webový prostředek ...\ipicon.ico má konfliktní kořenovou cestu webu /wwwroot/přihmotnit.ico se souborem projektu wwwroot\předávk.ico.

Proto hostování statického assetu v obou wwwroot složce, nikoli v obou.

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

  • Vykreslení komponent na stránce nebo v zobrazení pomocí pomocníka pro značky komponent
  • Vykreslení komponent na stránce nebo zobrazení pomocí selektoru CSS

Vykreslení komponent na stránce nebo v zobrazení pomocí pomocníka pro značky komponent

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

V následujícím Razor příkladu stránky Counter se komponenta vykreslí na stránce. Aby byla komponenta interaktivní, skript se zahrne do části Blazor WebAssembly vykreslení stránky. Pokud se chcete vyhnout použití plného oboru názvů pro komponentu s pomocníkem značky komponenty ( ), přidejte direktivu pro obor názvů Counter {APP ASSEMBLY}.Pages.Counter projektu @using Pages klienta. V následujícím příkladu je Client obor názvů projektu BlazorHosted.Client .

V Server projektu Pages/RazorPagesCounter1.cshtml :

@page
@using BlazorHosted.Client.Pages

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

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

Spusťte Server projekt. Přejděte na Razor stránku na adrese /razorpagescounter1 . Komponenta prerendered Counter je vložená na stránce.

RenderMode konfiguruje, jestli komponenta:

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

Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

Další práce může být nutná v závislosti na statických discích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci. Skripty se obvykle přidávají do části vykreslení stránky nebo zobrazení a šablony stylů se přidávají do Scripts obsahu <head> elementu 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 řešení v souboru Client kořenové Blazor WebAssembly Program.cs komponenty. V následujícím příkladu je komponenta deklarována jako kořenová komponenta se selektorem ŠABLON STYLŮ CSS, který vybere prvek s elementem , Counter id který odpovídá counter-component . V následujícím příkladu je Client obor názvů projektu BlazorHosted.Client .

V souboru projektu přidejte na začátek souboru obor názvů pro součásti Program.cs Client Razor projektu:

using BlazorHosted.Client.Pages;

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

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

V následujícím Razor příkladu stránky Counter se komponenta vykreslí na stránce. Aby byla komponenta interaktivní, skript se zahrne do části Blazor WebAssembly vykreslení stránky.

V Server projektu Pages/RazorPagesCounter2.cshtml :

@page

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

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

Spusťte Server projekt. Přejděte na Razor stránku na adrese /razorpagescounter2 . Komponenta prerendered Counter je vložená na stránce.

Další práce může být nutná v závislosti na statických discích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci. Skripty se obvykle přidávají do části vykreslení stránky nebo zobrazení a šablony stylů se přidávají do Scripts obsahu <head> elementu rozložení.

Poznámka

Předchozí příklad vyvolá , pokud je aplikace předem vykreslená a integrovaná do pages nebo aplikace MVC současně s použitím selektoru JSException Blazor WebAssembly Razor CSS. Když přejdete na jednu z komponent projektu nebo přejdete na stránku nebo zobrazení s vloženou komponentou, vyvolá se jedna Client Razor nebo více Server JSException .

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

Pokud jste pracovali s příklady v předchozích částech a chcete jen vidět, jak funguje selektor ŠABLON STYLŮ CSS v ukázkové aplikaci, zakomentuje specifikaci kořenové komponenty souboru App Client Program.cs projektu:

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

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

Razor Komponenty je možné integrovat do Razor aplikací Pages a MVC v Blazor Server aplikaci. Když se stránka nebo zobrazení vykreslí, komponenty mohou být současně vykreslovány ve stejnou dobu.

Po konfiguraci projektu použijtepokyny v následujících částech v závislosti na požadavcích projektu:

Konfigurace

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

  1. V souboru rozložení projektu:

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

      <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 Hostování a nasazení ASP.NET Core Blazor článku.

    • Přidejte <script> značku pro skript bezprostředně před oddíl vykreslování ( ) v rozložení blazor.server.js Scripts @await RenderSectionAsync(...) aplikace.

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

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

      Rozhraní přidá blazor.server.js skript do aplikace. Do aplikace není potřeba ručně blazor.server.js přidávat soubor skriptu.

  2. Do kořenové složky projektu přidejte soubor imports s následujícím obsahem. Zástupný {APP NAMESPACE} text změňte 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. Zaregistrujte Blazor Server služby, ve Program.cs kterých jsou služby zaregistrované:

    builder.Services.AddServerSideBlazor();

  4. Přidejte Blazor koncový bod centra do koncových Program.cs bodů, kde se mapují trasy.

    Za volání funkce ( MapRazorPages Pages) nebo Razor MapControllerRoute (MVC) umístěte následující řádek:

    app.MapBlazorHub();

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

    Pages/Shared/Counter.razor ( Razor Stránky) 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 projektu aplikace Pages přidejte obor názvů komponenty a vložte Index Razor ji na Counter stránku. Po Index načtení stránky se Counter komponenta na stránce vykresluje předem. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný text 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 aplikace MVC přidejte obor názvů komponenty a vložte Index Counter komponentu do zobrazení. Při Index načtení zobrazení se Counter komponenta na stránce vykresluje předem. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný text 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 Vykreslení komponent 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 App komponentu 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. Přidejte _Host 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 své rozložení.

    RenderMode konfiguruje, jestli App komponenta:

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

    Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

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

    app.MapFallbackToPage("/_Host");

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

    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 do směrovatelné RoutableCounter komponenty na /routable-counter adrese .

Další informace o oborech názvů najdete v části Obory názvů komponent.

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 App komponentu 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. Přidejte _Host 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 své rozložení.

    RenderMode konfiguruje, jestli App komponenta:

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

    Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

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

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

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

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

    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 do směrovatelné RoutableCounter komponenty na /routable-counter adrese .

Další informace o oborech názvů najdete v části Obory názvů komponent.

Vykreslení komponent ze stránky nebo zobrazení

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

Pokud chcete vykreslit komponentu ze stránky nebo zobrazení, použijte pomocníka značky komponenty.

Vykreslování 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 vykreslena se stránkou nebo zobrazením.
  • Počáteční stav součásti, který se používá pro předvykreslování, bude ztracen.
  • Po navázání připojení se vytvoří nový stav součásti SignalR .

Následující Razor stránka vykreslí Counter součást:

<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 tématu Pomocná značka komponenty v ASP.NET Core.

Vykreslit neinteraktivní součásti

Na následující Razor stránce Counter je komponenta staticky vykreslena s počáteční hodnotou, která je zadána pomocí formuláře. Vzhledem k tomu, že je komponenta staticky vykreslena, tato součást není 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 tématu Pomocná značka komponenty v ASP.NET Core.

Obory názvů součásti

Při použití vlastní složky pro uložení Razor součástí projektu 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.
  • {APP NAMESPACE}Zástupný symbol je obor názvů projektu. Components představuje název složky.
@using {APP NAMESPACE}.Components

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

Další informace naleznete v tématu RazorASP.NET Core Součásti.

Zachovat předem vykreslený stav

Bez zachování stavu před vykreslením se stav používaný při předvykreslování ztratí a musí se znovu vytvořit, když se aplikace úplně načte. Pokud se některý stav nastaví asynchronně, uživatelské rozhraní se může blikat, protože předem vygenerované uživatelské rozhraní se nahradí dočasnými zástupnými symboly a pak se znovu vykreslí.

Chcete-li tyto problémy vyřešit, Blazor nástroj podporuje trvalý stav na předem vykreslené stránce pomocí pomocné rutiny pro značky stavu součásti. Do uzavírací značky přidejte značku pomocníka značek <persist-component-state /> </body> .

Pages/_Layout.cshtml:

<body>
    ...

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

V aplikaci se rozhodněte, jaký stav chcete zachovat pomocí PersistentComponentState služby. PersistentComponentState.RegisterOnPersistingUdálost se aktivuje těsně před tím, než je stav uložený na stránce předem vykreslené, která umožňuje komponentě načíst stav při inicializaci komponenty.

Následující příklad ukazuje, jak je předpověď počasí v FetchData komponentě z hostované Blazor WebAssembly aplikace na základě Blazor šablony projektu trvalá během předběžného vykreslování a pak načtena k inicializaci komponenty. Pozastavená podpora značek stavu součásti uchovává stav součásti po všech voláních součástí.

Pages/FetchData.razor:

@page "/fetchdata"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<h1>Weather forecast</h1>

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

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

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

    protected override async Task OnInitializedAsync()
    {
        _persistingSubscription = ApplicationState.RegisterOnPersisting(PersistForecasts);

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

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

        return Task.CompletedTask;
    }

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

Když inicializujete komponenty se stejným stavem použitým při předvykreslování, všechny nákladné kroky inicializace se spustí jenom jednou. Vykreslené uživatelské rozhraní také odpovídá předgenerovanému uživatelskému rozhraní, takže v prohlížeči nedochází k blikání.

Další Blazor WebAssembly zdroje informací

Další Blazor Server zdroje informací

Razor komponenty lze integrovat do Razor stránek a aplikací MVC v hostovaném Blazor WebAssembly řešení. Po vykreslení stránky nebo zobrazení mohou být komponenty předem vykresleny ve stejnou dobu.

Konfigurace řešení

Konfigurace předvykreslování

Nastavení předvykreslování pro hostovanou Blazor WebAssembly aplikaci:

  1. hostování Blazor WebAssembly aplikace v aplikaci ASP.NET Core. samostatnou Blazor WebAssembly aplikaci lze přidat do řešení ASP.NET Core nebo můžete použít hostovanou Blazor WebAssembly aplikaci vytvořenou ze Blazor WebAssembly šablony projektu s možností hostovat:

    • Visual Studio: v dialogovém okně další informace zaškrtněte políčko ASP.NET Core hostované při vytváření Blazor WebAssembly aplikace. V tomto článku se pro toto řešení jmenuje BlazorHosted .
    • Visual Studio Code příkazové prostředí rozhraní příkazového řádku/.NET: dotnet new blazorwasm -ho (použijte -ho|--hosted možnost). Pomocí -o|--output {LOCATION} Možnosti vytvořte složku pro řešení a nastavte obory názvů projektu řešení. V tomto článku se jedná o řešení s názvem BlazorHosted ( dotnet new blazorwasm -ho -o BlazorHosted ).

    V příkladech v tomto článku je obor názvů klientského projektu BlazorHosted.Client a obor názvů projektu serveru BlazorHosted.Server .

  2. Odstraňte wwwroot/index.html soubor z Blazor WebAssembly Client projektu.

  3. V Client projektu odstraňte následující řádek v Program.cs :

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

  4. Přidejte Pages/_Host.cshtml soubor do Server Pages složky projektu. Můžete získat _Host.cshtml soubor z projektu vytvořeného z Blazor Server š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 @using direktivu pro Client projekt (například @using BlazorHosted.Client ).

    • Aktualizujte odkazy na šablonu stylů tak, aby odkazovaly na šablony stylů projektu WebAssembly. V následujícím příkladu je obor názvů klientského projektu BlazorHosted.Client :

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

      Ponechte <link> element, který požaduje šablonu pro spuštění ( css/bootstrap/bootstrap.min.css ) na místě.

    • Aktualizujte render-mode pomocníka značek komponenty a proprerender kořenovou App komponentu pomocí WebAssemblyPrerendered :

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

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

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

  5. V Startup.Configure Server projektu změňte zálohu ze index.html souboru na _Host.cshtml stránku.

    Startup.cs:

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

  6. Spusťte Server projekt. Hostovaná Blazor WebAssembly aplikace je předvykreslena Server projektem pro klienty.

Konfigurace pro vkládání Razor součástí na stránky a zobrazení

Následující části a příklady v tomto článku pro vkládání Razor součástí klientské Blazor WebAssembly aplikace do stránek a zobrazení serverové aplikace vyžadují další konfiguraci.

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

Razor Stránky

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

NÁVRHOVÝ

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

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

Aktualizujte obory názvů v importovaném _ViewImports.cshtml souboru tak, aby odpovídaly hodnotám používaným Server projektem přijímání souborů.

Aktualizujte soubor importovaných rozložení ( _Layout.cshtml ) tak, aby obsahoval Client styly projektu. V následujícím příkladu Client je obor názvů projektu BlazorHosted.Client . <title>Element lze aktualizovat ve stejnou dobu.

Pages/Shared/_Layout.cshtml ( Razor Stránky) 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í obsahují Home a Privacy navigační odkazy. Odkaz na hostovanou aplikaci provedete tak Home Blazor WebAssembly , že změní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>

Chcete-li Privacy , aby propojení vedlo na stránku soukromí, přidejte do projektu stránku ochrany osobních údajů Server .

Pages/Privacy.cshtml v Server projektu:

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

<h1>Privacy Policy</h1>

Pokud je preferované zobrazení ochrany osobních údajů založené na MVC, vytvořte v projektu zobrazení osobních údajů Server .

View/Home/Privacy.cshtml:

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

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

V Home kontroleru vraťte zobrazení.

Controllers/HomeController.cs:

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

Naimportujte do projektu Server statické prostředky ze složky projektu s projektem: wwwroot

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

Pokud se projekt se vytvoří ze šablony projektu ASP.NET Core a soubory se neupraví, můžete do projektu zkopírovat celou složku z projektu s ikonou a odebrat wwwroot Server soubor favicon.ico ikony.

Poznámka

Pokud projekty a obsahují ve svých složkách stejný statický prostředek (například ), vyvolá se výjimka, protože statický prostředek v každé složce sdílí stejnou kořenovou Client Server cestu wwwroot favicon.ico webu:

Statický webový prostředek '...\ipicon.ico' má konfliktní kořenovou cestu webu '/wwwroot/přihánět.ico' se souborem projektu 'wwwroot\posicon.ico'.

Proto hostování statického assetu v obou wwwroot složce, ne v obou.

Vykreslení komponent na stránce nebo v zobrazení pomocí pomocníka pro značky komponent

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

V následujícím Razor příkladu stránky Counter se komponenta vykreslí na stránce. Aby byla komponenta interaktivní, skript se zahrne do části Blazor WebAssembly vykreslení stránky. Pokud se chcete vyhnout použití plného oboru názvů pro komponentu s pomocníkem značky komponenty ( ), přidejte direktivu pro obor názvů Counter {APP ASSEMBLY}.Pages.Counter projektu @using Pages klienta. V následujícím příkladu je Client obor názvů projektu BlazorHosted.Client .

V Server projektu Pages/RazorPagesCounter1.cshtml :

@page
@using BlazorHosted.Client.Pages

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

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

Spusťte Server projekt. Přejděte na Razor stránku na adrese /razorpagescounter1 . Komponenta prerendered Counter je vložená na stránce.

RenderMode konfiguruje, jestli komponenta:

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

Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

Další práce může být nutná v závislosti na statických discích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci. Skripty se obvykle přidávají do části vykreslení stránky nebo zobrazení a šablony stylů se přidávají do Scripts obsahu <head> elementu rozložení.

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

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

V části projektu přidejte na začátek souboru obor názvů pro součásti Program.cs Client Razor projektu:

+ using BlazorHosted.Client.Pages;

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

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

V následujícím Razor příkladu stránky Counter se komponenta vykreslí na stránce. Aby byla komponenta interaktivní, skript se zahrne do části Blazor WebAssembly vykreslení stránky.

V Server projektu Pages/RazorPagesCounter2.cshtml :

@page

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

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

Spusťte Server projekt. Přejděte na Razor stránku na adrese /razorpagescounter2 . Komponenta prerendered Counter je vložená na stránce.

Další práce může být nutná v závislosti na statických discích, které komponenty používají, a způsobu uspořádání stránek rozložení v aplikaci. Skripty se obvykle přidávají do části vykreslení stránky nebo zobrazení a šablony stylů se přidávají do Scripts obsahu <head> elementu rozložení.

Poznámka

Předchozí příklad vyvolá , pokud je aplikace předem vykreslená a integrovaná do aplikace Pages nebo MVC současně se JSException Blazor WebAssembly Razor selektorem CSS. Při přechodu na jednu ze součástí projektu Client Razor se vyvolá následující výjimka:

Microsoft.JSInterop.JSException: Nelze najít žádný odpovídající selektor elementů #counter-component.

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

Razor Komponenty je možné integrovat do Razor aplikací Pages a MVC v Blazor Server aplikaci. Při vykreslení stránky nebo zobrazení je možné současně vykreslit komponenty.

Po konfiguraci projektu použijtepokyny v následujících částech v závislosti na požadavcích projektu:

Konfigurace

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

  1. V souboru rozložení projektu:

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

      + <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 Hostování a nasazení ASP.NET Core Blazor článku.

    • Přidejte <script> značku pro skript bezprostředně před oddíl blazor.server.js Scripts vykreslování.

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

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

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Rozhraní přidá blazor.server.js skript do aplikace. Do aplikace není potřeba ručně blazor.server.js přidávat soubor skriptu.

  2. Do kořenové složky projektu přidejte soubor imports s následujícím obsahem. Zástupný {APP NAMESPACE} text změňte 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. Zaregistrujte Blazor Server službu v Startup.ConfigureServices .

    Startup.cs:

    + services.AddServerSideBlazor();

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

    Startup.cs:

    + endpoints.MapBlazorHub();

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

    Pages/Shared/Counter.razor ( Razor Stránky) 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 projektu aplikace Pages přidejte obor názvů komponenty a vložte Index Razor Counter komponentu na stránku. Po Index načtení stránky se Counter komponenta na stránce vykresluje předem. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný text 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 zástupný text oborem názvů {APP NAMESPACE} aplikace.

    MVC:

    V zobrazení projektu aplikace MVC přidejte obor názvů komponenty a vložte Index Counter komponentu do zobrazení. Při Index načtení zobrazení se Counter komponenta na stránce vykresluje předem. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný text 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 Vykreslení komponent 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 App komponentu 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 verze ASP.NET Core 5.0.1 a pro jakékoli další verze 5.x zahrnuje komponenta parametr Router PreferExactMatches nastavený na @true . Další informace naleznete v tématu Migrace z ASP.NET Core 3.1 na 5.0.

  3. Přidejte _Host 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 své rozložení.

    RenderMode konfiguruje, jestli App komponenta:

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

    Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

  4. V koncových bodech souboru přidejte jako poslední koncový bod trasu s nízkou Startup.Configure Startup.cs _Host prioritou pro stránku:

    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 do směrovatelné RoutableCounter komponenty na /routable-counter adrese .

Další informace o oborech názvů najdete v části Obory názvů komponent.

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 App komponentu 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 verze ASP.NET Core 5.0.1 a pro jakékoli další verze 5.x zahrnuje komponenta parametr Router PreferExactMatches nastavený na @true . Další informace naleznete v tématu Migrace z ASP.NET Core 3.1 na 5.0.

  3. Přidejte _Host 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í _Layout.cshtml pro své rozložení sdílený soubor.

    RenderMode nakonfiguruje, jestli App součást:

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

    Další informace o pomocníka značek komponenty, včetně předávání parametrů a RenderMode konfigurací, naleznete v tématu Pomocná značka komponenty v ASP.NET Core .

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

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

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

    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é součásti.

    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 do směrovatelný RoutableCounter komponenty na adrese /routable-counter .

Další informace o oborech názvů najdete v části věnované oborům názvů komponent .

Vykreslení komponent ze stránky nebo zobrazení

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

Chcete-li vykreslit komponentu ze stránky nebo zobrazení, použijte pomocníka značek 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 vykreslena se stránkou nebo zobrazením.
  • Počáteční stav součásti, který se používá pro předvykreslování, bude ztracen.
  • Po navázání připojení se vytvoří nový stav součásti SignalR .

Následující Razor stránka vykreslí Counter součást:

<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 tématu Pomocná značka komponenty v ASP.NET Core.

Vykreslit neinteraktivní součásti

Na následující Razor stránce Counter je komponenta staticky vykreslena s počáteční hodnotou, která je zadána pomocí formuláře. Vzhledem k tomu, že je komponenta staticky vykreslena, tato součást není 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 tématu Pomocná značka komponenty v ASP.NET Core.

Obory názvů součásti

Při použití vlastní složky pro uložení Razor součástí projektu 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.
  • {APP NAMESPACE}Zástupný symbol je obor názvů projektu. Components představuje název složky.
@using {APP NAMESPACE}.Components

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

Další informace naleznete v tématu RazorASP.NET Core Součásti.

Další Blazor WebAssembly zdroje informací

Další Blazor Server zdroje informací

integrace Razor součástí do Razor stránek a aplikací MVC v hostovaném Blazor WebAssembly řešení je podporována v ASP.NET Core v rozhraní .net 5 nebo novějším. Vyberte verzi tohoto článku pro rozhraní .NET 5 nebo novější.

Razor komponenty můžete integrovat do Razor stránek a aplikací MVC v Blazor Server aplikaci. Po vykreslení stránky nebo zobrazení mohou být komponenty předem vykresleny ve stejnou dobu.

Po nakonfigurování projektupoužijte pokyny v následujících částech v závislosti na požadavcích projektu:

Konfigurace

Existující Razor stránky nebo aplikace MVC mohou integrovat Razor komponenty do stránek a zobrazení:

  1. V souboru rozložení projektu:

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

      + <base href="~/" />

      hrefHodnota ( 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 podaplikace, postupujte podle pokynů v části základní cesta k aplikaci v Hostování a nasazení ASP.NET Core Blazor článku.

    • Přidejte <script> značku pro blazor.server.js skript těsně před Scripts sekci vykreslení.

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

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

    @await RenderSectionAsync("Scripts", required: false)
</body>

      Rozhraní přidá blazor.server.js skript do aplikace. Do aplikace není potřeba ručně přidávat blazor.server.js soubor skriptu.

  2. Přidejte soubor Imports do kořenové složky projektu s následujícím obsahem. Změňte {APP NAMESPACE} zástupný text 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. Zaregistrujte Blazor Server službu v nástroji Startup.ConfigureServices .

    Startup.cs:

    + services.AddServerSideBlazor();

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

    Startup.cs:

    + endpoints.MapBlazorHub();

  5. Integrujte součásti na libovolnou stránku nebo zobrazení. Přidejte například Counter komponentu do Shared složky projektu.

    Pages/Shared/Counter.razor ( Razor Stránky) 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 Index stránce projektu Razor aplikace stránky přidejte Counter obor názvů komponenty a vložte komponentu na stránku. Když se Index stránka načte, na Counter stránce se předem vykreslí komponenta. 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 Index zobrazení projektu aplikace MVC přidejte Counter obor názvů komponenty a vložte komponentu do zobrazení. Když se Index zobrazení načte, na Counter stránce se předem vykreslí komponenta. 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 naleznete v části vykreslení komponent ze stránky nebo zobrazení .

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

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

Podpora směrování Razor komponent v Razor aplikacích Pages:

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

  2. Přidejte App komponentu 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. Přidejte _Host 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 své rozložení.

    RenderMode konfiguruje, jestli App komponenta:

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

    Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

  4. V koncových bodech souboru přidejte jako poslední koncový bod trasu s nízkou Startup.Configure Startup.cs _Host prioritou pro stránku:

    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 do směrovatelné RoutableCounter komponenty na /routable-counter adrese .

Další informace o oborech názvů najdete v části Obory názvů komponent.

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 App komponentu 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. Přidejte _Host 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 své rozložení.

    RenderMode konfiguruje, jestli App komponenta:

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

    Další informace o pomocných nástroji značek komponent, včetně předávání parametrů a RenderMode konfigurace, najdete v tématu Pomocná značka komponenty v ASP.NET Core .

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

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

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

    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 do směrovatelné RoutableCounter komponenty na /routable-counter adrese .

Další informace o oborech názvů najdete v části Obory názvů komponent.

Vykreslení komponent ze stránky nebo zobrazení

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

Pokud chcete vykreslit komponentu ze stránky nebo zobrazení, použijte pomocníka pro značky komponent.

Vykreslování stavových interaktivních komponent

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

Když se stránka nebo zobrazení vykreslí:

  • Komponenta má předem vykreslenou stránku nebo zobrazení.
  • Počáteční stav komponenty použitý pro předběžné vykreslení se ztratí.
  • Stav nové součásti se vytvoří při SignalR napojení připojení.

Komponentu Razor vykreslí následující Counter stránka:

<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 tématu Pomocná značka komponenty v ASP.NET Core.

Vykreslení neinteraktivních komponent

Na následující Razor stránce se Counter komponenta staticky vykreslí s počáteční hodnotou zadanou pomocí formuláře. Vzhledem k tomu, že je komponenta staticky vykreslená, není tato 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 tématu Pomocná značka komponenty v ASP.NET Core.

Obory názvů komponent

Pokud k umístění součástí projektu používáte vlastní složku, přidejte obor názvů představující složku do stránky Razor nebo zobrazení nebo do souboru _ViewImports.cshtml . V následujícím příkladu:

  • Komponenty jsou uložené Components ve složce projektu.
  • Zástupný {APP NAMESPACE} text 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 aplikace Pages nebo aplikace Razor Views MVC.

Další informace naleznete v tématu RazorASP.NET Core Součásti.

Další Blazor Server zdroje informací