Megosztás a következőn keresztül:

ASP.NET Core-összetevők Razor integrálása az MVC vagy Razor a Pages használatával

Megjegyzés

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információ: .NET és .NET Core támogatási szabályzat. A jelen cikk .NET 9-es verzióját lásd az aktuális kiadásért .

Razor összetevők integrálhatók a Pages vagy az MVC alkalmazásokba Razor . Az oldal vagy nézet megjelenítésekor az összetevők egyszerre előrerendelhetők.

Fontos

A keretrendszer ASP.NET Core-kiadásokra vonatkozó változásai a jelen cikkben szereplő utasítások különböző készleteihez vezettek. A cikk útmutatásának használata előtt győződjön meg arról, hogy a jelen cikk tetején található dokumentumverzió-választó megegyezik ASP.NET Core alkalmazáshoz használni kívánt verziójával.

Az előzetes rendezés javíthatja a keresőmotor-optimalizálást (SEO) azáltal, hogy megjeleníti a kezdeti HTTP-válasz tartalmát, amellyel a keresőmotorok kiszámíthatják az oldal rangját.

A projekt konfigurálása után a projekt követelményeitől függően kövesse az alábbi szakaszok útmutatását:

Konfiguráció

Az alábbi útmutató segítségével a Razor összetevőket integrálhatja a meglévő Razor Pages vagy MVC alkalmazás lapjaiba vagy nézeteibe.

  1. Adjon hozzá egy importálási fájlt a projekt gyökérmappájába az alábbi tartalommal. Módosítsa a {APP NAMESPACE} helyőrzőt a projekt névterére.

    _Imports.razor:

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

  2. A projekt elrendezésfájljában (Pages/Shared/_Layout.cshtml a Pages-alkalmazásokban Razor vagy Views/Shared/_Layout.cshtml az MVC-alkalmazásokban):

    • Adja hozzá a következő <base> címkét és HeadOutlet összetevőcímkét az <head> elemhez:

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

      Az href előző példában szereplő érték (az alkalmazás alap elérési útja) feltételezi, hogy az alkalmazás a gyökér URL-cím elérési útján (/) található. Ha az alkalmazás egy alalkalmazás, tekintse meg ASP.NET Core-alkalmazás Blazor alap elérési útját.

      Az HeadOutlet összetevő a fej(<head>) tartalom renderelésére szolgál, beleértve a lapcímeket (PageTitle összetevő) és az egyéb fejelemeket (HeadContent összetevő), amelyeket az Razor összetevők állítanak be. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

    • Adjon hozzá egy címkét <script> a szkripthez közvetlenül a blazor.server.jsScripts renderelési szakasz előtt (@await RenderSectionAsync(...)):

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

      A keretrendszer hozzáadja a blazor.server.js szkriptet az alkalmazáshoz. Nincs szükség szkriptfájl manuális hozzáadására blazor.server.js az alkalmazáshoz.

    Megjegyzés

    Az elrendezés általában egy _ViewStart.cshtml fájlon keresztül töltődik be.

  3. Regisztrálja a Blazor Server szolgáltatásokat a Program.cs-ben, ahol a szolgáltatások regisztrálva vannak.

    builder.Services.AddServerSideBlazor();

  4. Adja hozzá a Blazor hubvégpontot azon végpontokhoz Program.cs , ahol az útvonalak le vannak képezve. Helyezze a következő sort a MapRazorPages (Razor Pages) vagy MapControllerRoute (MVC) hívás után:

    app.MapBlazorHub();

  5. Összetevők integrálása bármely lapba vagy nézetbe. Adjon hozzá például egy összetevőt Counter a projekt mappájába Shared .

    Pages/Shared/Counter.razor (Razor oldal) vagy Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

    Razor Oldalak:

    A Pages alkalmazás projektjének Index oldalán adja hozzá az Razor komponens névterét, és helyezze be az összetevőt az oldalba. Amikor az Index oldal betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Pages/Index.cshtml:

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

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

    MVC:

    A projekt MVC alkalmazás nézetében adja hozzá az Index összetevő névterét, és ágyazza be a nézetbe az összetevőt. Amikor a Index nézet betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Views/Home/Index.cshtml:

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

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

További információkért lásd a Komponensek renderelése egy oldalról vagy nézetből szakaszt.

Routable-összetevők használata a Razor Pages-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

A Pages-alkalmazásokban irányítható Razor összetevők támogatása:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

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

  3. Adjon hozzá egy _Host lapot a projekthez az alábbi tartalommal. Cserélje le a {APP NAMESPACE} helyőrzőt az alkalmazás névterére.

    Pages/_Host.cshtml:

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

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

    Megjegyzés

    Az előző példa feltételezi, hogy a HeadOutlet összetevőt és a Blazor szkriptet (_framework/blazor.server.js) az alkalmazás elrendezése jeleníti meg. További információkért tekintse meg a Konfiguráció szakaszt.

    A .NET 10-ben vagy újabb verziókban a Blazor szkriptet a keretrendszer tartalmazza, ha a projekt legalább egy Razor összetevőfájlt (.razor) tartalmaz. Ha az alkalmazásnak szüksége van a Blazor szkriptre, de nem tartalmaz legalább egy összetevőt, adja hozzá a következő MSBuild tulajdonságot az alkalmazás projektfájljához, hogy kényszerítse a feltétel nélküli szkriptek felvételét:

    <RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Program.cs A végpontokban adjon hozzá egy alacsony prioritású útvonalat az _Host oldalhoz utolsó végpontként:

    app.MapFallbackToPage("/_Host");

  5. Routolható összetevők hozzáadása a projekthez. Az alábbi példa egy RoutableCounter összetevő, amely a Counter projektsablonok Blazor összetevőjén alapul.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  6. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Routable-összetevők használata MVC-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

Az útvonalazható Razor összetevők támogatása az MVC-alkalmazásokban:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

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

  3. Adjon hozzá egy nézetet _Host a projekthez az alábbi tartalommal. Cserélje le a {APP NAMESPACE} helyőrzőt az alkalmazás névterére.

    Views/Home/_Host.cshtml:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Megjegyzés

    Az előző példa feltételezi, hogy a HeadOutlet összetevőt és a Blazor szkriptet (_framework/blazor.server.js) az alkalmazás elrendezése jeleníti meg. További információkért tekintse meg a Konfiguráció szakaszt.

    A .NET 10-ben vagy újabb verziókban a Blazor szkriptet a keretrendszer tartalmazza, ha a projekt legalább egy Razor összetevőfájlt (.razor) tartalmaz. Ha az alkalmazásnak szüksége van a Blazor szkriptre, de nem tartalmaz legalább egy összetevőt, adja hozzá a következő MSBuild tulajdonságot az alkalmazás projektfájljához, hogy kényszerítse a feltétel nélküli szkriptek felvételét:

    <RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Adjon hozzá egy műveletet a Home vezérlőhöz.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Program.cs A végpontokban adjon hozzá egy alacsony prioritású útvonalat a nézetet visszaadó _Host vezérlőművelethez:

    app.MapFallbackToController("Blazor", "Home");

  6. Hozzon létre egy Pages mappát az MVC alkalmazásban, és adjon hozzá routable-összetevőket. Az alábbi példa egy RoutableCounter összetevő, amely a Counter projektsablonok Blazor összetevőjén alapul.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  7. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Összetevők renderelése oldalról vagy nézetből

Ez a szakasz az összetevők lapokhoz vagy nézetekhez való hozzáadására vonatkozik, ahol az összetevők közvetlenül nem kezelhetők a felhasználói kérésekből.

Ha egy összetevőt egy oldalról vagy nézetből szeretne megjeleníteni, használja az Összetevőcímke segédet.

Állapotalapú interaktív összetevők renderelése

Az állapotalapú interaktív összetevők hozzáadhatók egy Razor laphoz vagy nézethez.

Amikor a lap vagy a nézet megjelenítésre kerül:

  • Az összetevő előrenderelve van az oldallal vagy a nézettel.
  • Az előrendezéshez használt kezdeti összetevőállapot elveszik.
  • A kapcsolat létrejöttekor SignalR új összetevőállapot jön létre.

Az alábbi Razor oldal egy összetevőt Counter jelenít meg:

<h1>Razor Page</h1>

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

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Neminteraktív összetevők renderelése

A következő Razor lapon az Counter összetevő statikusan jelenik meg egy űrlapon megadott kezdeti értékkel. Mivel az összetevő statikusan renderelt, az összetevő nem interaktív:

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Összetevő névterei

Ha egyéni mappát használ a projekt Razor összetevőinek tárolására, adja hozzá a mappát jelképező névteret a laphoz/nézethez vagy a _ViewImports.cshtml fájlhoz. Az alábbi példában:

  • Az összetevők a Components projekt mappájában vannak tárolva.
  • A {APP NAMESPACE} helyőrző a projekt névtere. Components a mappa nevét jelöli.
@using {APP NAMESPACE}.Components

A _ViewImports.cshtml fájl a Pages mappában található egy Pages-alkalmazásban vagy a Razor mappában egy MVC-alkalmazásban.

További információ: ASP.NET Core Razor-összetevők.

Előre beállított állapot megőrzése

Az előre beállított állapot megőrzése nélkül az előrendelés során használt állapot elveszik, és újra létre kell hozni az alkalmazás teljes betöltésekor. Ha bármely állapot aszinkron módon van beállítva, a felhasználói felület villanhat, mivel az előre renderelt felhasználói felületet ideiglenesen helyőrző elemek váltják fel, majd újra teljesen renderelődik.

Az előre összeállított összetevők állapotának megőrzéséhez használja a Komponensállapot-címke megőrzése segédet (referenciaforrás). Adja hozzá a Tag Helper címkéjét <persist-component-state /> a lap záró </body> címkéjébe a _Host oldalon, egy olyan alkalmazásban, amely előrendereli a komponenseket.

Megjegyzés

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Pages/_Host.cshtml Az Blazor alkalmazásban lévő ServerPrerendered alkalmazásokbanBlazor Server:

<body>
    ...

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

Döntse el, hogy melyik állapotot kívánja megőrizni a PersistentComponentState szolgáltatással. A [PersistentState] tulajdonságra alkalmazott attribútum egy visszahívást regisztrál, amely megőrzi az állapotot az előrendelés során, és betölti azt, amikor az összetevő interaktívan renderel, vagy a szolgáltatás példányosítása történik.

Az alábbi példában a {TYPE} helyőrző a megőrzendő adatok típusát jelöli (például WeatherForecast[]).

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

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

A következő példában az WeatherForecastPreserveState összetevő megőrzi az időjárás-előrejelzés állapotát az előzetes renderelés során, majd lekéri az állapotot az összetevő inicializálásához. A Komponensállapotot megőrző tag asszisztens az összes összetevő-meghívás után is megőrzi az összetevő állapotát.

WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

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

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

Döntse el, hogy melyik állapotot kívánja megőrizni a PersistentComponentState szolgáltatással. PersistentComponentState.RegisterOnPersisting regisztrál egy visszahívást az összetevő állapotának megőrzéséhez az alkalmazás szüneteltetése előtt. A rendszer az alkalmazás folytatásakor kéri le az állapotot. Az inicializálási kód végén hajtsa végre a hívást, hogy elkerülje a lehetséges versenyhelyzetet az alkalmazás leállítása során.

Az alábbi példában:

  • A {TYPE} helyőrző a megőrizendő adatok típusát jelöli (például WeatherForecast[]).
  • A {TOKEN} helyőrző egy állapotazonosító sztring (például fetchdata).
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

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

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

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

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

        return Task.CompletedTask;
    }

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

A következő példában az WeatherForecastPreserveState összetevő megőrzi az időjárás-előrejelzés állapotát az előzetes renderelés során, majd lekéri az állapotot az összetevő inicializálásához. A Komponensállapotot megőrző tag asszisztens az összes összetevő-meghívás után is megőrzi az összetevő állapotát.

Pages/WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

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

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

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

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

        return Task.CompletedTask;
    }

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

Az előrendelés során használt azonos állapotú összetevők inicializálásával a költséges inicializálási lépések csak egyszer lesznek végrehajtva. A renderelt felhasználói felület megegyezik az előre beállított felhasználói felülettel, így a böngészőben nem történik villódzás.

A rendszer átviszi a megőrzött előrerendelt állapotot az ügyfélnek, ahol az összetevő állapotának visszaállítására szolgál. ASP.NET Core Data Protection biztosítja az adatok biztonságos átvitelét az alkalmazásokban Blazor Server .

Előre beállított állapotméret és SignalR üzenetméretkorlát

A nagy előrerendelt állapotméret meghaladhatja BlazorSignalR kapcsolatcsoport üzenetméretkorlátját, ami a következőket eredményezi:

  • A SignalR áramkör nem tud inicializálni egy hibával az ügyfélen: Circuit host not initialized.
  • Az ügyfél újracsatlakozási felhasználói felülete akkor jelenik meg, ha a kapcsolatcsoport meghibásodik. A helyreállítás nem lehetséges.

A probléma megoldásához használja vagy a , vagy a alábbi módszerek egyikét:

  • Csökkentse az előre beállított állapotba helyezendő adatok mennyiségét.
  • Növelje az SignalR üzenet méretkorlátját. FIGYELMEZTETÉS: A korlát növelése növelheti a szolgáltatásmegtagadási (DoS-) támadások kockázatát.

További Blazor Server erőforrások

Az előzetes rendezés javíthatja a keresőmotor-optimalizálást (SEO) azáltal, hogy megjeleníti a kezdeti HTTP-válasz tartalmát, amellyel a keresőmotorok kiszámíthatják az oldal rangját.

A projekt konfigurálása után a projekt követelményeitől függően kövesse az alábbi szakaszok útmutatását:

Konfiguráció

Az alábbi útmutató segítségével a Razor összetevőket integrálhatja a meglévő Razor Pages vagy MVC alkalmazás lapjaiba vagy nézeteibe.

Fontos

A _Layout.cshtml komponensnél szükséges egy elrendezési oldal () és egy HeadOutlet használata a <head> tartalom szabályozásához, például a lap címének (PageTitle komponens) és egyéb fejelemeinek (HeadContent komponens) kezeléséhez. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

  1. A projekt elrendezésfájljában:

    • Adja hozzá a következő <base> címkét és a HeadOutlet összetevő tagsegítőt a <head> elemhez Pages/Shared/_Layout.cshtml (Razor Oldalak) vagy Views/Shared/_Layout.cshtml (MVC) esetén.

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

      Az href előző példában szereplő érték (az alkalmazás alap elérési útja) feltételezi, hogy az alkalmazás a gyökér URL-cím elérési útján (/) található. Ha az alkalmazás egy alalkalmazás, tekintse meg ASP.NET Core-alkalmazás Blazor alap elérési útját.

      Az HeadOutlet összetevő a fej(<head>) tartalom renderelésére szolgál, beleértve a lapcímeket (PageTitle összetevő) és az egyéb fejelemeket (HeadContent összetevő), amelyeket az Razor összetevők állítanak be. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

    • Adjon hozzá egy címkét <script> a blazor.server.js szkripthez közvetlenül az alkalmazás elrendezésének Scripts renderelési szakasza (@await RenderSectionAsync(...)) előtt.

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

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

      A keretrendszer hozzáadja a blazor.server.js szkriptet az alkalmazáshoz. Nincs szükség szkriptfájl manuális hozzáadására blazor.server.js az alkalmazáshoz.

  2. Adjon hozzá egy importálási fájlt a projekt gyökérmappájába az alábbi tartalommal. Módosítsa a {APP NAMESPACE} helyőrzőt a projekt névterére.

    _Imports.razor:

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

  3. Regisztrálja a Blazor Server szolgáltatásokat a Program.cs-ben, ahol a szolgáltatások regisztrálva vannak.

    builder.Services.AddServerSideBlazor();

  4. Adja hozzá a Blazor hubvégpontot azon végpontokhoz Program.cs , ahol az útvonalak le vannak képezve.

    Helyezze a következő sort a MapRazorPages (Razor Pages) vagy MapControllerRoute (MVC) hívás után:

    app.MapBlazorHub();

  5. Összetevők integrálása bármely lapba vagy nézetbe. Adjon hozzá például egy összetevőt Counter a projekt mappájába Shared .

    Pages/Shared/Counter.razor (Razor oldal) vagy Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

    Razor Oldalak:

    A Pages alkalmazás projektjének Index oldalán adja hozzá az Razor komponens névterét, és helyezze be az összetevőt az oldalba. Amikor az Index oldal betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Pages/Index.cshtml:

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

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

    MVC:

    A projekt MVC alkalmazás nézetében adja hozzá az Index összetevő névterét, és ágyazza be a nézetbe az összetevőt. Amikor a Index nézet betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Views/Home/Index.cshtml:

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

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

További információkért lásd a Komponensek renderelése egy oldalról vagy nézetből szakaszt.

Routable-összetevők használata a Razor Pages-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

A Pages-alkalmazásokban irányítható Razor összetevők támogatása:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

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

  3. Adjon hozzá egy _Host lapot a projekthez az alábbi tartalommal.

    Pages/_Host.cshtml:

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

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

    Ebben a forgatókönyvben az összetevők a megosztott _Layout.cshtml fájlt használják az elrendezésükhöz.

    Fontos

    A _Layout.cshtml komponensnél szükséges egy elrendezési oldal () és egy HeadOutlet használata a <head> tartalom szabályozásához, például a lap címének (PageTitle komponens) és egyéb fejelemeinek (HeadContent komponens) kezeléséhez. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Program.cs A végpontokban adjon hozzá egy alacsony prioritású útvonalat az _Host oldalhoz utolsó végpontként:

    app.MapFallbackToPage("/_Host");

  5. Routolható összetevők hozzáadása a projekthez. Az alábbi példa egy RoutableCounter összetevő, amely a Counter projektsablonok Blazor összetevőjén alapul.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  6. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Routable-összetevők használata MVC-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

Az útvonalazható Razor összetevők támogatása az MVC-alkalmazásokban:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

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

  3. Adjon hozzá egy nézetet _Host a projekthez az alábbi tartalommal.

    Views/Home/_Host.cshtml:

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

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

    Az összetevők a megosztott _Layout.cshtml fájlt használják az elrendezésükhöz.

    Fontos

    A _Layout.cshtml komponensnél szükséges egy elrendezési oldal () és egy HeadOutlet használata a <head> tartalom szabályozásához, például a lap címének (PageTitle komponens) és egyéb fejelemeinek (HeadContent komponens) kezeléséhez. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Adjon hozzá egy műveletet a Home vezérlőhöz.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Program.cs A végpontokban adjon hozzá egy alacsony prioritású útvonalat a nézetet visszaadó _Host vezérlőművelethez:

    app.MapFallbackToController("Blazor", "Home");

  6. Hozzon létre egy Pages mappát az MVC alkalmazásban, és adjon hozzá routable-összetevőket. Az alábbi példa egy RoutableCounter összetevő, amely a Counter projektsablonok Blazor összetevőjén alapul.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<PageTitle>Routable Counter</PageTitle>

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  7. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Összetevők renderelése oldalról vagy nézetből

Ez a szakasz az összetevők lapokhoz vagy nézetekhez való hozzáadására vonatkozik, ahol az összetevők közvetlenül nem kezelhetők a felhasználói kérésekből.

Ha egy összetevőt egy oldalról vagy nézetből szeretne megjeleníteni, használja az Összetevőcímke segédet.

Állapotalapú interaktív összetevők renderelése

Az állapotalapú interaktív összetevők hozzáadhatók egy Razor laphoz vagy nézethez.

Amikor a lap vagy a nézet megjelenítésre kerül:

  • Az összetevő előrenderelve van az oldallal vagy a nézettel.
  • Az előrendezéshez használt kezdeti összetevőállapot elveszik.
  • A kapcsolat létrejöttekor SignalR új összetevőállapot jön létre.

Az alábbi Razor oldal egy összetevőt Counter jelenít meg:

<h1>Razor Page</h1>

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

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Fontos

A _Layout.cshtml komponensnél szükséges egy elrendezési oldal () és egy HeadOutlet használata a <head> tartalom szabályozásához, például a lap címének (PageTitle komponens) és egyéb fejelemeinek (HeadContent komponens) kezeléséhez. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

Neminteraktív összetevők renderelése

A következő Razor lapon az Counter összetevő statikusan jelenik meg egy űrlapon megadott kezdeti értékkel. Mivel az összetevő statikusan renderelt, az összetevő nem interaktív:

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Fontos

A _Layout.cshtml komponensnél szükséges egy elrendezési oldal () és egy HeadOutlet használata a <head> tartalom szabályozásához, például a lap címének (PageTitle komponens) és egyéb fejelemeinek (HeadContent komponens) kezeléséhez. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

Összetevő névterei

Ha egyéni mappát használ a projekt Razor összetevőinek tárolására, adja hozzá a mappát jelképező névteret a laphoz/nézethez vagy a _ViewImports.cshtml fájlhoz. Az alábbi példában:

  • Az összetevők a Components projekt mappájában vannak tárolva.
  • A {APP NAMESPACE} helyőrző a projekt névtere. Components a mappa nevét jelöli.
@using {APP NAMESPACE}.Components

A _ViewImports.cshtml fájl a Pages mappában található egy Pages-alkalmazásban vagy a Razor mappában egy MVC-alkalmazásban.

További információ: ASP.NET Core Razor-összetevők.

Előre beállított állapot megőrzése

Az előre beállított állapot megőrzése nélkül az előrendelés során használt állapot elveszik, és újra létre kell hozni az alkalmazás teljes betöltésekor. Ha bármely állapot aszinkron módon van beállítva, a felhasználói felület villanhat, mivel az előre renderelt felhasználói felületet ideiglenesen helyőrző elemek váltják fel, majd újra teljesen renderelődik.

Ezeknek a problémáknak a megoldásához a Blazor támogatja az állapot megőrzését egy előre összeállított lapon, a Komponensállapot-tartó címke segítő használatával. Helyezze a Tag Helper címkét, <persist-component-state />, a záró </body> címkén belül.

Pages/_Layout.cshtml:

<body>
    ...

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

Döntse el, hogy melyik állapotot kívánja megőrizni a PersistentComponentState szolgáltatással. PersistentComponentState.RegisterOnPersisting regisztrál egy visszahívást az összetevő állapotának megőrzéséhez az alkalmazás szüneteltetése előtt. A rendszer az alkalmazás folytatásakor kéri le az állapotot. Az inicializálási kód végén hajtsa végre a hívást, hogy elkerülje a lehetséges versenyhelyzetet az alkalmazás leállítása során.

A következő példában az WeatherForecastPreserveState összetevő megőrzi az időjárás-előrejelzés állapotát az előzetes renderelés során, majd lekéri az állapotot az összetevő inicializálásához. A Komponensállapotot megőrző tag asszisztens az összes összetevő-meghívás után is megőrzi az összetevő állapotát.

Pages/WeatherForecastPreserveState.razor:

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

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

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

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

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

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

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

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

        return Task.CompletedTask;
    }

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

Az előrendelés során használt azonos állapotú összetevők inicializálásával a költséges inicializálási lépések csak egyszer lesznek végrehajtva. A renderelt felhasználói felület megegyezik az előre beállított felhasználói felülettel, így a böngészőben nem történik villódzás.

A rendszer átviszi a megőrzött előrerendelt állapotot az ügyfélnek, ahol az összetevő állapotának visszaállítására szolgál. ASP.NET Core Data Protection biztosítja az adatok biztonságos átvitelét az alkalmazásokban Blazor Server .

Előre beállított állapotméret és SignalR üzenetméretkorlát

A nagy előrerendelt állapotméret meghaladhatja BlazorSignalR kapcsolatcsoport üzenetméretkorlátját, ami a következőket eredményezi:

  • A SignalR áramkör nem tud inicializálni egy hibával az ügyfélen: Circuit host not initialized.
  • Az ügyfél újracsatlakozási felhasználói felülete akkor jelenik meg, ha a kapcsolatcsoport meghibásodik. A helyreállítás nem lehetséges.

A probléma megoldásához használja vagy a , vagy a alábbi módszerek egyikét:

  • Csökkentse az előre beállított állapotba helyezendő adatok mennyiségét.
  • Növelje az SignalR üzenet méretkorlátját. FIGYELMEZTETÉS: A korlát növelése növelheti a szolgáltatásmegtagadási (DoS-) támadások kockázatát.

További Blazor Server erőforrások

Az előzetes rendezés javíthatja a keresőmotor-optimalizálást (SEO) azáltal, hogy megjeleníti a kezdeti HTTP-válasz tartalmát, amellyel a keresőmotorok kiszámíthatják az oldal rangját.

A projekt konfigurálása után a projekt követelményeitől függően kövesse az alábbi szakaszok útmutatását:

Konfiguráció

Egy meglévő Razor Lapok vagy MVC-alkalmazás képes összetevőket integrálni Razor lapokba vagy nézetekbe:

  1. A projekt elrendezésfájljában:

    • Adja hozzá a következő <base> címkét a <head> elemhez Pages/Shared/_Layout.cshtml (Razor Pages) vagy Views/Shared/_Layout.cshtml (MVC):

      <base href="~/" />

      Az href előző példában szereplő érték (az alkalmazás alap elérési útja) feltételezi, hogy az alkalmazás a gyökér URL-cím elérési útján (/) található. Ha az alkalmazás egy alalkalmazás, tekintse meg ASP.NET Core-alkalmazás Blazor alap elérési útját.

    • Adjon hozzá egy címkét <script> a szkripthez közvetlenül a blazor.server.jsScripts renderelési szakasz előtt.

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

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

    @await RenderSectionAsync("Scripts", required: false)
</body>

      A keretrendszer hozzáadja a blazor.server.js szkriptet az alkalmazáshoz. Nincs szükség szkriptfájl manuális hozzáadására blazor.server.js az alkalmazáshoz.

  2. Adjon hozzá egy importálási fájlt a projekt gyökérmappájába az alábbi tartalommal. Módosítsa a {APP NAMESPACE} helyőrzőt a projekt névterére.

    _Imports.razor:

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

  3. Regisztrálja a Blazor Server szolgáltatást a Startup.ConfigureServices-ben.

    A Startup.cs:

    services.AddServerSideBlazor();

  4. Adja hozzá a Blazor Hub végpontot a app.UseEndpoints végpontokhoz Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Összetevők integrálása bármely lapba vagy nézetbe. Adjon hozzá például egy összetevőt Counter a projekt mappájába Shared .

    Pages/Shared/Counter.razor (Razor oldal) vagy Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

    Razor Oldalak:

    A Pages alkalmazás projektjének Index oldalán adja hozzá az Razor komponens névterét, és helyezze be az összetevőt az oldalba. Amikor az Index oldal betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Pages/Index.cshtml:

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

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

    Az előző példában cserélje le a {APP NAMESPACE} helyőrzőt az alkalmazás névterére.

    MVC:

    A projekt MVC alkalmazás nézetében adja hozzá az Index összetevő névterét, és ágyazza be a nézetbe az összetevőt. Amikor a Index nézet betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Views/Home/Index.cshtml:

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

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

További információkért lásd a Komponensek renderelése egy oldalról vagy nézetből szakaszt.

Routable-összetevők használata a Razor Pages-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

A Pages-alkalmazásokban irányítható Razor összetevők támogatása:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Megjegyzés

    A .NET 5.0.1 kiadásával és minden további 5.x kiadás esetén az Router összetevő tartalmazza a PreferExactMatches következő paramétert @true: . További információ: Migrálás ASP.NET Core 3.1-ről .NET 5-be.

  3. Adjon hozzá egy _Host lapot a projekthez az alábbi tartalommal.

    Pages/_Host.cshtml:

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

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

    Az összetevők a megosztott _Layout.cshtml fájlt használják az elrendezésükhöz.

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Startup.Configure A végpontokban Startup.csadjon hozzá egy alacsony prioritású útvonalat az _Host oldalhoz utolsó végpontként:

    endpoints.MapFallbackToPage("/_Host");

    Az alábbi példa egy tipikus alkalmazás végpontkonfigurációjának hozzáadott sorát mutatja be:

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

  5. Routolható összetevők hozzáadása a projekthez.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  6. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Routable-összetevők használata MVC-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

Az útvonalazható Razor összetevők támogatása az MVC-alkalmazásokban:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

    Megjegyzés

    A .NET 5.0.1 kiadásával és minden további 5.x kiadás esetén az Router összetevő tartalmazza a PreferExactMatches következő paramétert @true: . További információ: Migrálás ASP.NET Core 3.1-ről .NET 5-be.

  3. Adjon hozzá egy nézetet _Host a projekthez az alábbi tartalommal.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Az összetevők a megosztott _Layout.cshtml fájlt használják az elrendezésükhöz.

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Adjon hozzá egy műveletet a Home vezérlőhöz.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure A végpontokban Startup.csadjon hozzá egy alacsony prioritású útvonalat a nézetet visszaadó _Host vezérlőművelethez:

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

    Az alábbi példa egy tipikus alkalmazás végpontkonfigurációjának hozzáadott sorát mutatja be:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Routolható összetevők hozzáadása a projekthez.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  7. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Összetevők renderelése oldalról vagy nézetből

Ez a szakasz az összetevők lapokhoz vagy nézetekhez való hozzáadására vonatkozik, ahol az összetevők közvetlenül nem kezelhetők a felhasználói kérésekből.

Ha egy összetevőt egy oldalról vagy nézetből szeretne megjeleníteni, használja az Összetevőcímke segédet.

Állapotalapú interaktív összetevők renderelése

Az állapotalapú interaktív összetevők hozzáadhatók egy Razor laphoz vagy nézethez.

Amikor a lap vagy a nézet megjelenítésre kerül:

  • Az összetevő előrenderelve van az oldallal vagy a nézettel.
  • Az előrendezéshez használt kezdeti összetevőállapot elveszik.
  • A kapcsolat létrejöttekor SignalR új összetevőállapot jön létre.

Az alábbi Razor oldal egy összetevőt Counter jelenít meg:

<h1>My Razor Page</h1>

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

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Neminteraktív összetevők renderelése

A következő Razor lapon az Counter összetevő statikusan jelenik meg egy űrlapon megadott kezdeti értékkel. Mivel az összetevő statikusan renderelt, az összetevő nem interaktív:

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Összetevő névterei

Ha egyéni mappát használ a projekt Razor összetevőinek tárolására, adja hozzá a mappát jelképező névteret a laphoz/nézethez vagy a _ViewImports.cshtml fájlhoz. Az alábbi példában:

  • Az összetevők a Components projekt mappájában vannak tárolva.
  • A {APP NAMESPACE} helyőrző a projekt névtere. Components a mappa nevét jelöli.
@using {APP NAMESPACE}.Components

A _ViewImports.cshtml fájl a Pages mappában található egy Pages-alkalmazásban vagy a Razor mappában egy MVC-alkalmazásban.

További információ: ASP.NET Core Razor-összetevők.

Előre beállított állapotméret és SignalR üzenetméretkorlát

A nagy előrerendelt állapotméret meghaladhatja BlazorSignalR kapcsolatcsoport üzenetméretkorlátját, ami a következőket eredményezi:

  • A SignalR áramkör nem tud inicializálni egy hibával az ügyfélen: Circuit host not initialized.
  • Az ügyfél újracsatlakozási felhasználói felülete akkor jelenik meg, ha a kapcsolatcsoport meghibásodik. A helyreállítás nem lehetséges.

A probléma megoldásához használja vagy a , vagy a alábbi módszerek egyikét:

  • Csökkentse az előre beállított állapotba helyezendő adatok mennyiségét.
  • Növelje az SignalR üzenet méretkorlátját. FIGYELMEZTETÉS: A korlát növelése növelheti a szolgáltatásmegtagadási (DoS-) támadások kockázatát.

További Blazor Server erőforrások

Razor összetevők integrálhatók a Pages vagy az MVC alkalmazásokba Razor . Az oldal vagy nézet megjelenítésekor az összetevők egyszerre előrerendelhetők.

Az előzetes rendezés javíthatja a keresőmotor-optimalizálást (SEO) azáltal, hogy megjeleníti a kezdeti HTTP-válasz tartalmát, amellyel a keresőmotorok kiszámíthatják az oldal rangját.

A projekt konfigurálása után a projekt követelményeitől függően kövesse az alábbi szakaszok útmutatását:

Konfiguráció

Egy meglévő Razor Lapok vagy MVC-alkalmazás képes összetevőket integrálni Razor lapokba vagy nézetekbe:

  1. A projekt elrendezésfájljában:

    • Adja hozzá a következő <base> címkét a <head> elemhez Pages/Shared/_Layout.cshtml (Razor Pages) vagy Views/Shared/_Layout.cshtml (MVC):

      + <base href="~/" />

      Az href előző példában szereplő érték (az alkalmazás alap elérési útja) feltételezi, hogy az alkalmazás a gyökér URL-cím elérési útján (/) található. Ha az alkalmazás egy alalkalmazás, tekintse meg ASP.NET Core-alkalmazás Blazor alap elérési útját.

    • Adjon hozzá egy címkét <script> a szkripthez közvetlenül a blazor.server.jsScripts renderelési szakasz előtt.

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

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

    @await RenderSectionAsync("Scripts", required: false)
</body>

      A keretrendszer hozzáadja a blazor.server.js szkriptet az alkalmazáshoz. Nincs szükség szkriptfájl manuális hozzáadására blazor.server.js az alkalmazáshoz.

  2. Adjon hozzá egy importálási fájlt a projekt gyökérmappájába az alábbi tartalommal. Módosítsa a {APP NAMESPACE} helyőrzőt a projekt névterére.

    _Imports.razor:

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

  3. Regisztrálja a Blazor Server szolgáltatást a Startup.ConfigureServices-ben.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Adja hozzá a Blazor Hub végpontot a app.UseEndpoints végpontokhoz Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Összetevők integrálása bármely lapba vagy nézetbe. Adjon hozzá például egy összetevőt Counter a projekt mappájába Shared .

    Pages/Shared/Counter.razor (Razor oldal) vagy Views/Shared/Counter.razor (MVC):

    <h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

    Razor Oldalak:

    A Pages alkalmazás projektjének Index oldalán adja hozzá az Razor komponens névterét, és helyezze be az összetevőt az oldalba. Amikor az Index oldal betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Pages/Index.cshtml:

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

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

    Az előző példában cserélje le a {APP NAMESPACE} helyőrzőt az alkalmazás névterére.

    MVC:

    A projekt MVC alkalmazás nézetében adja hozzá az Index összetevő névterét, és ágyazza be a nézetbe az összetevőt. Amikor a Index nézet betöltődik, az Counter összetevő előrerendelt lesz a lapon. Az alábbi példában cserélje le a {APP NAMESPACE} helyőrzőt a projekt névterére.

    Views/Home/Index.cshtml:

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

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

További információkért lásd a Komponensek renderelése egy oldalról vagy nézetből szakaszt.

Routable-összetevők használata a Razor Pages-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

A Pages-alkalmazásokban irányítható Razor összetevők támogatása:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Adjon hozzá egy _Host lapot a projekthez az alábbi tartalommal.

    Pages/_Host.cshtml:

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

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

    Az összetevők a megosztott _Layout.cshtml fájlt használják az elrendezésükhöz.

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Startup.Configure A végpontokban Startup.csadjon hozzá egy alacsony prioritású útvonalat az _Host oldalhoz utolsó végpontként:

    endpoints.MapFallbackToPage("/_Host");

    Az alábbi példa egy tipikus alkalmazás végpontkonfigurációjának hozzáadott sorát mutatja be:

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

  5. Routolható összetevők hozzáadása a projekthez.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  6. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Routable-összetevők használata MVC-alkalmazásokban

Ez a szakasz olyan összetevők hozzáadására vonatkozik, amelyek közvetlenül a felhasználói kérésekből származnak.

Az útvonalazható Razor összetevők támogatása az MVC-alkalmazásokban:

  1. Kövesse a Konfiguráció szakaszban található útmutatást.

  2. Adjon hozzá egy összetevőt App a projekt gyökeréhez az alábbi tartalommal.

    App.razor:

    @using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

  3. Adjon hozzá egy nézetet _Host a projekthez az alábbi tartalommal.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Az összetevők a megosztott _Layout.cshtml fájlt használják az elrendezésükhöz.

    RenderMode beállítja, hogy az App komponens:

    • Előre le van renderelve az oldalra.
    • Statikus HTML-ként jelenik meg a lapon, vagy ha tartalmazza a szükséges információkat az alkalmazás indításához a felhasználói ügynöktől Blazor.

    Az összetevőcímke-segédről , beleértve a paraméterek és RenderMode a konfiguráció átadását is, a ASP.NET Core összetevőcímke-segédjében talál további információt.

  4. Adjon hozzá egy műveletet a Home vezérlőhöz.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure A végpontokban Startup.csadjon hozzá egy alacsony prioritású útvonalat a nézetet visszaadó _Host vezérlőművelethez:

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

    Az alábbi példa egy tipikus alkalmazás végpontkonfigurációjának hozzáadott sorát mutatja be:

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToController("Blazor", "Home");
});

  6. Routolható összetevők hozzáadása a projekthez.

    Pages/RoutableCounter.razor:

    @page "/routable-counter"

<h1>Routable Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

  7. Futtassa a projektet, és navigáljon az irányítható RoutableCounter összetevőhöz /routable-counter.

A névterekről további információt az Összetevő névterek szakaszában talál.

Összetevők renderelése oldalról vagy nézetből

Ez a szakasz az összetevők lapokhoz vagy nézetekhez való hozzáadására vonatkozik, ahol az összetevők közvetlenül nem kezelhetők a felhasználói kérésekből.

Ha egy összetevőt egy oldalról vagy nézetből szeretne megjeleníteni, használja az Összetevőcímke segédet.

Állapotalapú interaktív összetevők renderelése

Az állapotalapú interaktív összetevők hozzáadhatók egy Razor laphoz vagy nézethez.

Amikor a lap vagy a nézet megjelenítésre kerül:

  • Az összetevő előrenderelve van az oldallal vagy a nézettel.
  • Az előrendezéshez használt kezdeti összetevőállapot elveszik.
  • A kapcsolat létrejöttekor SignalR új összetevőállapot jön létre.

Az alábbi Razor oldal egy összetevőt Counter jelenít meg:

<h1>My Razor Page</h1>

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

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Neminteraktív összetevők renderelése

A következő Razor lapon az Counter összetevő statikusan jelenik meg egy űrlapon megadott kezdeti értékkel. Mivel az összetevő statikusan renderelt, az összetevő nem interaktív:

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

További információért lásd: Összetevőcímke-segéd az ASP.NET Core-ban.

Összetevő névterei

Ha egyéni mappát használ a projekt Razor összetevőinek tárolására, adja hozzá a mappát jelképező névteret a laphoz/nézethez vagy a _ViewImports.cshtml fájlhoz. Az alábbi példában:

  • Az összetevők a Components projekt mappájában vannak tárolva.
  • A {APP NAMESPACE} helyőrző a projekt névtere. Components a mappa nevét jelöli.
@using {APP NAMESPACE}.Components

A _ViewImports.cshtml fájl a Pages mappában található egy Pages-alkalmazásban vagy a Razor mappában egy MVC-alkalmazásban.

További információ: ASP.NET Core Razor-összetevők.

Előre beállított állapotméret és SignalR üzenetméretkorlát

A nagy előrerendelt állapotméret meghaladhatja BlazorSignalR kapcsolatcsoport üzenetméretkorlátját, ami a következőket eredményezi:

  • A SignalR áramkör nem tud inicializálni egy hibával az ügyfélen: Circuit host not initialized.
  • Az ügyfél újracsatlakozási felhasználói felülete akkor jelenik meg, ha a kapcsolatcsoport meghibásodik. A helyreállítás nem lehetséges.

A probléma megoldásához használja vagy a , vagy a alábbi módszerek egyikét:

  • Csökkentse az előre beállított állapotba helyezendő adatok mennyiségét.
  • Növelje az SignalR üzenet méretkorlátját. FIGYELMEZTETÉS: A korlát növelése növelheti a szolgáltatásmegtagadási (DoS-) támadások kockázatát.

További Blazor Server erőforrások

  • Last updated on