ASP.NET Core Blazor renderelési módok

Ez a cikk elmagyarázza, hogyan irányítható a Razor összetevő renderelése a Blazor Web Apps-ben fordításkor vagy futtatáskor.

Ez az útmutató nem vonatkozik az önálló Blazor WebAssembly-alkalmazásokra. Blazor WebAssembly alkalmazások csak ügyféloldali WebAssembly-alapú futtatókörnyezeten keresztül renderelnek, és nincs fogalmuk a renderelési módról. Ha egy Blazor WebAssembly-alkalmazás egyik összetevőjére renderelési módot alkalmaz, a renderelési mód megjelölése nincs hatással az összetevő renderelésére.

Renderelési módok

A Blazor Web App minden összetevője renderelési módot alkalmaz, hogy meghatározza az általa használt üzemeltetési modellt, hol van renderelve, és interaktív-e vagy sem. Az interaktivitás lehetővé teszi a felhasználók számára, hogy interakcióba lépjenek a renderelt összetevőkkel. Ez magában foglalja dokumentumobjektum-modell (DOM) eseményekre és a C#-tagokhoz kötődő állapotváltozásokra adott alkalmazásválaszokat Blazoreseménykezelők és kötések segítségével.

Az alábbi táblázat a RazorBlazor Web App összetevőinek renderelésével elérhető renderelési módokat mutatja be. Ha renderelési módot szeretne alkalmazni egy összetevőre, használja az @rendermode direktívát az összetevőpéldányon vagy az összetevő definícióján. A cikk későbbi részében példákat láthat az egyes renderelési forgatókönyvekre.

Név	Leírás	Render helye	Interaktív
Statikus kiszolgáló	Statikus kiszolgálóoldali renderelés (statikus SSR)	Kiszolgáló	❌ Nincs
Interaktív kiszolgáló	Interaktív kiszolgálóoldali renderelés (interaktív SSR) Blazor Serverhasználatával.	Kiszolgáló	✔️ Igen
Interaktív WebAssembly	Ügyféloldali renderelés (CSR) Blazor WebAssembly† használatával.	Ügyfél	✔️ Igen
Interaktív autó	Az interaktív SSR használata kezdetben a Blazor Server-val történik, majd CSR-t alkalmazunk a későbbi látogatások során, miután a Blazor csomag letöltődött.	Kiszolgáló, majd ügyfél	✔️ Igen

†Client-oldali renderelés (CSR) interaktívnak minősül. "Interaktív ügyféloldali renderelés" és "interaktív CSR" nem használatos az iparágban vagy a Blazor dokumentációban.

Az előzetes rendezés alapértelmezés szerint engedélyezve van az interaktív összetevők esetében. A cikk későbbi részében útmutatást talál az előrendelés szabályozásához. Az ügyfél- és kiszolgálómegjelenítési fogalmak általános iparági terminológiája: ASP.NET Core Blazor alapjai.

Az alábbi példák bemutatják, hogyan lehet beállítani az összetevők renderelési módját néhány alapvető Razor összetevőkhöz tartozó funkció segítségével.

A renderelési mód viselkedésének helyi teszteléséhez a következő összetevőket helyezheti el a Blazor Web App projektsablonból létrehozott alkalmazásban. Az alkalmazás létrehozásakor válassza ki a legördülő menük (Visual Studio) beállításait, vagy alkalmazza a CLI-beállításokat (.NET CLI) a kiszolgálóoldali és az ügyféloldali interaktivitás engedélyezéséhez. A Blazor Web Applétrehozásával kapcsolatos útmutatásért lásd: ASP.NET Core Blazoreszközkészlete.

Az interaktív renderelési módok támogatásának engedélyezése

Egy Blazor Web App úgy kell konfigurálni, hogy támogassa az interaktív megjelenítési módokat. A következő bővítmények automatikusan lesznek alkalmazva a Blazor Web App projektsablonból létrehozott alkalmazásokra az alkalmazás létrehozása során. Az egyes összetevőknek továbbra is deklarálniuk kell renderelési módjukat a Renderelési módok szakaszban, miután az összetevő-szolgáltatások és végpontok konfigurálva lettek az alkalmazás Program fájljában.

Az Razor-összetevők szolgáltatásai a AddRazorComponentsmeghívásával lesznek hozzáadva.

Component Builder-bővítmények:

• AddInteractiveServerComponents szolgáltatásokat ad hozzá az interaktív kiszolgáló összetevőinek megjelenítéséhez.
• AddInteractiveWebAssemblyComponents szolgáltatásokat ad hozzá az Interaktív WebAssembly-összetevők rendereléséhez.

MapRazorComponents felderíti az elérhető összetevőket, és megadja az alkalmazás fő összetevőjét (az első betöltött összetevőt), amely alapértelmezés szerint a App összetevő (App.razor).

Végpontkonvenciók szerkesztőbővítményei:

• AddInteractiveServerRenderMode interaktív kiszolgálóoldali renderelést (interaktív SSR) konfigurál az alkalmazáshoz.
• AddInteractiveWebAssemblyRenderMode konfigurálja az interaktív WebAssembly renderelési módot az alkalmazáshoz.

Jegyzet

Az API elhelyezésének meghatározásához a következő példákban tekintse meg a Program projekt sablonjából létrehozott alkalmazás Blazor Web App fájlját. A Blazor Web Applétrehozásával kapcsolatos útmutatásért lásd: ASP.NET Core Blazoreszközkészlete.

1. példa: Az alábbi Program fájl API szolgáltatásokat és konfigurációt ad hozzá az interaktív SSR engedélyezéséhez:

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

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

2. példa: Az alábbi Program fájl API szolgáltatásokat és konfigurációt ad hozzá az Interaktív WebAssembly renderelési mód engedélyezéséhez:

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

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

3. példa: Az alábbi Program fájl API szolgáltatásokat és konfigurációt ad hozzá az Interaktív kiszolgáló, az Interaktív WebAssembly és az Interaktív automatikus renderelési módok engedélyezéséhez:

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

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

Blazor az Blazor WebAssembly üzemeltetési modellt használja az Interaktív WebAssembly renderelési módot használó összetevők letöltésére és végrehajtására. Ezen összetevők Blazor WebAssembly üzemeltetésének beállításához külön ügyfélprojekt szükséges. Az ügyfélprojekt tartalmazza a Blazor WebAssembly gazdagép indítási kódját, és beállítja a .NET-futtatókörnyezetet a böngészőben való futtatáshoz. A Blazor Web App-sablon hozzáadja Önnek ezt az ügyfélprojektet, amikor kiválasztja a WebAssembly interaktivitás engedélyezésének lehetőségét. Az Interaktív WebAssembly renderelési módot használó összetevőket az ügyfélprojektből kell összeállítani, így azok bekerülnek a letöltött alkalmazáscsomagba.

Renderelési mód alkalmazása egy összetevőpéldányra

Ha renderelési módot szeretne alkalmazni egy összetevőpéldányra, használja a @rendermodeRazor irányelv attribútumot, ahol az összetevőt használják.

Az alábbi példában az interaktív kiszolgálóoldali renderelés (interaktív SSR) lesz alkalmazva a Dialog összetevőpéldányra:

<Dialog @rendermode="InteractiveServer" />

Jegyzet

Blazor sablonok statikus using irányelvet tartalmaznak az alkalmazás RenderMode fájljában (_Imports) lévő Components/_Imports.razor-hez, a @rendermode szintaxis rövidítése érdekében.

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

Az előző irányelv nélkül az összetevőknek meg kell adniuk a statikus RenderMode osztályt @rendermode szintaxisban:

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

Egyedileg beállított renderelési módú példányokra is hivatkozhat, amelyeket közvetlenül, saját konfigurációval példányosítanak. További információkért tekintse meg a egyéni gyorsírásos megjelenítési módokat szakaszt a cikk későbbi részében.

Renderelési mód alkalmazása összetevődefinícióra

Az összetevők renderelési módjának meghatározásához használja a @rendermodeRazor irányelv és a megfelelő renderelési mód attribútumot.

@page "..."
@rendermode InteractiveServer

A renderelési mód összetevődefinícióra való alkalmazása általában akkor használatos, ha renderelési módot alkalmaz egy adott lapra. A routable lapok ugyanazt a renderelési módot használják, mint az oldalt megjelenítő Router összetevő.

A @rendermode technikai szempontból mind egy Razorirányelv, mind pedig egy Razorirányelv attribútum. A szemantikák hasonlóak, de vannak különbségek. A @rendermode irányelv az összetevő definícióján alapul, ezért a hivatkozott renderelési módpéldánynak statikusnak kell lennie. A @rendermode direktíva attribútum bármilyen renderelési módú példányt igénybe vehet.

Jegyzet

Az összetevő-készítőknek kerülnie kell, hogy az összetevők implementációját egy adott renderelési módhoz kapcsolják. Ehelyett az összetevő-szerzőknek általában olyan összetevőket kell megterveznie, amelyek támogatják a renderelési módokat vagy az üzemeltetési modelleket. Az összetevők implementációjának kerülnie kell a működési hely (kiszolgáló vagy ügyfél) feltételezéseit, és statikus renderelés esetén kecsesen csökkennie kell. A renderelési mód összetevődefinícióban való megadására akkor lehet szükség, ha az összetevő nincs közvetlenül példányosítva (például egy routable page összetevővel), vagy ha renderelési módot szeretne megadni az összes összetevőpéldányhoz.

Renderelési mód alkalmazása a teljes alkalmazásra

A teljes alkalmazás renderelési módjának beállításához jelölje meg a renderelési módot az alkalmazás összetevőhierarchiájának legmagasabb szintű interaktív összetevőjén, amely nem gyökérösszetevő.

Jegyzet

A gyökérösszetevő interaktívvá tétele, például a App összetevő nem támogatott. Ezért a App összetevő nem tudja közvetlenül beállítani a teljes alkalmazás renderelési módját.

A Blazor Web App projektsablonon alapuló alkalmazások esetében általában a teljes alkalmazáshoz hozzárendelt renderelési mód van megadva, ahol a Routes összetevőt használja a App összetevő (Components/App.razor):

<Routes @rendermode="InteractiveServer" />

A Router összetevő propagálja a renderelési módot az általa irányított lapokra.

Általában ugyanezt az interaktív renderelési módot a(z) HeadOutlet összetevő-n is be kell állítania, amely szintén megtalálható a projektsablonból létrehozott AppBlazor Web App összetevőjében.

<HeadOutlet @rendermode="InteractiveServer" />

Az interaktív ügyféloldali (WebAssembly vagy Automatikus) renderelési módot alkalmazó alkalmazások esetében, és engedélyezi a renderelési módot a teljes alkalmazás számára a Routes összetevőn keresztül:

• Helyezze vagy helyezze át a kiszolgálóalkalmazás Components/Layout mappájának elrendezési és navigációs fájljait a .Client projekt Layout mappájába. Ha nem létezik, hozzon létre egy Layout mappát a .Client projektben.
• Helyezze vagy helyezze át a kiszolgálóalkalmazás Components/Pages mappájának összetevőit a .Client projekt Pages mappájába. Ha nem létezik, hozzon létre egy Pages mappát a .Client projektben.
• Helyezze vagy helyezze át a kiszolgálóalkalmazás Routes mappájának Components összetevőjét a .Client projekt gyökérmappájába.

Globális interaktivitás engedélyezése Blazor Web Applétrehozásakor:

• Visual Studio: Állítsa be az Interaktivitási hely legördülő listát Globális-ra.
• .NET CLI: Használja a -ai|--all-interactive lehetőséget.

További információ: Eszközkészlet az ASP.NET Core számára Blazor.

Renderelési mód alkalmazása programozott módon

A tulajdonságok és mezők renderelési módot rendelhetnek hozzá.

Az ebben a szakaszban ismertetett második megközelítés, a renderelési mód összetevőpéldányok szerinti beállítása különösen akkor hasznos, ha az alkalmazás specifikációja egy vagy több összetevőt kér statikus SSR bevezetésére egy egyébként interaktív alkalmazásban. Ezt a forgatókönyvet egy interaktív alkalmazás szakaszának statikus SSR-oldalai ismertetik a cikk későbbi részében.

A renderelési mód beállítása összetevődefiníció szerint

Az összetevődefiníciók egy magánmezőn keresztül definiálhatnak renderelési módot:

@rendermode pageRenderMode

...

@code {
    private static IComponentRenderMode pageRenderMode = InteractiveServer;
}

A renderelési mód beállítása összetevőpéldány szerint

Az alábbi példa az interaktív kiszolgálóoldali renderelést (interaktív SSR) alkalmazza minden kérésre.

<Routes @rendermode="PageRenderMode" />

...

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

A renderelési mód propagálásáról a jelen cikk későbbi, renderelési mód propagálási szakaszában talál további információt. Az interaktív alkalmazás szakaszában található statikus SSR-lapok bemutatják, hogyan lehet az előző megközelítéssel statikus SSR-t alkalmazni egy egyébként interaktív alkalmazásban.

Blazor dokumentációs példák Blazor Web App számára

Blazor Web Apphasználatakor a Blazor dokumentációs példaösszetevők többsége interaktivitást igényel, és bemutatja a cikkekben foglalt fogalmakat. Ha egy cikk által biztosított példaösszetevőt tesztel, győződjön meg arról, hogy az alkalmazás globális interaktivitást alkalmaz, vagy az összetevő interaktív renderelési módot alkalmaz.

Előrendezés

Az interaktív renderelési módok (Interaktív kiszolgáló, Interaktív WebAssembly, Interaktív automatikus) alapértelmezés szerint támogatják az előrendelést, amely kezdetben statikusan jeleníti meg a lap tartalmát a kiszolgálóról a kezdeti betöltési élmény javítása érdekében. További információ: Prerender ASP.NET Core-összetevőkRazor.

A renderelési hely, az interaktivitás és a hozzárendelt renderelési mód észlelése futásidőben

A ComponentBase.RendererInfo és ComponentBase.AssignedRenderMode tulajdonságok lehetővé teszik az alkalmazás számára, hogy észlelje az összetevők helyével, interaktivitásával és hozzárendelt renderelési módjával kapcsolatos részleteket:

• RendererInfo.Name az összetevő végrehajtásának helyét adja vissza:
  • Static: A kiszolgálón (SSR) és nem képes az interaktivitásra.
  • Server: Az előrenderelés után a kiszolgálón (SSR) működik, és képes az interaktivitásra.
  • WebAssembly: Az ügyféloldalon (CSR) és képes az interaktivitásra az előzetes renderelés után.
  • WebView: A natív eszközön és képes az interaktivitásra az előzetes renderelés után.
• RendererInfo.IsInteractive jelzi, hogy az összetevő támogatja-e az interaktivitást a renderelés időpontjában. Az érték true interaktív rendereléskor vagy false előrerendezéskor vagy statikus SSR esetén (RendererInfo.NameStatic).
• AssignedRenderMode elérhetővé teszi az összetevő hozzárendelt renderelési módját:
  • InteractiveServerRenderMode interaktív kiszolgálóhoz.
  • InteractiveAutoRenderMode interaktív autohoz.
  • InteractiveWebAssemblyRenderMode az Interactive WebAssemblyhez.
  • null, ha nincs hozzárendelve renderelési mód.

Az összetevők ezeket a tulajdonságokat használják a tartalom megjelenítésére a helyüktől vagy az interaktivitási állapotuktól függően. Az alábbi példák a tipikus használati eseteket mutatják be.

Tartalom megjelenítése, amíg egy összetevő interaktív:

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

Tiltsa le a gombot, amíg az alkotóelem interaktívvá nem válik.

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

Tiltsa le az űrlapot az előrenderelés alatt, és engedélyezze az űrlapot, amikor az összetevő interaktív.

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

Renderelési korrektúra a normál HTML-művelet végrehajtásának támogatásához, ha az összetevő statikusan renderelt:

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

Az előző példában:

• Ha a AssignedRenderMode értéke null, az összetevő statikus SSR-t alkalmaz. A Blazor eseménykezelés nem működik statikus SSR-t használó böngészőben, ezért a komponens egy titleFilter lekérdezési karakterláncot tartalmazó űrlapot küld be a felhasználó <input> értékére. A Movie összetevő (/movie) beolvassa a lekérdezési sztringet, és feldolgozza a titleFilter értékét, hogy a szűrt eredményekkel renderelje az összetevőt.
• Ellenkező esetben a renderelési mód bármelyik InteractiveServer, InteractiveWebAssemblyvagy InteractiveAuto. Az összetevő képes egy eseménykezelő delegált (FilterMovies) és a <input> elemhez kötött érték (titleFilter) felhasználásával interaktívan szűrni a filmeket a háttérben működő SignalR kapcsolaton keresztül.

Statikus kiszolgálóoldali renderelés (statikus SSR)

Az összetevők statikus kiszolgálóoldali renderelést (statikus SSR) használnak. Az összetevő a válaszfolyamra renderel, és az interaktivitás nincs engedélyezve.

Az alábbi példában nincs megjelölés az összetevő renderelési módjára, így az összetevő a szülőtől örökli a renderelési módot. Mivel egyetlen előd összetevő sem határoz meg renderelési módot, a következő összetevő statikusan van renderelve a kiszolgálón. A gomb nem interaktív, és nem hívja meg a UpdateMessage metódust a kijelöléskor. A message értéke nem változik, és az összetevő nem lesz újrarendezve a felhasználói felület eseményeire válaszul.

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

Ha az előző összetevőt helyileg használja egy Blazor Web Appkeretében, helyezze az összetevőt a szerverprojekt Components/Pages mappájába. A kiszolgálóprojekt egy olyan projekt a megoldás része, aminek a neve nem végződik .Client. Amikor az alkalmazás fut, navigáljon a(z) /render-mode-1 címre a böngésző címsorában.

A statikus SSR során az Razor összetevőlap-kérelmeket kiszolgálóoldali ASP.NET Core köztes szoftverfolyamat-kérelemfeldolgozás dolgozza fel engedélyezés céljából. Az engedélyezés dedikált Blazor funkciói nem működnek, mert Razor az összetevők nem jelennek meg a kiszolgálóoldali kérések feldolgozása során. BlazorA statikus SSR során nem elérhető útválasztó-funkciók közé tartozik a Routesnem engedélyezett tartalom () (<NotAuthorized>...</NotAuthorized>NotAuthorized) megjelenítése. Blazor Web Appa kiszolgálóra irányuló jogosulatlan kérések általában az engedélyezési köztes szoftver viselkedésének testreszabásával dolgozhatók fel.

Ha az alkalmazás gyökérszintű interaktivitást mutat, a kiszolgálóoldali ASP.NET Core-kérelmek feldolgozása nem történik meg a kezdeti statikus SSR után, ami azt jelenti, hogy az előző Blazor funkciók a várt módon működnek.

Továbbfejlesztett navigáció statikus SSR-vel, amikor a JavaScript betöltésére kerül sor, különös figyelmet igényel. További információ: ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR).

Interaktív kiszolgálóoldali renderelés (interaktív SSR)

Az interaktív kiszolgálóoldali renderelés (interaktív SSR) interaktív módon jeleníti meg az összetevőt a kiszolgálóról a Blazor Serverhasználatával. A felhasználói interakciók valós idejű kapcsolaton keresztül kezelhetők a böngészővel. Az áramkör-kapcsolat a kiszolgáló komponens megjelenítésekor jön létre.

Az alábbi példában a renderelési mód interaktív SSR-t állít be úgy, hogy @rendermode InteractiveServer ad hozzá az összetevő-definícióhoz. A gomb kiválasztva meghívja a UpdateMessage metódust. A message értéke megváltozik, és a rendszer újrarendezi az összetevőt, hogy frissítse az üzenetet a felhasználói felületen.

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

Ha az előző összetevőt a Blazor Web App-ban használja, helyezze az összetevőt a szerverprojekt Components/Pages mappájába. A kiszolgálóprojekt egy olyan projekt a megoldás része, aminek a neve nem végződik .Client. Amikor az alkalmazás fut, navigáljon a(z) /render-mode-2 címre a böngésző címsorában.

Az interaktív kiszolgálóösszetevők valós idejű kapcsolattal kezelik a webes felhasználói felület eseményeit egy kapcsolatcsoportnak nevezett böngészővel. Egy áramkör és a hozzá tartozó állapot akkor jön létre, amikor egy gyökér interaktív szerverkomponenst renderelnek. A kapcsolatcsoport akkor lesz bezárva, ha a lapon nincsenek fennmaradó interaktív kiszolgálói összetevők, ami felszabadítja a kiszolgáló erőforrásait.

Kliensoldali renderelés (CSR)

Az ügyféloldali renderelés (CSR) interaktívan jeleníti meg az összetevőt az ügyfélen a Blazor WebAssemblyhasználatával. A .NET-futtatókörnyezet és az alkalmazáscsomag letöltése és gyorsítótárazása a WebAssembly összetevő kezdeti megjelenítésekor történik. A CSR-t használó összetevőket külön ügyfélprojektből kell létrehozni, amely beállítja a Blazor WebAssembly gazdagépet.

Az alábbi példában a renderelési mód CSR-ra van állítva @rendermode InteractiveWebAssembly. A gomb kiválasztva meghívja a UpdateMessage metódust. A message értéke megváltozik, és a rendszer újrarendezi az összetevőt, hogy frissítse az üzenetet a felhasználói felületen.

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

Ha az előző összetevőt helyileg használja a Blazor Web App-ban, helyezze az összetevőt az ügyfélprojekt Pages mappájába. Az ügyfélprojekt a megoldás része, egy olyan projekt, amelynek neve .Client-ra végződik. Amikor az alkalmazás fut, navigáljon a(z) /render-mode-3 címre a böngésző címsorában.

Automatikus renderelés

Az automatikus (automatikus) renderelés határozza meg, hogyan jelenítse meg az összetevőt futásidőben. Az összetevő kezdetben interaktív kiszolgálóoldali rendereléssel (interaktív SSR) jelenik meg a Blazor Server üzemeltetési modell használatával. A .NET-futtatókörnyezet és az alkalmazáscsomag a háttérben letöltődik az ügyfélre, és gyorsítótárazza őket, hogy a későbbi látogatások során is felhasználhatók legyenek.

Az automatikus renderelési mód soha nem módosítja dinamikusan a már az oldalon lévő összetevők renderelési módját. Az automatikus renderelési mód kezdeti döntést hoz arról, hogy milyen típusú interaktivitást használjon egy összetevőhöz, majd az összetevő mindaddig megőrzi ezt az interaktivitási típust, amíg az a lapon van. A kezdeti döntés egyik tényezője annak mérlegelése, hogy az összetevők már léteznek-e a lapon a WebAssembly/Kiszolgáló interaktivitással. Az automatikus mód inkább a meglévő interaktív összetevők renderelési módjának megfelelő renderelési módot választja. Az automatikus mód azért szívesebben használ meglévő interaktivitási módot, mert nem vezet be olyan új interaktív futtatókörnyezetet, amely nem oszt meg állapotot a meglévő futtatókörnyezettel.

Azoknak az összetevőknek, amelyek az automatikus renderelési módot használják, külön ügyfélprojektből kell felépülniük, amely beállítja a Blazor WebAssembly gazdagépet.

Az alábbi példában az összetevő interaktív a folyamat során. A gomb kiválasztva meghívja a UpdateMessage metódust. A message értéke megváltozik, és a rendszer újrarendezi az összetevőt, hogy frissítse az üzenetet a felhasználói felületen. Kezdetben az összetevő interaktívan jelenik meg a kiszolgálóról, de a későbbi látogatások során ügyféloldalon kerül megjelenítésre, miután a .NET futtatókörnyezet és az alkalmazáscsomag letöltésre és gyorsítótárazásra került.

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

Ha az előző összetevőt helyileg használja a Blazor Web App-ban, helyezze az összetevőt az ügyfélprojekt Pages mappájába. Az ügyfélprojekt a megoldás része, egy olyan projekt, amelynek neve .Client-ra végződik. Amikor az alkalmazás fut, navigáljon a(z) /render-mode-4 címre a böngésző címsorában.

Renderelési mód propagálása

A renderelési módok lefelé terjednek az összetevőhierarchiában.

A renderelési módok alkalmazásának szabályai:

• Az alapértelmezett renderelési mód a Statikus.
• Az Interaktív kiszolgáló (InteractiveServer), az Interactive WebAssembly (InteractiveWebAssembly) és az Interaktív automatikus (InteractiveAuto) renderelési módok használhatók egy összetevőből, beleértve a testvérösszetevők különböző renderelési módjait is.
• Gyermekösszetevőkben nem válthat másik interaktív renderelési módra. A kiszolgálóösszetevők például nem lehetnek a WebAssembly-összetevők gyermekelemei.
• A statikus szülőtől egy interaktív gyermekösszetevőnek átadott paramétereknek JSON szerializálhatónak kell lenniük. Ez azt jelenti, hogy nem adhat át renderelési töredékeket vagy gyermektartalmakat statikus szülőösszetevőkből interaktív gyermekösszetevőknek.

Az alábbi példák egy nem módosítható, nem lapalapú SharedMessage összetevőt használnak. A renderelési módtól független SharedMessage összetevő nem alkalmaz renderelési módot @attribute irányelvvel. Ha ezeket a forgatókönyveket az Blazor Web App-val teszteli, helyezze az alábbi összetevőt az alkalmazás Components mappájába.

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

Renderelési mód öröklése

Ha a SharedMessage összetevő statikusan renderelt szülőösszetevőbe kerül, a SharedMessage összetevő is statikusan jelenik meg, és nem interaktív. A gomb nem hívja meg UpdateMessage, és az üzenet nem frissül.

RenderMode5.razor:

@page "/render-mode-5"

<SharedMessage />

Ha a SharedMessage összetevő olyan összetevőbe kerül, amely meghatározza a renderelési módot, örökli az alkalmazott renderelési módot.

Az alábbi példában a SharedMessage összetevő interaktív az ügyfélhez SignalR kapcsolaton keresztül. A gomb meghívja UpdateMessage, és az üzenet frissül.

RenderMode6.razor:

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

<SharedMessage />

Gyermekösszetevők különböző megjelenítési módokkal

Az alábbi példában mindkét SharedMessage összetevő előrerendelt, és akkor jelenik meg, amikor a lap megjelenik a böngészőben.

• Az első SharedMessage összetevő az interaktív kiszolgálóoldali rendereléssel (interaktív SSR) azután válik interaktívvá, hogy a BlazorSignalR áramköre létrejött.
• A második SharedMessage összetevő ügyféloldali rendereléssel (CSR) interaktív , miután az Blazor alkalmazáscsomag letöltődött, és a .NET futtatókörnyezet aktív az ügyféloldalon.

RenderMode7.razor:

@page "/render-mode-7"

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

Gyermekösszetevő szerializálható paraméterrel

Az alábbi példa egy paramétert használó interaktív gyermekösszetevőt mutat be. A paramétereknek szerializálhatónak kell lenniük.

RenderMode8.razor:

@page "/render-mode-8"

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

A nem szerializálható összetevőparaméterek, például a gyermektartalom vagy a renderelési töredék nem támogatottak. Az alábbi példában a gyermektartalom SharedMessage összetevőnek való átadása futásidejű hibát eredményez.

RenderMode9.razor:

@page "/render-mode-9"

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

❌ hiba:

System.InvalidOperationException: A ChildContent paraméter nem adható át a "SharedMessage" összetevőnek az "InteractiveServerRenderMode" rendermode-tal. Ennek az az oka, hogy a paraméter delegált típusa "Microsoft.AspNetCore.Components.RenderFragment", amely tetszőleges kód, és nem szerializálható.

Ugyanez történik, ha egy interaktív renderelést próbál meg alkalmazni egy olyan elrendezésben, amely az alkalmazás LayoutComponentBase összetevőjéből örököl, például az alkalmazás MainLayout összetevője esetén, egy olyan alkalmazásban, amely oldal/összetevő szintű renderelést alkalmaz. További információ: ASP.NET Core Blazor elrendezések.

Az előző korlátozás megkerüléséhez csomagolja a gyermek összetevőt egy másik összetevőbe, amely nem rendelkezik a paramétersel. Ez a megközelítés a Blazor Web App projektsablonban a Routes komponenssel (Components/Routes.razor) a Router komponens burkolásának céljából.

WrapperComponent.razor:

<SharedMessage>
    Child content
</SharedMessage>

RenderMode10.razor:

@page "/render-mode-10"

<WrapperComponent @rendermode="InteractiveServer" />

Az előző példában:

• A gyermek tartalma futásidejű hiba nélkül kerül a SharedMessage komponenshez továbbításra.
• A SharedMessage összetevő interaktívan jelenik meg a kiszolgálón.

Gyermekösszetevő a szülőtől eltérő renderelési móddal

Ne próbáljon más interaktív renderelési módot alkalmazni egy gyermekösszetevőre, mint a szülő renderelési módjára.

Az alábbi összetevő futásidejű hibát eredményez az összetevő renderelésekor:

RenderMode11.razor:

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

<SharedMessage @rendermode="InteractiveWebAssembly" />

❌ hiba:

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.

Statikus SSR-lapok interaktív alkalmazásban

Vannak olyan esetek, amikor az alkalmazás specifikációja arra kéri az összetevőket, hogy statikus kiszolgálóoldali renderelést (statikus SSR- t) alkalmazzanak, és csak a kiszolgálón futnak, míg a többi alkalmazás interaktív renderelési módot használ.

Ez a módszer csak akkor hasznos, ha az alkalmazás olyan lapokkal rendelkezik, amelyek nem használhatók interaktív kiszolgáló- vagy WebAssembly-rendereléssel. Ez a megközelítés például olyan oldalak esetében alkalmazható, amelyek HTTP-cookie-k olvasásától/írásától függenek, és interaktív renderelés helyett csak kérés-válasz ciklusban működnek. Az interaktív rendereléssel dolgozó lapok esetében nem szabad statikus SSR használatára kényszeríteni őket, mivel az kevésbé hatékony és kevésbé rugalmas a végfelhasználó számára.

Jelölje meg bármely komponens oldalt a direktívával hozzárendelt attribútummal:

@attribute [ExcludeFromInteractiveRouting]

Az attribútum alkalmazása esetén a lapra való navigálás megszakítja a interaktív útválasztásifolyamatát. A bejövő navigációnak teljes oldalfrissítést kell végrehajtania, ahelyett hogy interaktív útvonalválasztással oldaná meg az oldal betöltését. A teljes oldal újrabetöltése kényszeríti a legfelső szintű gyökérösszetevőt, általában a App összetevőt (App.razor) a kiszolgálóról való újrarendelésre, lehetővé téve az alkalmazás számára, hogy másik legfelső szintű renderelési módra váltson.

A RazorComponentsEndpointHttpContextExtensions.AcceptsInteractiveRouting bővítménymetódus lehetővé teszi, hogy az összetevő észlelje, hogy a [ExcludeFromInteractiveRouting] attribútum van-e alkalmazva az aktuális lapra.

Az App összetevőben használja a következő példában szereplő mintát:

• A [ExcludeFromInteractiveRouting] attribútummal nem jegyzett lapok alapértelmezetten a InteractiveServer renderelési módra globális interaktivitással. InteractiveServer-át kicserélheti InteractiveWebAssembly-re vagy InteractiveAuto-re egy másik alapértelmezett globális renderelési mód megadásához.
• A [ExcludeFromInteractiveRouting] attribútummal jegyzett lapok statikus SSR-t fogadnak el (PageRenderModenullvan hozzárendelve).

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

A RazorComponentsEndpointHttpContextExtensions.AcceptsInteractiveRouting bővítménymetódus használatának alternatívája a végpont metaadatainak manuális olvasása a HttpContext.GetEndpoint()?.Metadatahasználatával.

Egyéni rövidített megjelenítési módok

A @rendermode irányelv egyetlen paramétert fogad, amely egy IComponentRenderMode típusú statikus példány. A @rendermode irányelvi attribútum bármilyen renderelési módú példányt befogadhat, akár statikus, akár nem. A Blazor keretrendszer a RenderMode statikus osztályt előre definiált megjelenítési módokkal biztosítja a kényelem érdekében, de létrehozhat sajátot.

Az összetevő általában a következő @rendermode irányelvvel tiltja le az előfeldolgozást .

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

Vegyük azonban az alábbi példát, amely egy egyszerűsített, interaktív szerveroldali renderelési módot hoz létre az alkalmazás _Imports fájlja (Components/_Imports.razor) használatával prerenderelés nélkül.

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

Használja a rövidített renderelési módot az összetevőkben a Components mappában:

@rendermode InteractiveServerWithoutPrerendering

Másik lehetőségként egyetlen összetevőpéldány definiálhat egyéni renderelési módot egy privát mezőn keresztül:

@rendermode interactiveServerWithoutPrerendering

...

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

Jelenleg a rövidített megjelenítési mód valószínűleg csak a prerender jelölő bőbeszédűségének csökkentésére használható. A rövidített megközelítés a jövőben hasznosabb lehet, ha további jelölők válnak elérhetővé az interaktív rendereléshez, és a rövidített megjelenítési módokat különböző jelölőkombinációkkal szeretné létrehozni.

További erőforrások

• WebSocket-tömörítés
  • ASP.NET Core BlazorSignalR útmutató
  • Fenyegetések enyhítésére vonatkozó útmutató ASP.NET Core Blazor interaktív kiszolgálóoldali rendereléshez
• ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR)
• Kaszkádolt értékek/paraméterek és renderelési mód határai: Tekintse meg a gyökérszintű kaszkádolt értékeket és a gyökérszintű kaszkádolt értékeket a cikk korábbi értesítési szakaszaival .
• ASP.NET Core Razor osztálykönyvtárak (RCLs) statikus kiszolgálóoldali rendereléssel (static SSR)
• Az adatok biztonságos kezelése Blazor Web App-kban interaktív automatikus rendereléssel