Sdílet prostřednictvím

Integrace komponent ASP.NET Core Razor s MVC nebo Razor stránkami

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi tohoto článku pro .NET 9 najdete zde.

Varování

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální vydání naleznete v verzi tohoto článku pro .NET 9.

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

Důležité

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

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

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

Konfigurace

Použijte následující pokyny k integraci Razor komponent do stránek nebo zobrazení existující aplikace Razor Pages nebo MVC.

  1. Přidejte soubor importu do kořenové složky projektu s následujícím obsahem. Změňte zástupný symbol {APP NAMESPACE} 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íka značek komponent pro <head> element:

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

      Hodnota href (základní cesta/). Pokud je aplikace dílčí aplikací, přečtěte si základní cestu aplikace 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 Blazor ASP.NET Core.

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

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

      Framework přidá skript blazor.server.js 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. Zaregistrujte služby Blazor Server tam, kde jsou služby Program.cs zaregistrovány:

    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 projektu Index v aplikaci Razor Pages přidejte obor názvů komponenty Counter a vložte komponentu přímo do této stránky. Když se Index stránka načte, Counter komponenta je předem vykreslená na stránce. 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 obory názvů komponenty Counter a komponentu vložte do zobrazení. Když se načte zobrazení Index, komponenta Counter je na stránce předem vykreslená. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol názvem namespace 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 či zobrazení.

Použijte směrovatelné komponenty v aplikaci Razor Pages

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

Aby se podpořily směrovatelné Razor komponenty 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. Nahraďte zástupný symbol {APP NAMESPACE} 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 vykreslený na stránku.
    • Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

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

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

    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 o názvových prostorech naleznete v části Komponentní názvové prostory.

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. Nahraďte zástupný symbol {APP NAMESPACE} 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 skript Blazor (_framework/blazor.server.js) jsou vykresleny v rozložení aplikace. Další informace najdete v části Konfigurace .

    RenderMode nakonfiguruje, jestli komponenta App :

    • Je předem vykreslený do stránky.
    • 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 komponentovém Tag Helperu, včetně předávání parametrů a RenderMode konfigurace, naleznete v Component Tag Helper 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 mohou být přidány na Razor stránku či zobrazení.

Když se vykresluje stránka nebo zobrazení:

  • Komponenta je předem vykreslena se 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 části Component Tag Helper 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ě ke značení komponenty v ASP.NET Core.

Jmenné prostory 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.

Zachovat předrenderovaný stav

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

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

Poznámka:

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

V Pages/_Host.cshtml aplikacích Blazor , které jsou ServerPrerendered v Blazor Server aplikaci:

<body>
    ...

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

Rozhodněte se, jaký stav zachovat pomocí služby PersistentComponentState. Atribut [SupplyParameterFromPersistentComponentState] použitý u vlastnosti zaregistruje zpětné volání pro ukládání stavu během předběžného vykreslování a načte ho, když se komponenta vykreslí interaktivně nebo když je služba instanciována.

V následujícím příkladu {TYPE} zástupný symbol představuje typ dat, která se mají zachovat (například WeatherForecast[]).

@code {
    [SupplyParameterFromPersistentComponentState]
    public {TYPE} Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Data ??= await ...;
    }
}

V následujícím příkladu komponenta uloží stav předpovědi počasí během prerenderingu a potom načte stav pro inicializaci komponenty. Pomocník značky pro trvalý stav komponenty zachovává stav komponenty po všech vyvoláních komponent.

WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

@code {
    [SupplyParameterFromPersistentComponentState]
    public WeatherForecast[]? Forecasts { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Forecasts ??= await WeatherForecastService.GetForecastAsync(
            DateOnly.FromDateTime(DateTime.Now));
    }
}

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

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

  • Zástupný {TYPE} symbol představuje typ dat, která se mají zachovat (například WeatherForecast[]).
  • Zástupný {TOKEN} symbol je řetězec identifikátoru stavu (například fetchdata).
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

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

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

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

V následujícím příkladu komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během prerenderování a potom tento stav načte pro inicializaci komponenty. Pomocník značky Persist Component State uchovává stav komponenty po všech vyvoláních komponent.

Pages/WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

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

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(
                    DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

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

Inicializací komponent se stejným stavem, který se používá během předběžného vykreslování, se všechny nákladné kroky inicializace provedou jenom jednou. Vykreslené uživatelské rozhraní se také shoduje s předem vykresleným uživatelským rozhraním, takže v prohlížeči nedojde k žádnému blikání.

Trvalý prerenderovaný stav se přenese do klienta, kde se používá k obnovení stavu komponenty. ASP.NET Základní ochrana dat zajišťuje, aby se data bezpečně přenášela v Blazor Server aplikacích.

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

Velká předsekunutá velikost stavu může překročit BlazorSignalR limit velikosti zprávy okruhu, 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ředběžně vykresleného stavu.
  • SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků typu DoS.

Další Blazor Server zdroje informací

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:

Konfigurace

Použijte následující pokyny k integraci Razor komponenty do stránek nebo zobrazení existující Razor aplikace Pages nebo MVC.

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 Blazor ASP.NET Core.

  1. V souboru rozložení projektu:

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

      <base href="~/" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

      Hodnota href (základní cesta/). Pokud je aplikace dílčí aplikací, přečtěte si základní cestu k ASP.NET základní Blazor aplikaci.

      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 Blazor ASP.NET Core.

    • Přidejte značku <script> pro skript blazor.server.js bezprostředně před sekci vykreslení Scripts (@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>

      Framework 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 Index projektu Razor 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 vykreslena. 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, je komponenta Counter předem vykreslována na stránce. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol jmenným prostorem projektu.

    Views/Home/Index.cshtml:

    @using {APP NAMESPACE}.Views.Shared
@{
    ViewData["Title"] = "Home Page";
}

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

Další informace naleznete v části Vykreslování komponent ze stránky nebo zobrazení.

Použijte směrovatelné komponenty 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íkem značky komponenty pro komponentu HeadOutlet je nutné k řízení <head> obsahu, jako je název stránky (komponenta PageTitle) a další hlavní prvky (komponenta HeadContent). Další informace najdete v tématu Blazor ASP.NET Core.

    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.

Pro více informací o jmenných prostorech si prohlédněte sekci Obory 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 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íkem značek komponent pro komponentu HeadOutlet je nutné k řízení obsahu <head>, jako je název stránky (komponenta PageTitle) a další hlavičkové elementy (komponenta HeadContent). Další informace najdete v tématu Blazor ASP.NET Core.

    RenderMode nakonfiguruje, jestli komponenta App :

    • Je předem vykresleno do stránky.
    • 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.

    Pro více informací o pomocníkovi značky komponent, včetně předávání parametrů a RenderMode konfigurace, si přečtěte Pomocník značky komponent 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 nízkoprioritní trasu 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 o oborech naleznete v části "Component namespaces".

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.

Vykreslete stavové interaktivní komponenty

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

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

  • Komponenta je předem vykreslená spolu se 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 Tag Helper pro komponenty v ASP.NET Core.

Důležité

Použití stránky rozložení (_Layout.cshtml) se značkovým pomocníkem komponenty pro komponentu HeadOutlet je vyžadováno pro řízení obsahu <head>, jako je název stránky (PageTitle komponenta) a další hlavičkové prvky (HeadContent komponenta). Další informace najdete v tématu Blazor 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.

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 Blazor 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.
  • Obor názvů projektu je zástupný znak {APP NAMESPACE}. Components představuje název složky.
@using {APP NAMESPACE}.Components

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

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

Trvalý předem vykreslený stav

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

Chcete-li tyto problémy vyřešit, Blazor podporuje zachování stavu na předem vykreslené stránce pomocí Pomocníka značky Persist Component State. Přidejte značku pomocníka <persist-component-state /> uvnitř uzavírací značky </body>.

Pages/_Layout.cshtml:

<body>
    ...

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

Rozhodněte, který stav zachovat pomocí služby PersistentComponentState. PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte při obnovení aplikace. Umístěte volání na konec inicializačního kódu, abyste se vyhnuli potenciální závodní podmínce při ukončování aplikace.

V následujícím příkladu komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během předrenderování a poté načte stav k inicializaci komponenty. Pomocník značky Persist Component State uchovává stav komponenty po všech vyvoláních komponenty.

Pages/WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

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

    protected override async Task OnInitializedAsync()
    {
        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            nameof(forecasts), out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }

        // Call at the end to avoid a potential race condition at app shutdown
        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);

        return Task.CompletedTask;
    }

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

Inicializací komponent se stejným stavem používaném během předběžného vykreslení se všechny nákladné kroky inicializace provedou pouze jednou. Vykreslené uživatelské rozhraní se také shoduje s předem vykresleným uživatelským rozhraním, takže v prohlížeči nedojde k žádnému blikání.

Trvalý prerenderovaný stav se přenese do klienta, kde se používá k obnovení stavu komponenty. ASP.NET Základní ochrana dat zajišťuje, aby se data bezpečně přenášela v Blazor Server aplikacích.

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

Velká předem vyrenderovaná velikost stavu může překročit limit velikosti zprávy daného okruhu BlazorSignalR, což vede k následujícímu:

  • 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ředběžně vykresleného stavu.
  • SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků způsobených odepřením služby (DoS).

Další Blazor Server zdroje informací

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:

Konfigurace

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

  1. V souboru rozložení projektu:

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

      <base href="~/" />

      Hodnota href (základní cesta/). Pokud je aplikace dílčí aplikací, přečtěte si základní cestu k ASP.NET základní Blazor aplikaci.

    • Přidejte značku <script> pro blazor.server.js skript bezprostředně před Scripts vykreslovací sekci.

      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 Index projektu aplikace Služby Pages přidejte název prostoru komponenty Counter a vložte komponentu do stránky. Když se stránka Index načte, komponenta Counter je předupravená na stránce. V následujícím příkladu nahraďte zástupný symbol {APP NAMESPACE} 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 jmenným prostorem aplikace.

    MVC:

    V zobrazení projektu Index aplikace MVC přidejte jmenný prostor komponenty Counter a vložte komponentu do zobrazení. Když se Index zobrazení načte, komponenta Counter se na stránce předem vykreslí. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol jmenným prostorem 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žijte směrovatelné komponenty v aplikaci Razor Pages

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

Aby bylo možné podporovat routovatelné Razor komponenty v aplikacích Razor 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 vykreslený na stránku.
    • Je vykreslen jako statický kód HTML na stránce nebo pokud obsahuje potřebné informace ke spuštění Blazor aplikace z uživatelského agenta.

    Další informace o Pomocníku značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v Pomocník 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íku značky komponenty, včetně předávání parametrů a RenderMode konfigurace, viz Značkový pomocník komponent 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 o jmenných prostorech najdete v části Jmenné prostory komponent.

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 komponentu na stránce nebo v zobrazení, použijte pomocníka značky komponenty.

Vykreslení stavových interaktivních komponent

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

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

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

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ástroji Tag Helper komponenty v ASP.NET Core.

Názvový prostor 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 buď na stránku/zobrazení, nebo do _ViewImports.cshtml souboru. V následujícím příkladu:

  • Komponenty jsou uloženy ve Components složce projektu.
  • Zástupný znak {APP NAMESPACE} 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

Velikost stavu předem generovaná může překročit limit velikosti zprávy v okruhu Blazor a SignalR, což vede k následujícímu:

  • 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ředběžně vykresleného stavu.
  • SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků typu Denial of Service (DoS).

Další Blazor Server zdroje informací

Razor komponenty lze integrovat do Razor aplikací Pages nebo 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:

Konfigurace

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

  1. V souboru rozložení projektu:

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

      + <base href="~/" />

      Hodnota href (základní cesta/). Pokud je aplikace dílčí aplikací, přečtěte si základní cestu aplikace v ASP.NET Core Blazor.

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

      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>

      Rámec 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. Změňte zástupný symbol {APP NAMESPACE} 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. Přidejte koncový bod centra Blazor 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 Index projektu Razor 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 vykreslena. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol jmenným prostorem 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 názvovým prostorem aplikace.

    MVC:

    V zobrazení projektu Index aplikace MVC přidejte jmenný prostor komponenty Counter a vložte komponentu do zobrazení. Když se Index zobrazení načte, komponenta Counter je na stránce předem vykreslena. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol jmenným prostorem 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ů.

Podporovat směrovatelné Razor komponenty 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 renderován 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 komponentním pomocníkovi značek, včetně předávání parametrů a RenderMode konfigurace, naleznete v části Component Tag Helper v ASP.NET Core.

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

    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 o oborech názvů naleznete 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 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 vykreslený do stránky.
    • 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íkovi značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v tématu Pomocník 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 o názvových prostorech naleznete v části Component namespaces.

Vykreslení komponent ze stránky nebo rozhraní

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

Na stránku nebo zobrazení lze přidat stavové interaktivní komponenty.

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

  • Komponenta je předem vykreslena se 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ří nový stav komponenty SignalR.

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 Component Tag Helper 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 Pomocníkovi značek komponent v ASP.NET Core.

Jmenné prostory komponent

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

  • Komponenty jsou uloženy ve Components složce projektu.
  • Zástupný prvek {APP NAMESPACE} 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ředrenderovaná velikost stavu může překročit limit velikosti tento okruhové zprávy BlazorSignalR, 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ředpřipraveného stavu.
  • SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků odmítnutí služby (DoS).

Další Blazor Server zdroje informací