režimy vykreslování ASP.NET Core Blazor

Tento článek vysvětluje řízení vykreslování komponenty Razor v rámci Blazor Web App, a to buď v době kompilace, nebo za běhu.

Tyto pokyny se nevztahují na samostatné Blazor WebAssembly aplikace. Blazor WebAssembly aplikace se na klientovi vykreslují pouze prostřednictvím klientského runtime založeného na WebAssembly a nemají žádnou představu o režimu vykreslování. Pokud je režim vykreslení použit pro komponentu Blazor WebAssembly v aplikaci, označení režimu vykreslení nemá žádný vliv na vykreslení komponenty.

Režimy vykreslování

Každá součást v Blazor Web App přijímá režim vykreslování pro určení modelu hostování, který používá, kde se vykresluje, a zda je interaktivní. interaktivita umožňuje uživatelům interagovat s vykreslenými komponentami. To zahrnuje odpovědi aplikací na Document Object Model (DOM) události a změny stavu svázané se členy jazyka C# prostřednictvím obslužných rutin událostí a vazby u Blazor.

Následující tabulka uvádí dostupné režimy vykreslování pro komponenty Razor v Blazor Web App. Chcete-li použít režim vykreslování na komponentu @rendermode , použijte direktivu na instanci komponenty nebo v definici komponenty. Dále v tomto článku jsou uvedeny příklady pro každý scénář režimu vykreslování.

Název	Popis	Umístění vykreslení	Interaktivní
Statický server	Statické vykreslování na straně serveru (SSR)	počítačový server	❌ Ne
Interaktivní server	Interaktivní vykreslování na straně serveru (interaktivní SSR) pomocí Blazor Server.	počítačový server	✔️Ano
Interactive WebAssembly	Vykreslování na straně klienta (Client-side rendering, CSR) pomocí Blazor WebAssembly†	Klient	✔️Ano
Interaktivní auto	Interaktivní SSR s využitím Blazor Server zpočátku a poté CSR při následných návštěvách po stažení Blazor balíčku.	Server, pak klient	✔️Ano

† Vykreslování na straně klienta (CSR) se předpokládá jako interaktivní. "Interaktivní vykreslování na straně klienta" a "interaktivní CSR" se nepoužívají v oboru ani v Blazor dokumentaci.

U interaktivních komponent je ve výchozím nastavení povolené předkreslování. Pokyny k řízení předrenderingu najdete dále v tomto článku. Pro obecnou terminologii průmyslu týkající se konceptů vykreslování na straně klienta a serveru se podívejte na ASP.NET Core Blazor základní informace.

Následující příklady ukazují nastavení režimu vykreslování komponenty s několika základními Razor funkcemi komponent.

Pokud chcete chování režimu vykreslování otestovat místně, můžete do aplikace vytvořené ze Blazor Web App šablony projektu umístit následující komponenty. Při vytváření aplikace vyberte možnosti z rozevíracích nabídek (Visual Studio) nebo použijte možnosti rozhraní příkazového řádku (.NET CLI) a povolte interaktivitu na straně serveru i na straně klienta. Pokyny k vytvoření Blazor Web Appnajdete v tématu Nástroje pro ASP.NET Core Blazor.

Povolení podpory interaktivních režimů vykreslování

Musí být Blazor Web App nakonfigurováno tak, aby podporovalo interaktivní režimy vykreslování. Následující rozšíření se automaticky použijí pro aplikace vytvořené ze Blazor Web App šablony projektu během vytváření aplikace. Jednotlivé komponenty je stále nutné deklarovat jejich režim vykreslování podle části Režimy vykreslování poté, co jsou v souboru aplikace Program nakonfigurovány služby komponent a koncové body.

Služby pro Razor komponenty se přidávají voláním AddRazorComponents.

Rozšíření tvůrce komponent:

• AddInteractiveServerComponents přidává služby pro podporu vykreslování komponent Interactive Serveru.
• AddInteractiveWebAssemblyComponents přidává služby pro podporu vykreslování interaktivních komponent WebAssembly.

MapRazorComponents zjistí dostupné komponenty a určuje kořenovou komponentu aplikace, což je ve výchozím nastavení první načtená komponenta App (App.razor).

Rozšíření sestavovatele konvencí koncových bodů:

• AddInteractiveServerRenderMode nakonfiguruje interaktivní vykreslování na straně serveru (interaktivní SSR) pro aplikaci.
• AddInteractiveWebAssemblyRenderMode nakonfiguruje režim interaktivního vykreslování WebAssembly pro aplikaci.

Poznámka:

Pro orientaci ohledně umístění rozhraní API v následujících příkladech zkontrolujte soubor Program aplikace vygenerované ze šablony projektu Blazor Web App. Pokyny k vytvoření Blazor Web Appnajdete v tématu Nástroje pro ASP.NET Core Blazor.

Příklad 1: Následující Program souborové rozhraní API přidává služby a konfiguraci pro povolení interaktivního SSR:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Příklad 2: Následující Program souborové rozhraní API přidá služby a konfiguraci pro povolení režimu interaktivního vykreslování WebAssembly:

builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode();

Příklad 3: Následující souborové Program rozhraní API přidává služby a konfiguraci pro povolení režimu interaktivního serveru, interaktivního webassembly a interaktivního automatického vykreslování:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode();

Blazor Blazor WebAssembly používá model hostování ke stažení a spouštění komponent, které používají režim vykreslování Interactive WebAssembly. K nastavení Blazor WebAssembly hostování pro tyto komponenty se vyžaduje samostatný klientský projekt. Klientský projekt obsahuje spouštěcí kód hostitele Blazor WebAssembly a nastaví modul runtime .NET pro spuštění v prohlížeči. Šablona Blazor Web App přidá tento klientský projekt za vás, když vyberete možnost pro povolení interaktivity WebAssembly. Všechny komponenty využívající režim vykreslování Interactive WebAssembly by měly být sestaveny z klientského projektu, takže se zahrnou do stažené sady aplikací.

Nastavit režim vykreslování na instanci komponenty

Pokud chcete použít mód vykreslování na instanci komponenty, použijte atribut direktivy @rendermodeRazor tam, kde se komponenta používá.

V následujícím příkladu se u Dialog instance komponenty použije interaktivní vykreslování na straně serveru (interaktivní SSR):

<Dialog @rendermode="InteractiveServer" />

Poznámka:

Blazor šablony zahrnují statickou using direktivu do souboru RenderMode aplikace _Imports (Components/_Imports.razor) pro zkrácení @rendermode syntaxe:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

Bez předchozí direktivy musí komponenty specifikovat statickou RenderMode třídu v @rendermode syntaxi:

<Dialog @rendermode="RenderMode.InteractiveServer" />

Také můžete přímo odkazovat na instance režimu vlastního vykreslování s vlastní konfigurací. Další informace najdete v části Vlastní zkrácené režimy vykreslování dále v tomto článku.

Použití režimu vykreslování u definice komponenty

Chcete-li určit režim vykreslování pro komponentu jako součást jeho definice, použijte @rendermodeRazor direktivu a odpovídající atribut režimu vykreslování.

@page "..."
@rendermode InteractiveServer

Použití režimu vykreslování na definici komponenty se často provádí při aplikaci režimu vykreslování na konkrétní stránku. Směrovatelné stránky používají stejný režim vykreslování jako komponenta Router , která stránku vykreslovala.

Technicky vzato, @rendermode je jak Razordirektiva, tak i Razoratribut direktivy. Sémantika je podobná, ale existují rozdíly. Direktiva @rendermode je v definici komponenty, takže odkazovaná instance režimu vykreslování musí být statická. Atribut @rendermode direktivy může převzít libovolnou instanci režimu vykreslování.

Poznámka:

Autoři komponent by se měli vyhnout párování implementace komponenty s konkrétním režimem vykreslování. Autoři komponent by měli obvykle navrhovat komponenty tak, aby podporovaly jakýkoli režim vykreslování nebo model hostování. Implementace komponenty by se měla vyhnout předpokladům ohledně prostředí, ve kterém běží (server nebo klient), a měla by se při statickém vykreslení spravovat plynule. Určení režimu vykreslování v definici komponenty může být potřeba, pokud komponenta není instanciována přímo (například u směrovatelné součásti stránky) nebo pro určení režimu vykreslování pro všechny instance komponent.

Použití režimu vykreslování pro celou aplikaci

Pokud chcete nastavit režim vykreslování pro celou aplikaci, nastavte režim vykreslení v interaktivní komponentě nejvyšší úrovně v hierarchii komponent aplikace, která není kořenovou komponentou.

Poznámka:

Interaktivní vytvoření kořenové komponenty, například App komponenty, není podporováno. Režim vykreslování pro celou aplikaci proto nelze nastavit přímo komponentou App .

U aplikací založených na Blazor Web App šabloně projektu se obvykle určuje režim vykreslování přiřazený k celé aplikaci, kde komponenta Routes se používá v komponentě App (Components/App.razor):

<Routes @rendermode="InteractiveServer" />

Komponenta Router rozšíří svůj režim vykreslování na stránky, které směruje.

Obvykle také musíte nastavit stejný interaktivní režim vykreslování na komponentěHeadOutlet, která se nachází také v App komponentě Blazor Web App vygenerované ze šablony projektu:

<HeadOutlet @rendermode="InteractiveServer" />

U aplikací, které přecházejí na interaktivní režim vykreslování na straně klienta (WebAssembly nebo Auto) a umožňují režim vykreslování pro celou aplikaci prostřednictvím Routes komponenty:

• Umístěte nebo přesuňte rozložení a navigační soubory složky serverové aplikace Components/Layout do .Client složky projektu Layout . Vytvořte složku Layout v projektu .Client, pokud neexistuje.
• Umístěte nebo přesuňte komponenty složky serverové aplikace Components/Pages do .Client složky projektu Pages . Vytvořte složku Pages v projektu .Client, pokud neexistuje.
• Umístěte nebo přesuňte Routes komponentu složky serverové aplikace Components do .Client kořenové složky projektu.

Chcete-li povolit globální interaktivitu při vytváření Blazor Web App:

• Visual Studio: Nastavte rozevírací seznam umístění interaktivity na Globální.
• .NET CLI: Použijte možnost -ai|--all-interactive .

Další informace naleznete v tématu Nástroje pro ASP.NET Core Blazor.

Programově aplikovat režim vykreslování

Vlastnosti a pole mohou přiřadit režim vykreslování.

Druhý přístup popsaný v této části, nastavení režimu vykreslování podle instance komponenty, je zvlášť užitečné, když specifikace aplikace volá jednu nebo více komponent k přijetí statického SSR v jinak interaktivní aplikaci. Tento scénář je popsán na stránkách Statické SSR a v sekci interaktivní aplikace dále v části tohoto článku.

Nastavení režimu vykreslování podle definice komponenty

Definice komponenty může definovat režim vykreslování prostřednictvím soukromého pole:

@rendermode pageRenderMode

...

@code {
    private static IComponentRenderMode pageRenderMode = InteractiveServer;
}

Nastavení režimu vykreslování podle instance komponenty

Následující příklad použije interaktivní vykreslování na straně serveru (interaktivní SSR) na libovolný požadavek.

<Routes @rendermode="PageRenderMode" />

...

@code {
    private IComponentRenderMode? PageRenderMode => InteractiveServer;
}

Další informace o šíření režimu vykreslování najdete v části Šíření režimu vykreslování dále v tomto článku. Stránky Statické SSR v oddíle interaktivní aplikace ukazují, jak použít předchozí přístup k přijetí statického SSR v jinak interaktivní aplikaci.

Blazor příklady dokumentace pro Blazor Web Apps

Při použití Blazor Web App, většina ukázkových Blazor komponent dokumentace vyžaduje interaktivitu k fungování a předvedení konceptů popsaných v článcích. Při testování ukázkové komponenty poskytované článkem se ujistěte, že aplikace přijme globální interaktivitu nebo komponenta přijme interaktivní režim vykreslování.

Předběžné vykreslování

Interaktivní režimy vykreslování (Interactive Server, Interactive WebAssembly, Interactive Auto) ve výchozím nastavení podporují předkreslování, které zpočátku vykresluje obsah stránky staticky ze serveru, aby se zlepšilo počáteční načítání. Další informace naleznete v tématu Prerender ASP.NET Core Razor komponenty.

Zjišťování umístění vykreslování, interaktivity a přiřazeného režimu vykreslování za běhu

Jeho vlastnosti ComponentBase.RendererInfo a ComponentBase.AssignedRenderMode umožňují aplikaci zjistit podrobnosti o umístění, interaktivitě a přiřazeném režimu vykreslování komponenty:

• RendererInfo.Name vrací umístění, kde se komponenta nachází:
  • Static: Na serveru (SSR) a bez možnosti interakce.
  • Server: Na serveru (SSR) a schopný interaktivity po předběžném vykreslení.
  • WebAssembly: Na straně klienta (CSR) a schopný interaktivity po předběžném vykreslení.
  • WebView: Na nativním zařízení a schopný interaktivity po předběžném vykreslení.
• RendererInfo.IsInteractive označuje, zda komponenta podporuje interaktivitu v době vykreslování. Hodnota je true při interaktivním vykreslování nebo false při předkreslování či pro statické SSR (RendererInfo.Name z Static).
• AssignedRenderMode zveřejňuje režim vykreslení přiřazeného komponentou:
  • InteractiveServerRenderMode pro interaktivní server.
  • InteractiveAutoRenderMode pro interaktivní automatické nastavení.
  • InteractiveWebAssemblyRenderMode pro interaktivní WebAssembly.
  • null, pokud není přiřazen režim vykreslování.

Komponenty tyto vlastnosti používají k vykreslení obsahu v závislosti na jejich umístění nebo stavu interaktivity. Následující příklady ukazují typické případy použití.

Umožňuje zobrazit obsah, dokud nebude komponenta interaktivní:

@if (!RendererInfo.IsInteractive)
{
    <p>Connecting to the assistant...</p>
}
else
{
    ...
}

Zakažte tlačítko, dokud nebude komponenta interaktivní:

<button @onclick="Send" disabled="@(!RendererInfo.IsInteractive)">
    Send
</button>

Zakažte formulář během předkreslování a povolte ho, když je komponenta interaktivní:

<EditForm Model="Movie" ...>
    <fieldset disabled="@disabled">

        ...

        <button type="submit" >Save</button>
    </fieldset>
</EditForm>

@code {
    private bool disabled = true;

    [SupplyParameterFromForm]
    private Movie? Movie { get; set; }

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

        if (RendererInfo.IsInteractive)
        {
            disabled = false;
        }
    }
}

Vykreslit značky pro podporu provádění pravidelné akce v HTML, pokud je komponenta staticky vykreslená:

@if (AssignedRenderMode is null)
{
    // The render mode is Static Server
    <form action="/movies">
        <input type="text" name="titleFilter" />
        <input type="submit" value="Search" />
    </form>
}
else
{
    // The render mode is Interactive Server, WebAssembly, or Auto
    <input @bind="titleFilter" />
    <button @onclick="FilterMovies">Search</button>
}

V předchozím příkladu:

• Pokud je hodnota AssignedRenderModenull, komponenta přijímá statické SSR. Blazor Zpracování událostí v prohlížeči není funkční se statickým SSR, proto komponenta odešle formulář (GET požadavek) s dotazovacím řetězcem titleFilter nastaveným na hodnotu uživatele <input>. Komponenta Movie (/movie) může přečíst řetězec dotazu a zpracovat hodnotu titleFilter k vykreslení komponenty pro filtrované výsledky.
• V opačném případě je režim vykreslení libovolný z InteractiveServer, InteractiveWebAssemblynebo InteractiveAuto. Komponenta dokáže využít delegáta obsluhy události (FilterMovies) a hodnoty spojené s prvkem <input> (titleFilter) k interaktivnímu filtrování filmů přes pozadí připojení SignalR.

Statické vykreslování na straně serveru (SSR)

Komponenty používají statické vykreslování na straně serveru (statické SSR). Komponenta se vykreslí do streamu odpovědí a interaktivita není povolená.

V následujícím příkladu neexistuje žádné označení pro režim vykreslení komponenty, takže komponenta dědí svůj režim vykreslování z nadřazeného objektu. Vzhledem k tomu, že žádná nadřazená komponenta neurčí režim vykreslování, je na serveru staticky vykreslena následující komponenta. Tlačítko není interaktivní a nevyvolá metodu UpdateMessage při výběru. Hodnota message se nezmění a komponenta není reenderována v reakci na události uživatelského rozhraní.

RenderMode1.razor:

@page "/render-mode-1"

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Pokud používáte předchozí komponentu místně ve složce Blazor Web Appprojektu serveru, umístěte ji do složky projektu Components/Pages serveru. Serverový projekt je projekt řešení s názvem, který nekončí .Client. Když je aplikace spuštěná, přejděte do /render-mode-1 adresního řádku prohlížeče.

Během statického SSR Razor jsou požadavky na stránku komponenty zpracovávány serverovou částí ASP.NET Core pipeliny middlewaru pro zpracování požadavků a autorizaci. Vyhrazené Blazor funkce pro autorizaci nejsou funkční, protože Razor komponenty se nevykreslují během zpracování požadavků na straně serveru. BlazorFunkce směrovače v komponentěRoutes, které nejsou dostupné během statického SSR, zahrnují zobrazení neautorizovaného obsahu (<NotAuthorized>...</NotAuthorized>) (NotAuthorized). Blazor Web Apps obvykle zpracovávají neoprávněné požadavky na serveru přizpůsobením chování autorizačního middlewaru.

Pokud aplikace vykazuje interaktivitu na kořenové úrovni, zpracování požadavků na straně serveru ASP.NET Core není zapojeno po počátečním statickém SSR, což znamená, že předchozí funkce Blazor fungují podle očekávání.

Vylepšená navigace se statickým SSR vyžaduje zvláštní pozornost při načítání JavaScriptu. Další informace najdete v tématu ASP.NET Core Blazor JavaScript se statickým vykreslováním na straně serveru (statické SSR).

Interaktivní vykreslování na straně serveru (interaktivní SSR)

Interaktivní vykreslování na straně serveru (interaktivní SSR) vykreslí komponentu interaktivně ze serveru pomocí Blazor Server. Interakce uživatelů se zpracovávají přes připojení v reálném čase k prohlížeči. Připojení okruhu se naváže při vykreslení součásti serveru.

V následujícím příkladu je režim vykreslení nastaven na interaktivní-SSR přidáním @rendermode InteractiveServer do definice komponenty. Tlačítko volá metodu UpdateMessage při výběru. Hodnota message se změní a komponenta se znovu vykreslí, aby se aktualizovala zpráva v uživatelském rozhraní.

RenderMode2.razor:

@page "/render-mode-2"
@rendermode InteractiveServer

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Pokud používáte předchozí komponentu ve složce Blazor Web Appprojektu serveru, umístěte ji do složky projektu Components/Pages serveru. Serverový projekt je projekt řešení s názvem, který nekončí .Client. Když je aplikace spuštěná, přejděte do /render-mode-2 adresního řádku prohlížeče.

Komponenty interaktivního serveru zpracovávají události webového uživatelského rozhraní pomocí připojení v reálném čase s prohlížečem označovaným jako okruh. Okruh a jeho přidružený stav se vytvoří, když se vykreslí kořenová součást Interactive Serveru. Okruh se zavře, pokud na stránce nejsou žádné zbývající součásti interaktivního serveru, které uvolní prostředky serveru.

Vykreslování na straně klienta (CSR)

Vykreslování na straně klienta (CSR) vykreslí komponentu interaktivně na klientovi pomocí Blazor WebAssembly. Modul .NET runtime a balíček aplikací se stáhnou a uloží do mezipaměti při prvním vykreslení komponenty WebAssembly. Komponenty využívající CSR musí být sestaveny z samostatného klientského projektu, který nastaví Blazor WebAssembly hostitele.

V následujícím příkladu je režim vykreslování nastaven na CSR s @rendermode InteractiveWebAssembly. Tlačítko volá metodu UpdateMessage při výběru. Hodnota message se změní a komponenta se znovu vykreslí, aby se aktualizovala zpráva v uživatelském rozhraní.

RenderMode3.razor:

@page "/render-mode-3"
@rendermode InteractiveWebAssembly

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Pokud používáte předchozí komponentu místně, umístěte ji do složky Blazor Web App projektu klienta. Projekt klienta je projekt řešení s názvem, který končí ..Client Když je aplikace spuštěná, přejděte do /render-mode-3 adresního řádku prohlížeče.

Automatické vykreslování

Automatické vykreslování určuje, jak vykreslit komponentu za běhu. Komponenta je zpočátku vykreslována pomocí interaktivního SSR (renderování na straně serveru) s použitím modelu hostování Blazor Server. Modul runtime .NET a sada aplikací se stáhnou do klienta na pozadí a uloží se do mezipaměti, aby je bylo možné použít při budoucích návštěvách.

Režim automatického vykreslování nikdy dynamicky nemění režim vykreslování komponenty, která už je na stránce. Režim automatického vykreslení provede počáteční rozhodnutí o tom, jaký typ interaktivity se má pro komponentu použít, a pak tato komponenta zachová tento typ interaktivity tak dlouho, dokud je na stránce. Jedním z faktorů v tomto počátečním rozhodnutí je zvážení, zda na stránce již existují komponenty s interaktivitou na bázi WebAssembly/Serveru. Automatický režim dává přednost výběru režimu vykreslování, který odpovídá režimu vykreslování stávajících interaktivních komponent. Důvodem, proč automatický režim dává přednost použití existujícího režimu interaktivity, je vyhnout se zavedení nového interaktivního modulu runtime, který nesdílí stav s existujícím modulem runtime.

Komponenty používající režim automatického renderování musí být sestaveny z samostatného klientského projektu, který nastaví Blazor WebAssembly hostitele.

V následujícím příkladu je komponenta v průběhu procesu interaktivní. Tlačítko volá metodu UpdateMessage při výběru. Hodnota message se změní a komponenta se znovu vykreslí, aby se aktualizovala zpráva v uživatelském rozhraní. Zpočátku se komponenta vykreslí interaktivně ze serveru, ale při následných návštěvách se vykreslí z klienta poté, co je .NET runtime a balíček aplikace stažen a uložen do mezipaměti.

RenderMode4.razor:

@page "/render-mode-4"
@rendermode InteractiveAuto

<button @onclick="UpdateMessage">Click me</button> @message

@code {
    private string message = "Not updated yet.";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Pokud používáte předchozí komponentu místně, umístěte ji do složky Blazor Web App projektu klienta. Projekt klienta je projekt řešení s názvem, který končí ..Client Když je aplikace spuštěná, přejděte do /render-mode-4 adresního řádku prohlížeče.

Šíření režimu vykreslování

Režimy vykreslování se šíří v hierarchii komponent.

Pravidla pro použití režimů vykreslování:

• Výchozí režim vykreslování je Statický.
• Režimy vykreslování Interactive Server (InteractiveServer), Interactive WebAssembly (InteractiveWebAssembly) a Interactive Auto (InteractiveAuto) lze použít pro komponenty, včetně použití různých režimů vykreslování pro sourozenecké komponenty.
• V podřízené komponentě nemůžete přepnout do jiného interaktivního režimu vykreslování. Komponenta serveru nemůže být například podřízenou součástí WebAssembly.
• Parametry předané interaktivní podřízené komponentě ze statického nadřazeného objektu musí být serializovatelné ve formátu JSON. To znamená, že fragmenty vykreslování ani podřízený obsah nemůžete předat ze statické nadřazené komponenty do podřízené interaktivní komponenty.

Následující příklady používají nesměrovatelnou, nepatřící na stránku komponentu SharedMessage. Komponenta nezávislá na režimu vykreslování neaplikuje režim vykreslování s direktivou . Pokud tyto scénáře testujete pomocí Blazor Web App, umístěte do složky aplikace následující komponentu Components.

SharedMessage.razor:

<p>@Greeting</p>

<button @onclick="UpdateMessage">Click me</button> @message

<p>@ChildContent</p>

@code {
    private string message = "Not updated yet.";

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string Greeting { get; set; } = "Hello!";

    private void UpdateMessage()
    {
        message = "Somebody updated me!";
    }
}

Dědičnost režimu vykreslování

Pokud je komponenta SharedMessage umístěná do staticky vykreslené nadřazené komponenty, SharedMessage komponenta se také vykreslí staticky a není interaktivní. Tlačítko nezavolá UpdateMessagea zpráva se neaktualizuje.

RenderMode5.razor:

@page "/render-mode-5"

<SharedMessage />

Pokud je komponenta SharedMessage umístěna v komponentě, která definuje režim vykreslení, dědí použitý režim vykreslování.

V následujícím příkladu je komponenta SharedMessage interaktivní přes SignalR připojení k klientovi. Tlačítko volá UpdateMessage, a zpráva se aktualizuje.

RenderMode6.razor:

@page "/render-mode-6"
@rendermode InteractiveServer

<SharedMessage />

Podřízené komponenty s různými režimy vykreslování

V následujícím příkladu jsou obě SharedMessage komponenty předem vykresleny a zobrazí se, když se stránka zobrazí v prohlížeči.

• První SharedMessage komponenta s interaktivním vykreslováním na straně serveru (interaktivní SSR) se stane interaktivní poté, co je navázán okruh BlazorSignalR.
• "Druhá SharedMessage komponenta s vykreslováním na straně klienta (CSR) je interaktivní poté, co je stažena sada aplikací a runtime .NET je aktivní na klientovi."

RenderMode7.razor:

@page "/render-mode-7"

<SharedMessage @rendermode="InteractiveServer" />
<SharedMessage @rendermode="InteractiveWebAssembly" />

Podřízená komponenta s serializovatelným parametrem

Následující příklad ukazuje interaktivní dceřinou komponentu, která přebírá parametr. Parametry musí být serializovatelné.

RenderMode8.razor:

@page "/render-mode-8"

<SharedMessage @rendermode="InteractiveServer" Greeting="Welcome!" />

Parametry komponent, které nelze serializovat, jako je podřízený obsah nebo vykreslovací fragment, nejsou podporovány. V následujícím příkladu má předávání podřízeného obsahu komponentě SharedMessage za následek chybu za běhu.

RenderMode9.razor:

@page "/render-mode-9"

<SharedMessage @rendermode="InteractiveServer">
    Child content
</SharedMessage>

❌ Chyba:

System.InvalidOperationException: Parametr ChildContent nelze předat komponentě SharedMessage s rendermode InteractiveServerRenderMode. Důvodem je, že parametr je typu delegáta Microsoft.AspNetCore.Components.RenderFragment, což je libovolný kód a nelze ho serializovat.

Totéž se stane, když se pokusíte implementovat interaktivní vykreslování v rozložení, které dědí z LayoutComponentBase, například v komponentě aplikace MainLayout, v aplikaci, která používá vykreslování podle jednotlivých stránek nebo komponent. Další informace najdete v tématu ASP.NET Core Blazor rozložení.

Pokud chcete obejít předchozí omezení, zabalte podřízenou komponentu do jiné komponenty, která parametr nemá. Jedná se o přístup použitý v šabloně projektu Blazor Web App a komponentě Routes (Components/Routes.razor), který slouží k zabalení komponenty Router.

WrapperComponent.razor:

<SharedMessage>
    Child content
</SharedMessage>

RenderMode10.razor:

@page "/render-mode-10"

<WrapperComponent @rendermode="InteractiveServer" />

V předchozím příkladu:

• Podřízený obsah je předán komponentě SharedMessage bez generování chyby při běhu.
• Komponenta SharedMessage se na serveru vykreslí interaktivně.

Podřízená komponenta s jiným režimem vykreslení než nadřazená komponenta

Nepokoušejte se použít jiný interaktivní režim vykreslování pro podřízenou komponentu, než je režim vykreslování nadřazeného objektu.

Následující komponenta při vykreslení způsobí chybu během běhu:

RenderMode11.razor:

@page "/render-mode-11"
@rendermode InteractiveServer

<SharedMessage @rendermode="InteractiveWebAssembly" />

❌ Chyba:

Cannot create a component of type 'BlazorSample.Components.SharedMessage' because its render mode 'Microsoft.AspNetCore.Components.Web.InteractiveWebAssemblyRenderMode' is not supported by Interactive Server rendering.

Statické stránky SSR v interaktivní aplikaci

Existují případy, kdy specifikace aplikace volá komponenty k přijetí statického vykreslování na straně serveru (statické SSR) a běží pouze na serveru, zatímco zbytek aplikace používá interaktivní režim vykreslování.

Tento přístup je užitečný jenom v případě, že aplikace má konkrétní stránky, které nemohou pracovat s interaktivním vykreslováním Serveru nebo WebAssembly. Použijte například tento přístup pro stránky, které jsou závislé na čtení a zápisu souborů cookie HTTP a můžou pracovat pouze v cyklu požadavků a odpovědí místo interaktivního vykreslování. U stránek, které pracují s interaktivním vykreslováním, byste je neměli vynutit, aby používaly statické SSR, protože je pro koncového uživatele méně efektivní a méně responzivní.

Označte libovolnou stránku komponenty Razor s atributem [ExcludeFromInteractiveRouting] přiřazeným pomocí direktivy @attributeRazor.

@attribute [ExcludeFromInteractiveRouting]

Použití atributu způsobí, že navigace na stránce se ukončí z interaktivního směrování. Příchozí navigace je nucena provést opětovné načtení celé stránky místo toho, aby byla stránka vyřešena prostřednictvím interaktivního směrování. Opětovné načtení celé stránky vynutí kořenovou komponentu nejvyšší úrovně, obvykle komponentu (AppApp.razor), aby se znovu vykreslila ze serveru, což aplikaci umožňuje přepnout do jiného režimu vykreslování na nejvyšší úrovni.

Metoda RazorComponentsEndpointHttpContextExtensions.AcceptsInteractiveRouting rozšíření umožňuje komponentě zjistit, zda [ExcludeFromInteractiveRouting] je atribut použit na aktuální stránce.

V komponentě App použijte vzor v následujícím příkladu:

• Stránky, které nejsou opatřeny poznámkami s atributem [ExcludeFromInteractiveRouting], přejdou ve výchozím nastavení do InteractiveServer režimu vykreslení s globální interaktivitou. Můžete nahradit InteractiveServer za InteractiveWebAssembly nebo InteractiveAuto, abyste zadali jiný výchozí globální režim vykreslování.
• Stránky anotované atributem [ExcludeFromInteractiveRouting] přijímají statické SSR (PageRenderModeje přiřazenonull).

<!DOCTYPE html>
<html>
<head>
    ...
    <HeadOutlet @rendermode="@PageRenderMode" />
</head>
<body>
    <Routes @rendermode="@PageRenderMode" />
    ...
</body>
</html>

@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private IComponentRenderMode? PageRenderMode
        => HttpContext.AcceptsInteractiveRouting() ? InteractiveServer : null;
}

Alternativou k použití RazorComponentsEndpointHttpContextExtensions.AcceptsInteractiveRouting metody rozšíření je ruční čtení metadat koncového bodu pomocí HttpContext.GetEndpoint()?.Metadata.

Vlastní zkrácené režimy vykreslování

Direktiva @rendermode přebírá jeden parametr, který je statickou instancí typu IComponentRenderMode. Atribut @rendermode direktivy může převzít jakoukoli instanci režimu vykreslování, statickou nebo ne. Architektura Blazor poskytuje RenderMode statickou třídu s několika předdefinovanými režimy vykreslování pro usnadnění práce, ale můžete si vytvořit vlastní.

Za normálních okolností komponenta používá následující @rendermode direktivu k zákazu předrenderingu:

@rendermode @(new InteractiveServerRenderMode(prerender: false))

Vezměte však v úvahu následující příklad, který vytvoří režim interaktivního vykreslování na straně serveru bez předběžného vykreslování prostřednictvím souboru aplikace _Imports (Components/_Imports.razor):

public static IComponentRenderMode InteractiveServerWithoutPrerendering { get; } = 
    new InteractiveServerRenderMode(prerender: false);

V komponentách ve složce Components použijte režim zkráceného vykreslování.

@rendermode InteractiveServerWithoutPrerendering

Alternativně může jedna instance komponenty definovat vlastní režim vykreslování prostřednictvím soukromého pole:

@rendermode interactiveServerWithoutPrerendering

...

@code {
    private static IComponentRenderMode interactiveServerWithoutPrerendering = 
        new InteractiveServerRenderMode(prerender: false);
}

V současné době je zkrácený režim vykreslování pravděpodobně užitečný pouze pro snížení množství textu při určování příznaku prerender. Pokud budou v budoucnu pro interaktivní vykreslování k dispozici další příznaky a chtěli byste vytvořit zjednodušené režimy vykreslování s různými kombinacemi příznaků, může být tento přístup užitečnější.

Další materiály

• Komprese protokolu WebSocket
  • Pokyny pro ASP.NET Core BlazorSignalR
  • Pokyny ke zmírnění hrozeb pro interaktivní vykreslování na straně serveru ASP.NET Core Blazor
• ASP.NET Core Blazor JavaScript se statickým vykreslováním na straně serveru (statické SSR)
• Kaskádové hodnoty/parametry a hranice režimu vykreslování: Viz také kaskádové hodnoty na úrovni kořene a kaskádové hodnoty s oznámeními v sekcích dříve v článku.
• Razor ASP.NET knihovny základních tříd (RCLs) se statickým vykreslováním na straně serveru (static SSR)
• Zabezpečte data v Blazor Web Apppomocí interaktivního automatického vykreslování