Delen via

ASP.NET Core-onderdelen Razor integreren met MVC of Razor Pages

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

Razor-componenten kunnen worden geïntegreerd in Razor Pages of MVC-apps. Wanneer de pagina of weergave wordt gerenderd, kunnen componenten tegelijkertijd worden voorgeladen.

Belangrijk

Frameworkwijzigingen in ASP.NET Core-releases hebben geleid tot verschillende sets instructies in dit artikel. Voordat u de richtlijnen van dit artikel gebruikt, controleert u of de documentversiekiezer boven aan dit artikel overeenkomt met de versie van ASP.NET Core die u voor uw app wilt gebruiken.

Prerendering kan seo (Search Engine Optimization) verbeteren door inhoud weer te geven voor het eerste HTTP-antwoord dat zoekmachines kunnen gebruiken om de paginarang te berekenen.

Nadat u het project hebt geconfigureerd, gebruikt u de richtlijnen in de volgende secties, afhankelijk van de vereisten van het project:

Configuratie

Gebruik de volgende richtlijnen om Razor componenten te integreren in pagina's of weergaven van een bestaande Razor Pagina's- of MVC-app.

  1. Voeg een importbestand toe aan de hoofdmap van het project met de volgende inhoud. Wijzig de {APP NAMESPACE} placeholder naar de naamruimte van het project.

    _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. In het projectlayoutbestand (Pages/Shared/_Layout.cshtml in Razor Pages-apps of Views/Shared/_Layout.cshtml in MVC-apps):

    • Voeg de volgende <base> tag en HeadOutlet component Tag Helper toe aan het <head> element:

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

      Bij de href waarde (het basispad van de app) in het vorige voorbeeld wordt ervan uitgegaan dat de app zich op het hoofd-URL-pad (/) bevindt. Als de app een subtoepassing is, raadpleegt u het basispad van de ASP.NET Core-app.

      Het HeadOutlet onderdeel wordt gebruikt om hoofdinhoud (<head>) weer te geven voor paginatitels (PageTitle onderdeel) en andere hoofdelementen (HeadContent onderdeel) die zijn ingesteld door Razor onderdelen. Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

    • Voeg een <script> tag toe voor het blazor.server.js script direct vóór de Scripts rendersectie (@await RenderSectionAsync(...)):

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

      Het framework voegt het blazor.server.js script toe aan de app. U hoeft geen scriptbestand handmatig aan de app toe te voegen blazor.server.js .

    Notitie

    Normaal gesproken wordt de indeling geladen via een _ViewStart.cshtml bestand.

  3. Registreer de Blazor Server services in Program.cs waar services zijn geregistreerd.

    builder.Services.AddServerSideBlazor();

  4. Voeg het Blazor Hub-eindpunt toe aan de eindpunten van Program.cs waar routes zijn geconfigureerd. Plaats de volgende regel na het aanroepen van MapRazorPages (Razor Pagina's) of MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integreer onderdelen in een pagina of weergave. Voeg bijvoorbeeld een Counter component toe aan de Shared map van het project.

    Pages/Shared/Counter.razor (Razor Pagina's) Of 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 Pagina's:

    Op de Index-pagina van een Razor Pagina-app, voeg de naamruimte van het Counter onderdeel toe en sluit het onderdeel in op de pagina. Wanneer de Index pagina wordt geladen, wordt het Counter onderdeel vooraf gegenereerd op de pagina. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Pages/Index.cshtml:

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

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

    MVC:

    Voeg in de projectweergave Index van een MVC-app de naamruimte van het Counter onderdeel toe en sluit het onderdeel in de weergave in. Wanneer de Index weergave wordt geladen, wordt het Counter onderdeel vooraf op de pagina weergegeven. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Views/Home/Index.cshtml:

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

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

Zie de onderdelen weergeven van een pagina of weergavesectie voor meer informatie.

Routeerbare onderdelen gebruiken in een Razor Pages-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Om routeerbare Razor componenten in Razor Pages-apps te ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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. Voeg een _Host pagina toe aan het project met de volgende inhoud. Vervang de {APP NAMESPACE} tijdelijke aanduiding door de namespace van de app.

    Pages/_Host.cshtml:

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

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

    Notitie

    In het voorgaande voorbeeld wordt ervan uitgegaan dat het HeadOutlet onderdeel en Blazor het script (_framework/blazor.server.js) worden weergegeven door de indeling van de app. Zie de sectie Configuratie voor meer informatie.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg in de Program.cs eindpunten een route met lage prioriteit toe voor de _Host pagina als het laatste eindpunt:

    app.MapFallbackToPage("/_Host");

  5. Routeerbare onderdelen toevoegen aan het project. Het volgende voorbeeld is een RoutableCounter onderdeel op basis van het Counter onderdeel in de Blazor projectsjablonen.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Routeerbare onderdelen gebruiken in een MVC-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Routeerbare Razor onderdelen in MVC-apps ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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. Voeg een _Host weergave toe aan het project met de volgende inhoud. Vervang de {APP NAMESPACE} tijdelijke aanduiding door de namespace van de app.

    Views/Home/_Host.cshtml:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Notitie

    In het voorgaande voorbeeld wordt ervan uitgegaan dat het HeadOutlet onderdeel en Blazor het script (_framework/blazor.server.js) worden weergegeven door de indeling van de app. Zie de sectie Configuratie voor meer informatie.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg een actie toe aan de Home controller.

    Controllers/HomeController.cs:

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

  5. Voeg in de Program.cs eindpunten een route met lage prioriteit toe voor de controlleractie die de _Host weergave retourneert:

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

  6. Maak een Pages map in de MVC-app en voeg routeerbare onderdelen toe. Het volgende voorbeeld is een RoutableCounter onderdeel op basis van het Counter onderdeel in de Blazor projectsjablonen.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Onderdelen van een pagina of weergave weergeven

Deze sectie heeft betrekking op het toevoegen van onderdelen aan pagina's of weergaven, waarbij de onderdelen niet rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Als u een onderdeel van een pagina of weergave wilt weergeven, gebruikt u de Helper voor onderdeeltags.

Render statusgevoelige interactieve componenten

Stateful interactieve componenten kunnen aan een Razor pagina of weergave worden toegevoegd.

Wanneer de pagina of weergave wordt weergegeven:

  • Het onderdeel wordt vooraf gerenderd met de pagina of weergave.
  • De initiële onderdeelstatus die wordt gebruikt voor prerendering, gaat verloren.
  • Er wordt een nieuwe onderdeelstatus gemaakt wanneer de SignalR verbinding tot stand is gebracht.

Op de volgende Razor pagina wordt een Counter onderdeel weergegeven:

<h1>Razor Page</h1>

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

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Niet-inactieve onderdelen weergeven

Op de volgende Razor pagina wordt het Counter onderdeel statisch weergegeven met een initiële waarde die is opgegeven met behulp van een formulier. Omdat het onderdeel statisch wordt weergegeven, is het onderdeel niet interactief:

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Onderdeelnaamruimten

Wanneer u een aangepaste map gebruikt om de onderdelen van Razor het project op te slaan, voegt u de naamruimte toe die de map vertegenwoordigt aan de pagina/weergave of aan het _ViewImports.cshtml bestand. In het volgende voorbeeld:

  • Onderdelen worden opgeslagen in de Components map van het project.
  • De {APP NAMESPACE} placeholder is de naamruimte van het project. Components vertegenwoordigt de naam van de map.
@using {APP NAMESPACE}.Components

Het _ViewImports.cshtml bestand bevindt zich in de Pages map van een Razor Pagina-app of de Views map van een MVC-app.

Zie ASP.NET Core Razor-onderdelenvoor meer informatie.

Bewaar vooraf gerenderde toestand

Zonder dat de vooraf gegenereerde status behouden blijft, gaat de status die tijdens het prerenderen wordt gebruikt verloren en moet deze opnieuw worden gemaakt wanneer de app volledig is geladen. Als een toestand asynchroon wordt ingesteld, kan de gebruikersinterface flikkeren omdat de vooraf weergegeven gebruikersinterface wordt vervangen door tijdelijke tijdelijke aanduidingen en vervolgens opnieuw volledig wordt gerenderd.

Als u de status wilt behouden voor vooraf gegenereerde onderdelen, gebruikt u de Helper voor persistente statustags (referentiebron). Voeg de tag van de Tag Helper, <persist-component-state />, toe binnen de sluitende </body>-tag van de _Host-pagina in een app die onderdelen vooraf rendert.

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch branches of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

In Pages/_Host.cshtml van Blazor apps die ServerPrerendered zijn in een Blazor Server app:

<body>
    ...

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

Bepaal welke status moet worden behouden met behulp van de PersistentComponentState service. Het [SupplyParameterFromPersistentComponentState]-attribuut dat wordt toegepast op een eigenschap registreert een callback om de toestand te behouden tijdens prerendering en laadt deze wanneer de component interactief rendert of de service wordt geïnstantieerd.

In het volgende voorbeeld, vertegenwoordigt de {TYPE}-placeholder het type gegevens dat moet worden behouden (bijvoorbeeld WeatherForecast[]).

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

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

In het volgende voorbeeld houdt de WeatherForecastPreserveState-component de weersverwachtingstatus vast tijdens het voorrenderen en haalt vervolgens de status op om de component te initialiseren. De Helper voor persistente onderdeelstatustags blijft de status van het onderdeel behouden na alle aanroepen van onderdelen.

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

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

Bepaal welke status moet worden behouden met behulp van de PersistentComponentState service. PersistentComponentState.RegisterOnPersisting registreert een callback om de onderdeelstatus te behouden voordat de app wordt onderbroken. De status wordt opgehaald wanneer de toepassing wordt hervat. Maak de aanroep aan het einde van de initialisatiecode om tijdens het afsluiten van de app een potentiële raceconditie te voorkomen.

In het volgende voorbeeld:

  • De {TYPE} tijdelijke aanduiding vertegenwoordigt het type gegevens dat moet worden bewaard (bijvoorbeeld WeatherForecast[]).
  • De {TOKEN} placeholder is een staat-identificatiestring (bijvoorbeeld, 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();
    }
}

In het volgende voorbeeld houdt de WeatherForecastPreserveState-component de weersverwachtingstatus vast tijdens het voorrenderen en haalt vervolgens de status op om de component te initialiseren. De Helper voor persistente onderdeelstatustags blijft de status van het onderdeel behouden na alle aanroepen van onderdelen.

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

Door onderdelen te initialiseren met dezelfde status die tijdens het prerenderen wordt gebruikt, worden dure initialisatiestappen slechts één keer uitgevoerd. De gerenderde gebruikersinterface komt ook overeen met de vooraf gegenereerde gebruikersinterface, dus er treedt geen flikkering op in de browser.

De persistente vooraf gegenereerde status wordt overgebracht naar de client, waar deze wordt gebruikt om de status van het onderdeel te herstellen. ASP.NET Core Data Protection zorgt ervoor dat de gegevens veilig worden overgedragen in Blazor Server apps.

Vooraf weergegeven statusgrootte en SignalR limiet voor berichtgrootte

Een grote vooraf berekende statusgrootte kan groter zijn dan de berichtgrootte limiet van het circuit van BlazorSignalR, wat resulteert in het volgende:

  • Het SignalR-circuit initialiseert niet vanwege een fout op de client: Circuit host not initialized.
  • De gebruikersinterface voor opnieuw verbinden op de client wordt weergegeven wanneer het circuit mislukt. Herstel is niet mogelijk.

Gebruik van de volgende methoden om het probleem op te lossen:

  • Verminder de hoeveelheid gegevens die u in de vooraf weergegeven status plaatst.
  • Verhoog de limiet voor SignalR berichtgrootte. WAARSCHUWING: Als u de limiet verhoogt, kan het risico op DoS-aanvallen (Denial of Service) toenemen.

Aanvullende Blazor Server informatiebronnen

Prerendering kan seo (Search Engine Optimization) verbeteren door inhoud weer te geven voor het eerste HTTP-antwoord dat zoekmachines kunnen gebruiken om de paginarang te berekenen.

Nadat u het project hebt geconfigureerd, gebruikt u de richtlijnen in de volgende secties, afhankelijk van de vereisten van het project:

Configuratie

Gebruik de volgende richtlijnen om Razor componenten te integreren in pagina's of weergaven van een bestaande Razor Pagina's- of MVC-app.

Belangrijk

Het gebruik van een indelingspagina (_Layout.cshtml) met een Component Tag Helper voor een HeadOutlet onderdeel is vereist voor het beheren <head> van inhoud, zoals de titel (PageTitle component) van de pagina en andere hoofdelementen (HeadContent onderdeel). Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

  1. In het indelingsbestand van het project:

    • Voeg de volgende <base> tag en HeadOutlet component-taghelper toe aan het <head> element in Pages/Shared/_Layout.cshtml (Razor Pagina's) of Views/Shared/_Layout.cshtml (MVC):

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

      Bij de href waarde (het basispad van de app) in het vorige voorbeeld wordt ervan uitgegaan dat de app zich op het hoofd-URL-pad (/) bevindt. Als de app een subtoepassing is, raadpleegt u het basispad van de ASP.NET Core-app.

      Het HeadOutlet onderdeel wordt gebruikt om hoofdinhoud (<head>) weer te geven voor paginatitels (PageTitle onderdeel) en andere hoofdelementen (HeadContent onderdeel) die zijn ingesteld door Razor onderdelen. Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

    • Voeg direct vóór de <script> rendersectie (blazor.server.js) een Scripts tag toe voor het @await RenderSectionAsync(...) script in de indeling van de app.

      Pages/Shared/_Layout.cshtml (Razor Pagina's) Of Views/Shared/_Layout.cshtml (MVC):

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

      Het framework voegt het blazor.server.js script toe aan de app. U hoeft geen scriptbestand handmatig aan de app toe te voegen blazor.server.js .

  2. Voeg een importbestand toe aan de hoofdmap van het project met de volgende inhoud. Wijzig de {APP NAMESPACE} placeholder naar de naamruimte van het project.

    _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. Registreer de Blazor Server services in Program.cs waar services zijn geregistreerd.

    builder.Services.AddServerSideBlazor();

  4. Voeg het Blazor Hub-eindpunt toe aan de eindpunten van Program.cs waar routes zijn geconfigureerd.

    Plaats de volgende regel na het aanroepen van MapRazorPages (Razor Pagina's) of MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integreer onderdelen in een pagina of weergave. Voeg bijvoorbeeld een Counter component toe aan de Shared map van het project.

    Pages/Shared/Counter.razor (Razor Pagina's) Of 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 Pagina's:

    Op de Index-pagina van een Razor Pagina-app, voeg de naamruimte van het Counter onderdeel toe en sluit het onderdeel in op de pagina. Wanneer de Index pagina wordt geladen, wordt het Counter onderdeel vooraf gegenereerd op de pagina. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Pages/Index.cshtml:

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

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

    MVC:

    Voeg in de projectweergave Index van een MVC-app de naamruimte van het Counter onderdeel toe en sluit het onderdeel in de weergave in. Wanneer de Index weergave wordt geladen, wordt het Counter onderdeel vooraf op de pagina weergegeven. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Views/Home/Index.cshtml:

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

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

Zie de onderdelen weergeven van een pagina of weergavesectie voor meer informatie.

Routeerbare onderdelen gebruiken in een Razor Pages-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Om routeerbare Razor componenten in Razor Pages-apps te ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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. Voeg een _Host pagina toe aan het project met de volgende inhoud.

    Pages/_Host.cshtml:

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

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

    In dit scenario gebruiken onderdelen het gedeelde _Layout.cshtml bestand voor hun indeling.

    Belangrijk

    Het gebruik van een indelingspagina (_Layout.cshtml) met een Component Tag Helper voor een HeadOutlet onderdeel is vereist voor het beheren <head> van inhoud, zoals de titel (PageTitle component) van de pagina en andere hoofdelementen (HeadContent onderdeel). Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg in de Program.cs eindpunten een route met lage prioriteit toe voor de _Host pagina als het laatste eindpunt:

    app.MapFallbackToPage("/_Host");

  5. Routeerbare onderdelen toevoegen aan het project. Het volgende voorbeeld is een RoutableCounter onderdeel op basis van het Counter onderdeel in de Blazor projectsjablonen.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Routeerbare onderdelen gebruiken in een MVC-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Routeerbare Razor onderdelen in MVC-apps ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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. Voeg een _Host weergave toe aan het project met de volgende inhoud.

    Views/Home/_Host.cshtml:

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

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

    Onderdelen gebruiken het gedeelde _Layout.cshtml bestand voor hun indeling.

    Belangrijk

    Het gebruik van een indelingspagina (_Layout.cshtml) met een Component Tag Helper voor een HeadOutlet onderdeel is vereist voor het beheren <head> van inhoud, zoals de titel (PageTitle component) van de pagina en andere hoofdelementen (HeadContent onderdeel). Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg een actie toe aan de Home controller.

    Controllers/HomeController.cs:

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

  5. Voeg in de Program.cs eindpunten een route met lage prioriteit toe voor de controlleractie die de _Host weergave retourneert:

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

  6. Maak een Pages map in de MVC-app en voeg routeerbare onderdelen toe. Het volgende voorbeeld is een RoutableCounter onderdeel op basis van het Counter onderdeel in de Blazor projectsjablonen.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Onderdelen van een pagina of weergave weergeven

Deze sectie heeft betrekking op het toevoegen van onderdelen aan pagina's of weergaven, waarbij de onderdelen niet rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Als u een onderdeel van een pagina of weergave wilt weergeven, gebruikt u de Helper voor onderdeeltags.

Render statusgevoelige interactieve componenten

Stateful interactieve componenten kunnen aan een Razor pagina of weergave worden toegevoegd.

Wanneer de pagina of weergave wordt weergegeven:

  • Het onderdeel wordt vooraf gerenderd met de pagina of weergave.
  • De initiële onderdeelstatus die wordt gebruikt voor prerendering, gaat verloren.
  • Er wordt een nieuwe onderdeelstatus gemaakt wanneer de SignalR verbinding tot stand is gebracht.

Op de volgende Razor pagina wordt een Counter onderdeel weergegeven:

<h1>Razor Page</h1>

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

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Belangrijk

Het gebruik van een indelingspagina (_Layout.cshtml) met een Component Tag Helper voor een HeadOutlet onderdeel is vereist voor het beheren <head> van inhoud, zoals de titel (PageTitle component) van de pagina en andere hoofdelementen (HeadContent onderdeel). Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

Niet-inactieve onderdelen weergeven

Op de volgende Razor pagina wordt het Counter onderdeel statisch weergegeven met een initiële waarde die is opgegeven met behulp van een formulier. Omdat het onderdeel statisch wordt weergegeven, is het onderdeel niet interactief:

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Belangrijk

Het gebruik van een indelingspagina (_Layout.cshtml) met een Component Tag Helper voor een HeadOutlet onderdeel is vereist voor het beheren <head> van inhoud, zoals de titel (PageTitle component) van de pagina en andere hoofdelementen (HeadContent onderdeel). Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

Onderdeelnaamruimten

Wanneer u een aangepaste map gebruikt om de onderdelen van Razor het project op te slaan, voegt u de naamruimte toe die de map vertegenwoordigt aan de pagina/weergave of aan het _ViewImports.cshtml bestand. In het volgende voorbeeld:

  • Onderdelen worden opgeslagen in de Components map van het project.
  • De {APP NAMESPACE} placeholder is de naamruimte van het project. Components vertegenwoordigt de naam van de map.
@using {APP NAMESPACE}.Components

Het _ViewImports.cshtml bestand bevindt zich in de Pages map van een Razor Pagina-app of de Views map van een MVC-app.

Zie ASP.NET Core Razor-onderdelenvoor meer informatie.

Bewaar vooraf gerenderde toestand

Zonder dat de vooraf gegenereerde status behouden blijft, gaat de status die tijdens het prerenderen wordt gebruikt verloren en moet deze opnieuw worden gemaakt wanneer de app volledig is geladen. Als een toestand asynchroon wordt ingesteld, kan de gebruikersinterface flikkeren omdat de vooraf weergegeven gebruikersinterface wordt vervangen door tijdelijke tijdelijke aanduidingen en vervolgens opnieuw volledig wordt gerenderd.

Om deze problemen op te lossen, biedt Blazor ondersteuning voor het behouden van de status op een voorgerenderde pagina met behulp van de Taghelper voor het bewaren van status van componenten. Voeg de tag van de Tag Helper toe, <persist-component-state /> in de afsluitende </body> tag.

Pages/_Layout.cshtml:

<body>
    ...

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

Bepaal welke status moet worden behouden met behulp van de PersistentComponentState service. PersistentComponentState.RegisterOnPersisting registreert een callback om de onderdeelstatus te behouden voordat de app wordt onderbroken. De status wordt opgehaald wanneer de toepassing wordt hervat. Maak de aanroep aan het einde van de initialisatiecode om tijdens het afsluiten van de app een potentiële raceconditie te voorkomen.

In het volgende voorbeeld houdt de WeatherForecastPreserveState-component de weersverwachtingstatus vast tijdens het voorrenderen en haalt vervolgens de status op om de component te initialiseren. De Helper voor persistente onderdeelstatustags blijft de status van het onderdeel behouden na alle aanroepen van onderdelen.

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

Door onderdelen te initialiseren met dezelfde status die tijdens het prerenderen wordt gebruikt, worden dure initialisatiestappen slechts één keer uitgevoerd. De gerenderde gebruikersinterface komt ook overeen met de vooraf gegenereerde gebruikersinterface, dus er treedt geen flikkering op in de browser.

De persistente vooraf gegenereerde status wordt overgebracht naar de client, waar deze wordt gebruikt om de status van het onderdeel te herstellen. ASP.NET Core Data Protection zorgt ervoor dat de gegevens veilig worden overgedragen in Blazor Server apps.

Vooraf weergegeven statusgrootte en SignalR limiet voor berichtgrootte

Een grote vooraf berekende statusgrootte kan groter zijn dan de berichtgrootte limiet van het circuit van BlazorSignalR, wat resulteert in het volgende:

  • Het SignalR-circuit initialiseert niet vanwege een fout op de client: Circuit host not initialized.
  • De gebruikersinterface voor opnieuw verbinden op de client wordt weergegeven wanneer het circuit mislukt. Herstel is niet mogelijk.

Gebruik van de volgende methoden om het probleem op te lossen:

  • Verminder de hoeveelheid gegevens die u in de vooraf weergegeven status plaatst.
  • Verhoog de limiet voor SignalR berichtgrootte. WAARSCHUWING: Als u de limiet verhoogt, kan het risico op DoS-aanvallen (Denial of Service) toenemen.

Aanvullende Blazor Server informatiebronnen

Prerendering kan seo (Search Engine Optimization) verbeteren door inhoud weer te geven voor het eerste HTTP-antwoord dat zoekmachines kunnen gebruiken om de paginarang te berekenen.

Nadat u het project hebt geconfigureerd, gebruikt u de richtlijnen in de volgende secties, afhankelijk van de vereisten van het project:

Configuratie

Een bestaande Razor Pages- of MVC-app kan Razor componenten integreren in pagina's of weergaven.

  1. In het indelingsbestand van het project:

    • Voeg de volgende <base> tag toe aan het <head> element in Pages/Shared/_Layout.cshtml (Razor Pagina's) of Views/Shared/_Layout.cshtml (MVC):

      <base href="~/" />

      Bij de href waarde (het basispad van de app) in het vorige voorbeeld wordt ervan uitgegaan dat de app zich op het hoofd-URL-pad (/) bevindt. Als de app een subtoepassing is, raadpleegt u het basispad van de ASP.NET Core-app.

    • Voeg direct vóór de <script> rendersectie een blazor.server.js tag toe voor het Scripts script.

      Pages/Shared/_Layout.cshtml (Razor Pagina's) Of Views/Shared/_Layout.cshtml (MVC):

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

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

      Het framework voegt het blazor.server.js script toe aan de app. U hoeft geen scriptbestand handmatig aan de app toe te voegen blazor.server.js .

  2. Voeg een importbestand toe aan de hoofdmap van het project met de volgende inhoud. Wijzig de {APP NAMESPACE} placeholder naar de naamruimte van het project.

    _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. Registreer Blazor Server dienst in Startup.ConfigureServices.

    In Startup.cs:

    services.AddServerSideBlazor();

  4. Voeg het Blazor Hub-eindpunt toe aan de eindpunten (app.UseEndpoints) van Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integreer onderdelen in een pagina of weergave. Voeg bijvoorbeeld een Counter component toe aan de Shared map van het project.

    Pages/Shared/Counter.razor (Razor Pagina's) Of 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 Pagina's:

    Op de Index-pagina van een Razor Pagina-app, voeg de naamruimte van het Counter onderdeel toe en sluit het onderdeel in op de pagina. Wanneer de Index pagina wordt geladen, wordt het Counter onderdeel vooraf gegenereerd op de pagina. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Pages/Index.cshtml:

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

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

    Vervang in het voorgaande voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van de app.

    MVC:

    Voeg in de projectweergave Index van een MVC-app de naamruimte van het Counter onderdeel toe en sluit het onderdeel in de weergave in. Wanneer de Index weergave wordt geladen, wordt het Counter onderdeel vooraf op de pagina weergegeven. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Views/Home/Index.cshtml:

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

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

Zie de onderdelen weergeven van een pagina of weergavesectie voor meer informatie.

Routeerbare onderdelen gebruiken in een Razor Pages-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Om routeerbare Razor componenten in Razor Pages-apps te ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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>

    Notitie

    Met de release van .NET 5.0.1 en voor eventuele extra releases van 5.x bevat het Router onderdeel de PreferExactMatches parameter die is ingesteld op @true. Zie Migreren van ASP.NET Core 3.1 naar .NET 5 voor meer informatie.

  3. Voeg een _Host pagina toe aan het project met de volgende inhoud.

    Pages/_Host.cshtml:

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

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

    Onderdelen gebruiken het gedeelde _Layout.cshtml bestand voor hun indeling.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg in de Startup.Configure eindpunten van Startup.cs een route met lage prioriteit toe voor de _Host pagina als het laatste eindpunt.

    endpoints.MapFallbackToPage("/_Host");

    In het volgende voorbeeld ziet u de toegevoegde regel in de eindpuntconfiguratie van een typische app:

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

  5. Routeerbare onderdelen toevoegen aan het project.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Routeerbare onderdelen gebruiken in een MVC-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Routeerbare Razor onderdelen in MVC-apps ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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>

    Notitie

    Met de release van .NET 5.0.1 en voor eventuele extra releases van 5.x bevat het Router onderdeel de PreferExactMatches parameter die is ingesteld op @true. Zie Migreren van ASP.NET Core 3.1 naar .NET 5 voor meer informatie.

  3. Voeg een _Host weergave toe aan het project met de volgende inhoud.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Onderdelen gebruiken het gedeelde _Layout.cshtml bestand voor hun indeling.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg een actie toe aan de Home controller.

    Controllers/HomeController.cs:

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

  5. Voeg in de Startup.Configure eindpunten van Startup.cs, een route met lage prioriteit toe voor de controlleractie die de _Host weergave retourneert:

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

    In het volgende voorbeeld ziet u de toegevoegde regel in de eindpuntconfiguratie van een typische app:

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

  6. Routeerbare onderdelen toevoegen aan het project.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Onderdelen van een pagina of weergave weergeven

Deze sectie heeft betrekking op het toevoegen van onderdelen aan pagina's of weergaven, waarbij de onderdelen niet rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Als u een onderdeel van een pagina of weergave wilt weergeven, gebruikt u de Helper voor onderdeeltags.

Render statusgevoelige interactieve componenten

Stateful interactieve componenten kunnen aan een Razor pagina of weergave worden toegevoegd.

Wanneer de pagina of weergave wordt weergegeven:

  • Het onderdeel wordt vooraf gerenderd met de pagina of weergave.
  • De initiële onderdeelstatus die wordt gebruikt voor prerendering, gaat verloren.
  • Er wordt een nieuwe onderdeelstatus gemaakt wanneer de SignalR verbinding tot stand is gebracht.

Op de volgende Razor pagina wordt een Counter onderdeel weergegeven:

<h1>My Razor Page</h1>

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

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Niet-inactieve onderdelen weergeven

Op de volgende Razor pagina wordt het Counter onderdeel statisch weergegeven met een initiële waarde die is opgegeven met behulp van een formulier. Omdat het onderdeel statisch wordt weergegeven, is het onderdeel niet interactief:

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Onderdeelnaamruimten

Wanneer u een aangepaste map gebruikt om de onderdelen van Razor het project op te slaan, voegt u de naamruimte toe die de map vertegenwoordigt aan de pagina/weergave of aan het _ViewImports.cshtml bestand. In het volgende voorbeeld:

  • Onderdelen worden opgeslagen in de Components map van het project.
  • De {APP NAMESPACE} placeholder is de naamruimte van het project. Components vertegenwoordigt de naam van de map.
@using {APP NAMESPACE}.Components

Het _ViewImports.cshtml bestand bevindt zich in de Pages map van een Razor Pagina-app of de Views map van een MVC-app.

Zie ASP.NET Core Razor-onderdelenvoor meer informatie.

Vooraf weergegeven statusgrootte en SignalR limiet voor berichtgrootte

Een grote vooraf berekende statusgrootte kan groter zijn dan de berichtgrootte limiet van het circuit van BlazorSignalR, wat resulteert in het volgende:

  • Het SignalR-circuit initialiseert niet vanwege een fout op de client: Circuit host not initialized.
  • De gebruikersinterface voor opnieuw verbinden op de client wordt weergegeven wanneer het circuit mislukt. Herstel is niet mogelijk.

Gebruik van de volgende methoden om het probleem op te lossen:

  • Verminder de hoeveelheid gegevens die u in de vooraf weergegeven status plaatst.
  • Verhoog de limiet voor SignalR berichtgrootte. WAARSCHUWING: Als u de limiet verhoogt, kan het risico op DoS-aanvallen (Denial of Service) toenemen.

Aanvullende Blazor Server informatiebronnen

Razor-componenten kunnen worden geïntegreerd in Razor Pages of MVC-apps. Wanneer de pagina of weergave wordt gerenderd, kunnen componenten tegelijkertijd worden voorgeladen.

Prerendering kan seo (Search Engine Optimization) verbeteren door inhoud weer te geven voor het eerste HTTP-antwoord dat zoekmachines kunnen gebruiken om de paginarang te berekenen.

Nadat u het project hebt geconfigureerd, gebruikt u de richtlijnen in de volgende secties, afhankelijk van de vereisten van het project:

Configuratie

Een bestaande Razor Pages- of MVC-app kan Razor componenten integreren in pagina's of weergaven.

  1. In het indelingsbestand van het project:

    • Voeg de volgende <base> tag toe aan het <head> element in Pages/Shared/_Layout.cshtml (Razor Pagina's) of Views/Shared/_Layout.cshtml (MVC):

      + <base href="~/" />

      Bij de href waarde (het basispad van de app) in het vorige voorbeeld wordt ervan uitgegaan dat de app zich op het hoofd-URL-pad (/) bevindt. Als de app een subtoepassing is, raadpleegt u het basispad van de ASP.NET Core-app.

    • Voeg direct vóór de <script> rendersectie een blazor.server.js tag toe voor het Scripts script.

      Pages/Shared/_Layout.cshtml (Razor Pagina's) Of Views/Shared/_Layout.cshtml (MVC):

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

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

      Het framework voegt het blazor.server.js script toe aan de app. U hoeft geen scriptbestand handmatig aan de app toe te voegen blazor.server.js .

  2. Voeg een importbestand toe aan de hoofdmap van het project met de volgende inhoud. Wijzig de {APP NAMESPACE} placeholder naar de naamruimte van het project.

    _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. Registreer Blazor Server dienst in Startup.ConfigureServices.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Voeg het Blazor Hub-eindpunt toe aan de eindpunten (app.UseEndpoints) van Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integreer onderdelen in een pagina of weergave. Voeg bijvoorbeeld een Counter component toe aan de Shared map van het project.

    Pages/Shared/Counter.razor (Razor Pagina's) Of 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 Pagina's:

    Op de Index-pagina van een Razor Pagina-app, voeg de naamruimte van het Counter onderdeel toe en sluit het onderdeel in op de pagina. Wanneer de Index pagina wordt geladen, wordt het Counter onderdeel vooraf gegenereerd op de pagina. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Pages/Index.cshtml:

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

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

    Vervang in het voorgaande voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van de app.

    MVC:

    Voeg in de projectweergave Index van een MVC-app de naamruimte van het Counter onderdeel toe en sluit het onderdeel in de weergave in. Wanneer de Index weergave wordt geladen, wordt het Counter onderdeel vooraf op de pagina weergegeven. Vervang in het volgende voorbeeld de {APP NAMESPACE} tijdelijke aanduiding door de naamruimte van het project.

    Views/Home/Index.cshtml:

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

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

Zie de onderdelen weergeven van een pagina of weergavesectie voor meer informatie.

Routeerbare onderdelen gebruiken in een Razor Pages-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Om routeerbare Razor componenten in Razor Pages-apps te ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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. Voeg een _Host pagina toe aan het project met de volgende inhoud.

    Pages/_Host.cshtml:

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

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

    Onderdelen gebruiken het gedeelde _Layout.cshtml bestand voor hun indeling.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg in de Startup.Configure eindpunten van Startup.cs een route met lage prioriteit toe voor de _Host pagina als het laatste eindpunt.

    endpoints.MapFallbackToPage("/_Host");

    In het volgende voorbeeld ziet u de toegevoegde regel in de eindpuntconfiguratie van een typische app:

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

  5. Routeerbare onderdelen toevoegen aan het project.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Routeerbare onderdelen gebruiken in een MVC-app

Deze sectie heeft betrekking op het toevoegen van onderdelen die rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Routeerbare Razor onderdelen in MVC-apps ondersteunen:

  1. Volg de richtlijnen in de sectie Configuratie .

  2. Voeg een App component toe aan de hoofdmap van het project met de volgende inhoud.

    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. Voeg een _Host weergave toe aan het project met de volgende inhoud.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Onderdelen gebruiken het gedeelde _Layout.cshtml bestand voor hun indeling.

    Met RenderMode configureert u of het App onderdeel:

    • Wordt voorgerenderd in de pagina.
    • Wordt weergegeven als statische HTML op de pagina of als deze de benodigde informatie bevat voor het opstarten van een Blazor app van de gebruikersagent.

    Zie Component RenderMode voor meer informatie over de Component Tag Helper, inclusief het doorgeven van parameters en configuratie.

  4. Voeg een actie toe aan de Home controller.

    Controllers/HomeController.cs:

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

  5. Voeg in de Startup.Configure eindpunten van Startup.cs, een route met lage prioriteit toe voor de controlleractie die de _Host weergave retourneert:

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

    In het volgende voorbeeld ziet u de toegevoegde regel in de eindpuntconfiguratie van een typische app:

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

  6. Routeerbare onderdelen toevoegen aan het project.

    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. Voer het project uit en navigeer naar het routeerbare RoutableCounter onderdeel op /routable-counter.

Zie de sectie Component-naamruimten voor meer informatie over naamruimten.

Onderdelen van een pagina of weergave weergeven

Deze sectie heeft betrekking op het toevoegen van onderdelen aan pagina's of weergaven, waarbij de onderdelen niet rechtstreeks routeerbaar zijn vanuit gebruikersaanvragen.

Als u een onderdeel van een pagina of weergave wilt weergeven, gebruikt u de Helper voor onderdeeltags.

Render statusgevoelige interactieve componenten

Stateful interactieve componenten kunnen aan een Razor pagina of weergave worden toegevoegd.

Wanneer de pagina of weergave wordt weergegeven:

  • Het onderdeel wordt vooraf gerenderd met de pagina of weergave.
  • De initiële onderdeelstatus die wordt gebruikt voor prerendering, gaat verloren.
  • Er wordt een nieuwe onderdeelstatus gemaakt wanneer de SignalR verbinding tot stand is gebracht.

Op de volgende Razor pagina wordt een Counter onderdeel weergegeven:

<h1>My Razor Page</h1>

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

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Niet-inactieve onderdelen weergeven

Op de volgende Razor pagina wordt het Counter onderdeel statisch weergegeven met een initiële waarde die is opgegeven met behulp van een formulier. Omdat het onderdeel statisch wordt weergegeven, is het onderdeel niet interactief:

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

Zie Component Tag Helper in ASP.NET Corevoor meer informatie.

Onderdeelnaamruimten

Wanneer u een aangepaste map gebruikt om de onderdelen van Razor het project op te slaan, voegt u de naamruimte toe die de map vertegenwoordigt aan de pagina/weergave of aan het _ViewImports.cshtml bestand. In het volgende voorbeeld:

  • Onderdelen worden opgeslagen in de Components map van het project.
  • De {APP NAMESPACE} placeholder is de naamruimte van het project. Components vertegenwoordigt de naam van de map.
@using {APP NAMESPACE}.Components

Het _ViewImports.cshtml bestand bevindt zich in de Pages map van een Razor Pagina-app of de Views map van een MVC-app.

Zie ASP.NET Core Razor-onderdelenvoor meer informatie.

Vooraf weergegeven statusgrootte en SignalR limiet voor berichtgrootte

Een grote vooraf berekende statusgrootte kan groter zijn dan de berichtgrootte limiet van het circuit van BlazorSignalR, wat resulteert in het volgende:

  • Het SignalR-circuit initialiseert niet vanwege een fout op de client: Circuit host not initialized.
  • De gebruikersinterface voor opnieuw verbinden op de client wordt weergegeven wanneer het circuit mislukt. Herstel is niet mogelijk.

Gebruik van de volgende methoden om het probleem op te lossen:

  • Verminder de hoeveelheid gegevens die u in de vooraf weergegeven status plaatst.
  • Verhoog de limiet voor SignalR berichtgrootte. WAARSCHUWING: Als u de limiet verhoogt, kan het risico op DoS-aanvallen (Denial of Service) toenemen.

Aanvullende Blazor Server informatiebronnen