Sdílet prostřednictvím

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

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 10 tohoto článku.

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 tohoto článku pro .NET 9 najdete zde.

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

    V .NET 10 nebo novější je skript Blazor zahrnut rámcem, pokud projekt obsahuje alespoň jeden soubor komponenty Razor (.razor). Pokud vaše aplikace vyžaduje Blazor skript, ale neobsahuje aspoň jednu komponentu, přidejte do souboru projektu aplikace následující vlastnost MSBuild, která vynutí zahrnutí nepodmíněného skriptu:

    <RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

    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 Blazor skript (_framework/blazor.server.js) jsou vykresleny rozložením aplikace. Další informace najdete v části Konfigurace .

    V .NET 10 nebo novějším je skript zahrnut rámečkem, pokud projekt obsahuje alespoň jeden soubor komponenty (Razor) (.razor). Pokud vaše aplikace vyžaduje Blazor skript, ale neobsahuje aspoň jednu komponentu, přidejte do souboru projektu aplikace následující vlastnost MSBuild, která vynutí zahrnutí nepodmíněného skriptu:

    <RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

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

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 části Component Tag Helper 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[PersistentState] použitý u vlastnosti zaregistruje zpětné volání pro zachování stavu během předrenderingu a vrátí ho při interaktivním vykreslení komponenty nebo když se služba inicializuje.

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

@code {
    [PersistentState]
    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 {
    [PersistentState]
    public WeatherForecast[]? Forecasts { get; set; }

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

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

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

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

...

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

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

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

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

        return Task.CompletedTask;
    }

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

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.

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 komponent do stránek nebo zobrazení existující aplikace Razor 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 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 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á skript blazor.server.js 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.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

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

    Pages/_Host.cshtml:

    @page "/blazor"
@namespace {APP NAMESPACE}.Pages.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

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

    Důležité

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

    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.

    Views/Home/_Host.cshtml:

    @namespace {APP NAMESPACE}.Views.Shared
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

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

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

    Důležité

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

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

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.

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.

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 části Component Tag Helper 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.

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

V následujícím příkladu 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.

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

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 aplikace ASP.NET CoreBlazor.

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

      Framework přidá skript blazor.server.js 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.

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

<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 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 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 č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(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 .NET 5.0.1 a pro všechny další verze 5.x komponenta Router obsahuje parametr PreferExactMatches nastaven na @true. Další informace najdete v tématu Migrace z ASP.NET Core 3.1 na .NET 5.

  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é 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. 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 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(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 .NET 5.0.1 a pro všechny další verze 5.x komponenta Router obsahuje parametr PreferExactMatches nastaven na @true. Další informace najdete v tématu Migrace z ASP.NET Core 3.1 na .NET 5.

  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ý 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. 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 Komponentní názvové prostory.

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>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 čá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>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 části Component Tag Helper 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.

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í

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 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 aplikace ASP.NET CoreBlazor.

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

      Framework přidá skript blazor.server.js 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. 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 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";
}

<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 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 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 č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(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 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. 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 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(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ý 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. 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 Komponentní názvové prostory.

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>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 čá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>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 části Component Tag Helper 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.

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í

  • Last updated on