Číst v angličtině

Sdílet prostřednictvím

Integrace základních komponent ASP.NET Razor s MVC nebo Razor Stránkami

  • Článek

Poznámka

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

Upozorně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í verzi najdete v tomto článku ve verzi .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

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

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

    _Imports.razor:

    razor 
    @using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}

  2. V souboru rozložení projektu (Pages/Shared/_Layout.cshtml v Razor aplikacích Pages nebo Views/Shared/_Layout.cshtml v aplikacích MVC):

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

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

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

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

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

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

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

    Poznámka

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

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

    C# 
    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:

    C# 
    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):

    razor 
    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Stránky:

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

    Pages/Index.cshtml:

    CSHTML 
    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

    MVC:

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

    Views/Home/Index.cshtml:

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

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

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

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

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

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

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

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

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. _Host Přidejte do projektu stránku s následujícím obsahem. {APP NAMESPACE} Zástupný symbol nahraďte oborem názvů aplikace.

    Pages/_Host.cshtml:

    CSHTML 
    @page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Poznámka

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

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

    C# 
    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:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  6. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

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

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

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

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

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

    App.razor:

    razor 
    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

  3. _Host Přidejte do projektu zobrazení s následujícím obsahem. {APP NAMESPACE} Zástupný symbol nahraďte oborem názvů aplikace.

    Views/Home/_Host.cshtml:

    CSHTML 
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Poznámka

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

    C# 
    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í:

    C# 
    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:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

Vykreslení komponent ze stránky nebo zobrazení

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

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

Vykreslení stavových interaktivních komponent

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

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

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

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

CSHTML 
<h1>Razor Page</h1>

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

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

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

Vykreslení neinteraktivních komponent

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

CSHTML 
<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

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

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

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

Obory názvů komponent

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

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

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

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

Trvalý předsekenderovaný stav

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

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

Poznámka

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

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

CSHTML 
<body>
    ...

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

Rozhodněte se, jaký stav se má služba zachovat PersistentComponentState . PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte při obnovení aplikace.

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

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

...

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

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

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

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

        return Task.CompletedTask;
    }

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

Následující příklad je aktualizovaná verze FetchData komponenty na Blazor základě šablony projektu. Komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během předkončování a pak načte stav, který komponentu inicializuje. Pomocné rutiny značky stavu součásti zachová stav komponenty po všech vyvolání komponent.

Pages/WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

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

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

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

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

        return Task.CompletedTask;
    }

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

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

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

Další Blazor Server zdroje informací

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

Následující doprovodné materiály použijte k integraci Razor komponent 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 Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

  1. V souboru rozložení projektu:

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

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

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

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

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

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

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

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

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

    _Imports.razor:

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

    C# 
    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:

    C# 
    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):

    razor 
    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Stránky:

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

    Pages/Index.cshtml:

    CSHTML 
    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

    MVC:

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

    Views/Home/Index.cshtml:

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

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

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

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

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

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

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

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

    App.razor:

    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:

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

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

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

    Důležité

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

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

    C# 
    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:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  6. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

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

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

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

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

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

    App.razor:

    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:

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

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

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

    Důležité

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

    C# 
    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í:

    C# 
    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:

    razor 
    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

Vykreslení komponent ze stránky nebo zobrazení

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

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

Vykreslení stavových interaktivních komponent

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

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

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

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

CSHTML 
<h1>Razor Page</h1>

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

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

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

Důležité

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

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

CSHTML 
<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 Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

Obory názvů komponent

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

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

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

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

Trvalý předsekenderovaný stav

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

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

Pages/_Layout.cshtml:

CSHTML 
<body>
    ...

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

Rozhodněte se, jaký stav se má služba zachovat PersistentComponentState . PersistentComponentState.RegisterOnPersisting zaregistruje zpětné volání pro zachování stavu komponenty před pozastavením aplikace. Stav se načte při obnovení aplikace.

Následující příklad je aktualizovaná verze FetchData komponenty na Blazor základě šablony projektu. Komponenta WeatherForecastPreserveState zachová stav předpovědi počasí během předkončování a pak načte stav, který komponentu inicializuje. Pomocné rutiny značky stavu součásti zachová stav komponenty po všech vyvolání komponent.

Pages/WeatherForecastPreserveState.razor:

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

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

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

        return Task.CompletedTask;
    }

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

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

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

Další Blazor Server zdroje informací

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:

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

      HTML 
      <base href="~/" />

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

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

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

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

    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:

    C# 
    services.AddServerSideBlazor();

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

    Startup.cs:

    C# 
    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):

    razor 
    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Stránky:

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

    Pages/Index.cshtml:

    CSHTML 
    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

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

    MVC:

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

    Views/Home/Index.cshtml:

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

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

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

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

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

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

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

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

    App.razor:

    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:

    CSHTML 
    @page "/blazor"
@{
    Layout = "_Layout";
}

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

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

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

    C# 
    endpoints.MapFallbackToPage("/_Host");

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

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

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

    Pages/RoutableCounter.razor:

    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:

    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:

    CSHTML 
    @{
    Layout = "_Layout";
}

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

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

    C# 
    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í:

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

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

    C# 
    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:

    razor 
    @page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

Vykreslení komponent ze stránky nebo zobrazení

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

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

Vykreslení stavových interaktivních komponent

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

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

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

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

CSHTML 
<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í:

CSHTML 
<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

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

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

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

Obory názvů komponent

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

  • Komponenty jsou uloženy ve Components složce projektu.
  • Zástupný {APP NAMESPACE} symbol je obor názvů projektu. Components představuje název složky.
CSHTML 
@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ředkažovaného stavu.
  • SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků DoS (DoS).

Další Blazor Server zdroje informací

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:

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

      diff 
      + <base href="~/" />

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

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

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

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

    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:

    C# 
    services.AddServerSideBlazor();

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

    Startup.cs:

    C# 
    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):

    razor 
    <h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

    Razor Stránky:

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

    Pages/Index.cshtml:

    CSHTML 
    @page
@using {APP NAMESPACE}.Pages.Shared
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

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

    MVC:

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

    Views/Home/Index.cshtml:

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

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

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

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

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

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

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

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

    App.razor:

    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:

    CSHTML 
    @page "/blazor"
@{
    Layout = "_Layout";
}

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

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

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

    C# 
    endpoints.MapFallbackToPage("/_Host");

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

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

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

    Pages/RoutableCounter.razor:

    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:

    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:

    CSHTML 
    @{
    Layout = "_Layout";
}

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

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

    RenderMode nakonfiguruje, jestli komponenta App :

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

    Další informace o pomocné rutině značky komponenty, včetně předávání parametrů a RenderMode konfigurace, naleznete v nápovědě značky komponenty v ASP.NET Core.

  4. Přidejte akci do Home kontroleru.

    Controllers/HomeController.cs:

    C# 
    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í:

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

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

    C# 
    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:

    razor 
    @page "/routable-counter"

<h1>Routable Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

  7. Spusťte projekt a přejděte na směrovatelnou RoutableCounter komponentu na adrese /routable-counter.

Další informace ooborechch

Vykreslení komponent ze stránky nebo zobrazení

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

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

Vykreslení stavových interaktivních komponent

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

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

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

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

CSHTML 
<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í:

CSHTML 
<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

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

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

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

Obory názvů komponent

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

  • Komponenty jsou uloženy ve Components složce projektu.
  • Zástupný {APP NAMESPACE} symbol je obor názvů projektu. Components představuje název složky.
CSHTML 
@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ředkažovaného stavu.
  • SignalR Zvětšete limit velikosti zprávy. UPOZORNĚNÍ: Zvýšení limitu může zvýšit riziko útoků DoS (DoS).

Další Blazor Server zdroje informací