Freigeben über

Integrieren von ASP.NET Core Razor-Komponenten in MVC oder Razor Pages

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Warnung

Diese Version von ASP.NET Core wird nicht mehr unterstützt. Weitere Informationen finden Sie in der .NET- und .NET Core-Supportrichtlinie. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Razor Komponenten können in Razor Seiten oder MVC-Anwendungen integriert werden. Wenn die Seite oder Ansicht gerendert wird, können Komponenten gleichzeitig vorab gerendert werden.

Wichtig

In diesem Artikel finden Sie verschiedene Anweisungen, die aufgrund von Frameworkänderungen in ASP.NET Core-Versionen entstanden sind. Bevor Sie den Leitfaden dieses Artikels verwenden, vergewissern Sie sich, dass die Dokumentversionsauswahl oben in diesem Artikel mit der Version von ASP.NET Core übereinstimmt, die Sie für Ihre App verwenden möchten.

Prerendering kann die Suchmaschinenoptimierung (Search Engine Optimization, SEO) verbessern, indem Inhalte für die erste HTTP-Antwort gerendert werden, die Suchmaschinen zum Berechnen des Seitenrangs verwenden können.

Verwenden Sie nach der Konfiguration des Projekts die Anleitungen in den folgenden Abschnitten abhängig von den Anforderungen des Projekts:

Konfiguration

Verwenden Sie die folgende Anleitung, um Razor-Komponenten in Seiten oder Ansichten einer bestehenden Razor-Seiten- oder MVC-App zu integrieren.

  1. Fügen Sie dem Ordner „root“ eine imports-Datei mit dem folgenden Inhalt hinzu. Ändern Sie den Platzhalter {APP NAMESPACE} in den Namespace des Projekts.

    _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 der Layoutdatei des Projekts (Pages/Shared/_Layout.cshtml in Razor Pages-Apps oder Views/Shared/_Layout.cshtml in MVC-Apps):

    • Fügen Sie dem Element <base> das folgende HeadOutlet-Tag und das folgende Taghilfsprogramm für <head>-Komponenten hinzu:

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

      Der href-Wert (der App-Basispfad) im obigen Beispiel setzt voraus, dass die App sich im URL-Stammpfad (/) befindet. Wenn es sich bei der App um eine Unteranwendung handelt, lesen Sie ASP.NET Core-App-BasispfadBlazor.

      Die HeadOutlet-Komponente wird verwendet, um den Kopfteilinhalt (<head>) für Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu rendern, die durch Razor-Komponenten festgelegt werden. Weitere Informationen finden Sie unter Blazor.

    • Fügen Sie ein <script>-Tag für das Skript blazor.server.js unmittelbar vor dem Renderabschnitt Scripts (@await RenderSectionAsync(...)) hinzu:

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

      Das Framework fügt das Skript blazor.server.js zur App hinzu. Die Skriptdatei blazor.server.js muss nicht manuell zur App hinzugefügt werden.

    Hinweis

    In der Regel wird das Layout über die Datei _ViewStart.cshtml geladen.

  3. Registrieren Sie die Blazor Server-Dienste in Program.cs, wo die Dienste registriert sind:

    builder.Services.AddServerSideBlazor();

  4. Fügen Sie den Blazor-Hubendpunkt den Endpunkten von Program.cs hinzu, wo Routen zugeordnet sind. Platzieren Sie die folgende Zeile nach dem Aufruf von MapRazorPages (Razor Pages) oder MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrieren Sie Komponenten in eine beliebige Seite oder Ansicht. Fügen Sie z. B. dem Ordner Counter des Projekts eine Shared-Komponente hinzu.

    Pages/Shared/Counter.razor (Razor Pages) oder 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 Seiten:

    Fügen Sie auf der Index-Seite des Projekts einer Razor Pages-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Seite ein. Wenn die Index-Seite geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Pages/Index.cshtml:

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

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

    MVC:

    Fügen Sie in der Index-Ansicht des Projekts einer MVC-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Ansicht ein. Wenn die Index-Ansicht geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Views/Home/Index.cshtml:

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

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

Weitere Informationen finden Sie im Abschnitt Rendern von Komponenten einer Seite oder Ansicht.

Verwenden routingfähiger Komponenten in einer Razor Pages-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in Razor Pages-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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. Fügen Sie dem Projekt eine _Host-Seite mit dem folgenden Inhalt hinzu. Ersetzen Sie den Platzhalter {APP NAMESPACE} durch den Namespace der App.

    Pages/_Host.cshtml:

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

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

    Hinweis

    Das vorherige Beispiel geht davon aus, dass die Komponente HeadOutlet und das Skript Blazor (_framework/blazor.server.js) vom Layout der App gerendert werden. Weitere Informationen finden Sie im Abschnitt Konfiguration.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie in den Program.cs-Endpunkten eine Route mit niedriger Priorität für die _Host-Seite als letzten Endpunkt hinzu:

    app.MapFallbackToPage("/_Host");

  5. Fügen Sie dem Projekt routingfähige Komponenten hinzu. Das folgende Beispiel ist eine RoutableCounter-Komponente, die auf der Counter-Komponente in den Blazor-Projektvorlagen basiert.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Verwenden routingfähiger Komponenten in einer MVC-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in MVC-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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. Fügen Sie dem Projekt eine _Host-Ansicht mit dem folgenden Inhalt hinzu. Ersetzen Sie den Platzhalter {APP NAMESPACE} durch den Namespace der App.

    Views/Home/_Host.cshtml:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    Hinweis

    Das vorherige Beispiel geht davon aus, dass die Komponente HeadOutlet und das Skript Blazor (_framework/blazor.server.js) vom Layout der App gerendert werden. Weitere Informationen finden Sie im Abschnitt Konfiguration.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie eine Aktion zum Home-Controller hinzu.

    Controllers/HomeController.cs:

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

  5. Fügen Sie in den Program.cs-Endpunkten eine Route mit niedriger Priorität für die Controlleraktion hinzu, die die _Host-Ansicht zurückgibt:

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

  6. Erstellen Sie einen Pages-Ordner in der MVC-App, und fügen Sie routingfähige Komponenten hinzu. Das folgende Beispiel ist eine RoutableCounter-Komponente, die auf der Counter-Komponente in den Blazor-Projektvorlagen basiert.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Rendern von Komponenten einer Seite oder Ansicht

In diesem Abschnitt wird das Hinzufügen von Komponenten zu Seiten oder Ansichten behandelt, wenn die Komponenten nicht direkt über Benutzeranforderungen routingfähig sind.

Verwenden Sie das Komponententaghilfsprogramm zum Rendern einer Komponente einer Seite oder Ansicht.

Rendern zustandsbehafteter interaktiver Komponenten

Zustandsbehaftete interaktive Komponenten können einer Razor-Seite oder -Ansicht hinzugefügt werden.

Wenn die Seite oder Ansicht gerendert wird:

  • Die Komponente wird zusammen mit der Seite oder Ansicht vorab gerendert.
  • Der anfängliche Komponentenzustand, der zum Rendern vorab genutzt wurde, geht verloren.
  • Der neue Komponentenzustand wird erstellt, wenn die SignalR-Verbindung hergestellt wird.

Die folgende Razor-Seite rendert eine Counter-Komponente:

<h1>Razor Page</h1>

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

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Rendern nicht interaktiver Komponenten

Auf der folgenden Razor-Seite wird die Counter-Komponente statisch mit einem Anfangswert gerendert, der mit einem Formular angegeben wird. Da die Komponente statisch gerendert wird, ist die Komponente nicht interaktiv:

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Komponentennamespaces

Wenn Sie einen benutzerdefinierten Ordner für die Razor-Komponenten des Projekts verwenden, fügen Sie den Namespace des Ordners zur Seite/Ansicht oder zur Datei _ViewImports.cshtml hinzu. Siehe folgendes Beispiel:

  • Komponenten werden im Ordner Components des Projekts gespeichert.
  • Der Platzhalter {APP NAMESPACE} steht für den Namespace des Projekts. Components stellt den Namen des Ordners dar.
@using {APP NAMESPACE}.Components

Die Datei _ViewImports.cshtml befindet sich im Ordner Pages einer Razor-Pages-App oder im Ordner Views einer MVC-App.

Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

Den vorab gerenderten Zustand beibehalten

Ohne Beibehaltung des vorab gerenderten Zustands geht der Zustand verloren, der während des Vorabrenderings verwendet wird, und muss neu erstellt werden, wenn die App vollständig geladen ist. Wenn ein Zustand asynchron eingerichtet wird, kann die Benutzeroberfläche flimmern, wenn die vorab gerenderte Benutzeroberfläche durch temporäre Platzhalter ersetzt und dann nochmals vollständig gerendert wird.

Um den Zustand für vorab gerenderte Komponenten beizubehalten, verwenden Sie das Hilfsprogramm „Persist Component State Tag“ (Referenzquelle). Fügen Sie das Hilfsprogramm-Tag <persist-component-state /> innerhalb des schließenden </body>-Tags der Seite _Host in einer App hinzu, die Komponenten vorab rendert.

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

In Pages/_Host.cshtml von Blazor-Apps, die ServerPrerendered in einer Blazor Server-App sind:

<body>
    ...

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

Entscheiden Sie, welcher Zustand mithilfe des Diensts PersistentComponentState beibehalten werden soll. Das [SupplyParameterFromPersistentComponentState]-Attribut, das auf eine Eigenschaft angewendet wird, registriert einen Rückruf, damit der Zustand beim Vorabrendern beibehalten wird, und lädt ihn, wenn die Komponente interaktiv gerendert oder der Dienst instanziiert wird.

Im folgenden Beispiel stellt der {TYPE} Platzhalter den Typ der zu speichernden Daten dar (z. B WeatherForecast[]. ).

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

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

Im folgenden Beispiel behält die WeatherForecastPreserveState Komponente den Zustand der Wettervorhersage beim Vorab-Rendering bei und ruft dann den Zustand ab, um die Komponente zu initialisieren. Mit dem Hilfsprogramm zum Beibehalten eines Komponentenzustandstags wird der Komponentenzustand nach allen Komponentenaufrufen dauerhaft gespeichert.

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

Entscheiden Sie, welcher Zustand mithilfe des Diensts PersistentComponentState beibehalten werden soll. Mit PersistentComponentState.RegisterOnPersisting wird zum Beibehalten des Komponentenzustands ein Rückruf registriert, bevor die App angehalten wird. Der Zustand wird abgerufen, wenn die Anwendung fortgesetzt wird. Führen Sie den Aufruf am Ende des Initialisierungscodes aus, um eine potenzielle Racebedingung beim Herunterfahren der App zu vermeiden.

Siehe folgendes Beispiel:

  • Der Platzhalter {TYPE} stellt den Typ der zu speichernden Daten dar (z. B. WeatherForecast[]).
  • Der Platzhalter {TOKEN} ist eine Zustandsbezeichnerzeichenfolge (z. B. 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();
    }
}

Im folgenden Beispiel behält die WeatherForecastPreserveState Komponente den Zustand der Wettervorhersage beim Vorab-Rendering bei und ruft dann den Zustand ab, um die Komponente zu initialisieren. Mit dem Hilfsprogramm zum Beibehalten eines Komponentenzustandstags wird der Komponentenzustand nach allen Komponentenaufrufen dauerhaft gespeichert.

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

Durch das Initialisieren von Komponenten mit demselben Zustand, der während des Prerenderings verwendet wird, werden teure Initialisierungsschritte nur einmal ausgeführt. Die gerenderte Benutzeroberfläche entspricht auch der vorab gerenderten Benutzeroberfläche, sodass im Browser kein Flimmern auftritt.

Der beibehaltene vorrenderte Zustand wird an den Client übertragen, in dem er zum Wiederherstellen des Komponentenzustands verwendet wird. ASP.NET Kerndatenschutz stellt sicher, dass die Daten in Blazor Server Apps sicher übertragen werden.

Vorab gerenderte Zustandsgröße und SignalR-Grenzwert für die Nachrichtengröße

Eine große vorrenderte Zustandsgröße Blazor kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenSignalR, was zu folgendem Ergebnis führt:

  • Der SignalR-Schaltkreis initialisiert nicht aufgrund eines Fehlers auf dem Client: Circuit host not initialized.
  • Die Benutzeroberfläche für eine erneute Verbindung auf dem Client wird angezeigt, wenn die Verbindung fehlschlägt. Eine Wiederherstellung ist nicht möglich.

Verwenden Sie einen der folgenden Ansätze, um das Problem zu beheben:

  • Verringern Sie die Menge der Daten, die Sie in den vorab gerenderten Zustand versetzen.
  • Erhöhen Sie den SignalR-Grenzwert für die Nachrichtengröße. WARNUNG: Das Erhöhen des Grenzwerts kann das Risiko von Denial-of-Service-Angriffen (DoS) erhöhen.

Zusätzliche Blazor Server-Ressourcen

Prerendering kann die Suchmaschinenoptimierung (Search Engine Optimization, SEO) verbessern, indem Inhalte für die erste HTTP-Antwort gerendert werden, die Suchmaschinen zum Berechnen des Seitenrangs verwenden können.

Verwenden Sie nach der Konfiguration des Projekts die Anleitungen in den folgenden Abschnitten abhängig von den Anforderungen des Projekts:

Konfiguration

Verwenden Sie die folgende Anleitung, um Razor-Komponenten in Seiten oder Ansichten einer bestehenden Razor-Seiten- oder MVC-App zu integrieren.

Wichtig

Die Verwendung einer Layoutseite (_Layout.cshtml) mit einem Taghilfsprogramm für Komponenten für eine HeadOutlet-Komponente ist erforderlich, um den <head>-Inhalt wie etwa den Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu steuern. Weitere Informationen finden Sie unter Blazor.

  1. In der Layoutdatei des Projekts:

    • Fügen Sie dem <base>-Element in HeadOutlet (<head> Pages) oder Pages/Shared/_Layout.cshtml (MVC) das folgende Razor-Tag und das folgende Taghilfsprogramm für Views/Shared/_Layout.cshtml-Komponenten hinzu:

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

      Der href-Wert (der App-Basispfad) im obigen Beispiel setzt voraus, dass die App sich im URL-Stammpfad (/) befindet. Wenn es sich bei der App um eine Unteranwendung handelt, lesen Sie ASP.NET Core-App-BasispfadBlazor.

      Die HeadOutlet-Komponente wird verwendet, um den Kopfteilinhalt (<head>) für Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu rendern, die durch Razor-Komponenten festgelegt werden. Weitere Informationen finden Sie unter Blazor.

    • Fügen Sie ein <script>-Tag für das blazor.server.js-Skript unmittelbar vor dem Renderabschnitt Scripts (@await RenderSectionAsync(...)) im App-Layout hinzu.

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

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

      Das Framework fügt das Skript blazor.server.js zur App hinzu. Die Skriptdatei blazor.server.js muss nicht manuell zur App hinzugefügt werden.

  2. Fügen Sie dem Ordner „root“ eine imports-Datei mit dem folgenden Inhalt hinzu. Ändern Sie den Platzhalter {APP NAMESPACE} in den Namespace des Projekts.

    _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. Registrieren Sie die Blazor Server-Dienste in Program.cs, wo die Dienste registriert sind:

    builder.Services.AddServerSideBlazor();

  4. Fügen Sie den Blazor-Hubendpunkt den Endpunkten von Program.cs hinzu, wo Routen zugeordnet sind.

    Platzieren Sie die folgende Zeile nach dem Aufruf von MapRazorPages (Razor Pages) oder MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrieren Sie Komponenten in eine beliebige Seite oder Ansicht. Fügen Sie z. B. dem Ordner Counter des Projekts eine Shared-Komponente hinzu.

    Pages/Shared/Counter.razor (Razor Pages) oder 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 Seiten:

    Fügen Sie auf der Index-Seite des Projekts einer Razor Pages-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Seite ein. Wenn die Index-Seite geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Pages/Index.cshtml:

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

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

    MVC:

    Fügen Sie in der Index-Ansicht des Projekts einer MVC-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Ansicht ein. Wenn die Index-Ansicht geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Views/Home/Index.cshtml:

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

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

Weitere Informationen finden Sie im Abschnitt Rendern von Komponenten einer Seite oder Ansicht.

Verwenden routingfähiger Komponenten in einer Razor Pages-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in Razor Pages-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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. Fügen Sie dem Projekt eine _Host-Seite mit dem folgenden Inhalt hinzu.

    Pages/_Host.cshtml:

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

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

    Komponenten verwenden in diesem Szenario die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.

    Wichtig

    Die Verwendung einer Layoutseite (_Layout.cshtml) mit einem Taghilfsprogramm für Komponenten für eine HeadOutlet-Komponente ist erforderlich, um den <head>-Inhalt wie etwa den Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu steuern. Weitere Informationen finden Sie unter Blazor.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie in den Program.cs-Endpunkten eine Route mit niedriger Priorität für die _Host-Seite als letzten Endpunkt hinzu:

    app.MapFallbackToPage("/_Host");

  5. Fügen Sie dem Projekt routingfähige Komponenten hinzu. Das folgende Beispiel ist eine RoutableCounter-Komponente, die auf der Counter-Komponente in den Blazor-Projektvorlagen basiert.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Verwenden routingfähiger Komponenten in einer MVC-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in MVC-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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. Fügen Sie dem Projekt eine _Host-Ansicht mit dem folgenden Inhalt hinzu.

    Views/Home/_Host.cshtml:

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

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

    Komponenten verwenden die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.

    Wichtig

    Die Verwendung einer Layoutseite (_Layout.cshtml) mit einem Taghilfsprogramm für Komponenten für eine HeadOutlet-Komponente ist erforderlich, um den <head>-Inhalt wie etwa den Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu steuern. Weitere Informationen finden Sie unter Blazor.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie eine Aktion zum Home-Controller hinzu.

    Controllers/HomeController.cs:

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

  5. Fügen Sie in den Program.cs-Endpunkten eine Route mit niedriger Priorität für die Controlleraktion hinzu, die die _Host-Ansicht zurückgibt:

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

  6. Erstellen Sie einen Pages-Ordner in der MVC-App, und fügen Sie routingfähige Komponenten hinzu. Das folgende Beispiel ist eine RoutableCounter-Komponente, die auf der Counter-Komponente in den Blazor-Projektvorlagen basiert.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Rendern von Komponenten einer Seite oder Ansicht

In diesem Abschnitt wird das Hinzufügen von Komponenten zu Seiten oder Ansichten behandelt, wenn die Komponenten nicht direkt über Benutzeranforderungen routingfähig sind.

Verwenden Sie das Komponententaghilfsprogramm zum Rendern einer Komponente einer Seite oder Ansicht.

Rendern zustandsbehafteter interaktiver Komponenten

Zustandsbehaftete interaktive Komponenten können einer Razor-Seite oder -Ansicht hinzugefügt werden.

Wenn die Seite oder Ansicht gerendert wird:

  • Die Komponente wird zusammen mit der Seite oder Ansicht vorab gerendert.
  • Der anfängliche Komponentenzustand, der zum Rendern vorab genutzt wurde, geht verloren.
  • Der neue Komponentenzustand wird erstellt, wenn die SignalR-Verbindung hergestellt wird.

Die folgende Razor-Seite rendert eine Counter-Komponente:

<h1>Razor Page</h1>

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

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Wichtig

Die Verwendung einer Layoutseite (_Layout.cshtml) mit einem Taghilfsprogramm für Komponenten für eine HeadOutlet-Komponente ist erforderlich, um den <head>-Inhalt wie etwa den Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu steuern. Weitere Informationen finden Sie unter Blazor.

Rendern nicht interaktiver Komponenten

Auf der folgenden Razor-Seite wird die Counter-Komponente statisch mit einem Anfangswert gerendert, der mit einem Formular angegeben wird. Da die Komponente statisch gerendert wird, ist die Komponente nicht interaktiv:

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Wichtig

Die Verwendung einer Layoutseite (_Layout.cshtml) mit einem Taghilfsprogramm für Komponenten für eine HeadOutlet-Komponente ist erforderlich, um den <head>-Inhalt wie etwa den Seitentitel (PageTitle-Komponente) und andere Kopfteilelemente (HeadContent-Komponente) zu steuern. Weitere Informationen finden Sie unter Blazor.

Komponentennamespaces

Wenn Sie einen benutzerdefinierten Ordner für die Razor-Komponenten des Projekts verwenden, fügen Sie den Namespace des Ordners zur Seite/Ansicht oder zur Datei _ViewImports.cshtml hinzu. Siehe folgendes Beispiel:

  • Komponenten werden im Ordner Components des Projekts gespeichert.
  • Der Platzhalter {APP NAMESPACE} steht für den Namespace des Projekts. Components stellt den Namen des Ordners dar.
@using {APP NAMESPACE}.Components

Die Datei _ViewImports.cshtml befindet sich im Ordner Pages einer Razor-Pages-App oder im Ordner Views einer MVC-App.

Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

Den vorab gerenderten Zustand beibehalten

Ohne Beibehaltung des vorab gerenderten Zustands geht der Zustand verloren, der während des Vorabrenderings verwendet wird, und muss neu erstellt werden, wenn die App vollständig geladen ist. Wenn ein Zustand asynchron eingerichtet wird, kann die Benutzeroberfläche flimmern, wenn die vorab gerenderte Benutzeroberfläche durch temporäre Platzhalter ersetzt und dann nochmals vollständig gerendert wird.

Blazor unterstützt die Beibehaltung von Zuständen auf einer vorab gerenderten Seite mithilfe des Hilfsprogramm zum Beibehalten eines Komponentenzustandstags, um diese Probleme zu lösen. Fügen Sie das <persist-component-state />-Tag des Hilfsprogramms für Tags innerhalb des schließenden </body>-Tags hinzu.

Pages/_Layout.cshtml:

<body>
    ...

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

Entscheiden Sie, welcher Zustand mithilfe des Diensts PersistentComponentState beibehalten werden soll. Mit PersistentComponentState.RegisterOnPersisting wird zum Beibehalten des Komponentenzustands ein Rückruf registriert, bevor die App angehalten wird. Der Zustand wird abgerufen, wenn die Anwendung fortgesetzt wird. Führen Sie den Aufruf am Ende des Initialisierungscodes aus, um eine potenzielle Racebedingung beim Herunterfahren der App zu vermeiden.

Im folgenden Beispiel behält die WeatherForecastPreserveState Komponente den Zustand der Wettervorhersage beim Vorab-Rendering bei und ruft dann den Zustand ab, um die Komponente zu initialisieren. Mit dem Hilfsprogramm zum Beibehalten eines Komponentenzustandstags wird der Komponentenzustand nach allen Komponentenaufrufen dauerhaft gespeichert.

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

Durch das Initialisieren von Komponenten mit demselben Zustand, der während des Prerenderings verwendet wird, werden teure Initialisierungsschritte nur einmal ausgeführt. Die gerenderte Benutzeroberfläche entspricht auch der vorab gerenderten Benutzeroberfläche, sodass im Browser kein Flimmern auftritt.

Der beibehaltene vorrenderte Zustand wird an den Client übertragen, in dem er zum Wiederherstellen des Komponentenzustands verwendet wird. ASP.NET Kerndatenschutz stellt sicher, dass die Daten in Blazor Server Apps sicher übertragen werden.

Vorab gerenderte Zustandsgröße und SignalR-Grenzwert für die Nachrichtengröße

Eine große vorrenderte Zustandsgröße Blazor kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenSignalR, was zu folgendem Ergebnis führt:

  • Der SignalR-Schaltkreis initialisiert nicht aufgrund eines Fehlers auf dem Client: Circuit host not initialized.
  • Die Benutzeroberfläche für eine erneute Verbindung auf dem Client wird angezeigt, wenn die Verbindung fehlschlägt. Eine Wiederherstellung ist nicht möglich.

Verwenden Sie einen der folgenden Ansätze, um das Problem zu beheben:

  • Verringern Sie die Menge der Daten, die Sie in den vorab gerenderten Zustand versetzen.
  • Erhöhen Sie den SignalR-Grenzwert für die Nachrichtengröße. WARNUNG: Das Erhöhen des Grenzwerts kann das Risiko von Denial-of-Service-Angriffen (DoS) erhöhen.

Zusätzliche Blazor Server-Ressourcen

Prerendering kann die Suchmaschinenoptimierung (Search Engine Optimization, SEO) verbessern, indem Inhalte für die erste HTTP-Antwort gerendert werden, die Suchmaschinen zum Berechnen des Seitenrangs verwenden können.

Verwenden Sie nach der Konfiguration des Projekts die Anleitungen in den folgenden Abschnitten abhängig von den Anforderungen des Projekts:

Konfiguration

Eine vorhandene Razor Pages- oder MVC-App kann Razor-Komponenten in Seiten oder Ansichten integrieren:

  1. In der Layoutdatei des Projekts:

    • Fügen Sie dem <base>-Element in <head> (Pages/Shared/_Layout.cshtml Pages) oder Razor (MVC) das folgende Views/Shared/_Layout.cshtml-Tag hinzu:

      <base href="~/" />

      Der href-Wert (der App-Basispfad) im obigen Beispiel setzt voraus, dass die App sich im URL-Stammpfad (/) befindet. Wenn es sich bei der App um eine Unteranwendung handelt, lesen Sie ASP.NET Core-App-BasispfadBlazor.

    • Fügen Sie ein <script>-Tag für das blazor.server.js-Skript unmittelbar vor dem Renderabschnitt Scripts hinzu.

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

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

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

      Das Framework fügt das Skript blazor.server.js zur App hinzu. Die Skriptdatei blazor.server.js muss nicht manuell zur App hinzugefügt werden.

  2. Fügen Sie dem Ordner „root“ eine imports-Datei mit dem folgenden Inhalt hinzu. Ändern Sie den Platzhalter {APP NAMESPACE} in den Namespace des Projekts.

    _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. Registrieren Sie den Blazor Server-Dienst in Startup.ConfigureServices.

    In Startup.cs:

    services.AddServerSideBlazor();

  4. Fügen Sie den Blazor-Hubendpunkt den Endpunkten (app.UseEndpoints) von Startup.Configure hinzu.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrieren Sie Komponenten in eine beliebige Seite oder Ansicht. Fügen Sie z. B. dem Ordner Counter des Projekts eine Shared-Komponente hinzu.

    Pages/Shared/Counter.razor (Razor Pages) oder 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 Seiten:

    Fügen Sie auf der Index-Seite des Projekts einer Razor Pages-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Seite ein. Wenn die Index-Seite geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Pages/Index.cshtml:

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

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

    Ersetzen Sie im Beispiel oben den Platzhalter {APP NAMESPACE} durch den Namespace der App.

    MVC:

    Fügen Sie in der Index-Ansicht des Projekts einer MVC-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Ansicht ein. Wenn die Index-Ansicht geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Views/Home/Index.cshtml:

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

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

Weitere Informationen finden Sie im Abschnitt Rendern von Komponenten einer Seite oder Ansicht.

Verwenden routingfähiger Komponenten in einer Razor Pages-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in Razor Pages-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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>

    Hinweis

    Mit der Veröffentlichung von .NET 5.0.1 und für alle zusätzlichen 5.x-Versionen enthält die Router Komponente den Parameter PreferExactMatches, festgelegt auf @true. Weitere Informationen finden Sie unter Migrieren von ASP.NET Core 3.1 zu .NET 5.

  3. Fügen Sie dem Projekt eine _Host-Seite mit dem folgenden Inhalt hinzu.

    Pages/_Host.cshtml:

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

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

    Komponenten verwenden die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie in den Startup.Configure-Endpunkten von Startup.cs eine Route mit niedriger Priorität für die _Host-Seite als letzten Endpunkt hinzu:

    endpoints.MapFallbackToPage("/_Host");

    Das folgende Beispiel zeigt die hinzugefügte Zeile in der typischen App-Endpunktkonfiguration.

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

  5. Fügen Sie dem Projekt routingfähige Komponenten hinzu.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Verwenden routingfähiger Komponenten in einer MVC-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in MVC-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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>

    Hinweis

    Mit der Veröffentlichung von .NET 5.0.1 und für alle zusätzlichen 5.x-Versionen enthält die Router Komponente den Parameter PreferExactMatches, festgelegt auf @true. Weitere Informationen finden Sie unter Migrieren von ASP.NET Core 3.1 zu .NET 5.

  3. Fügen Sie dem Projekt eine _Host-Ansicht mit dem folgenden Inhalt hinzu.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Komponenten verwenden die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie eine Aktion zum Home-Controller hinzu.

    Controllers/HomeController.cs:

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

  5. Fügen Sie in den Startup.Configure-Endpunkten von Startup.cs eine Route mit niedriger Priorität für die Controlleraktion hinzu, die die _Host-Ansicht zurückgibt:

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

    Das folgende Beispiel zeigt die hinzugefügte Zeile in der typischen App-Endpunktkonfiguration.

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

  6. Fügen Sie dem Projekt routingfähige Komponenten hinzu.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Rendern von Komponenten einer Seite oder Ansicht

In diesem Abschnitt wird das Hinzufügen von Komponenten zu Seiten oder Ansichten behandelt, wenn die Komponenten nicht direkt über Benutzeranforderungen routingfähig sind.

Verwenden Sie das Komponententaghilfsprogramm zum Rendern einer Komponente einer Seite oder Ansicht.

Rendern zustandsbehafteter interaktiver Komponenten

Zustandsbehaftete interaktive Komponenten können einer Razor-Seite oder -Ansicht hinzugefügt werden.

Wenn die Seite oder Ansicht gerendert wird:

  • Die Komponente wird zusammen mit der Seite oder Ansicht vorab gerendert.
  • Der anfängliche Komponentenzustand, der zum Rendern vorab genutzt wurde, geht verloren.
  • Der neue Komponentenzustand wird erstellt, wenn die SignalR-Verbindung hergestellt wird.

Die folgende Razor-Seite rendert eine Counter-Komponente:

<h1>My Razor Page</h1>

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

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Rendern nicht interaktiver Komponenten

Auf der folgenden Razor-Seite wird die Counter-Komponente statisch mit einem Anfangswert gerendert, der mit einem Formular angegeben wird. Da die Komponente statisch gerendert wird, ist die Komponente nicht interaktiv:

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Komponentennamespaces

Wenn Sie einen benutzerdefinierten Ordner für die Razor-Komponenten des Projekts verwenden, fügen Sie den Namespace des Ordners zur Seite/Ansicht oder zur Datei _ViewImports.cshtml hinzu. Siehe folgendes Beispiel:

  • Komponenten werden im Ordner Components des Projekts gespeichert.
  • Der Platzhalter {APP NAMESPACE} steht für den Namespace des Projekts. Components stellt den Namen des Ordners dar.
@using {APP NAMESPACE}.Components

Die Datei _ViewImports.cshtml befindet sich im Ordner Pages einer Razor-Pages-App oder im Ordner Views einer MVC-App.

Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

Vorab gerenderte Zustandsgröße und SignalR-Grenzwert für die Nachrichtengröße

Eine große vorrenderte Zustandsgröße Blazor kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenSignalR, was zu folgendem Ergebnis führt:

  • Der SignalR-Schaltkreis initialisiert nicht aufgrund eines Fehlers auf dem Client: Circuit host not initialized.
  • Die Benutzeroberfläche für eine erneute Verbindung auf dem Client wird angezeigt, wenn die Verbindung fehlschlägt. Eine Wiederherstellung ist nicht möglich.

Verwenden Sie einen der folgenden Ansätze, um das Problem zu beheben:

  • Verringern Sie die Menge der Daten, die Sie in den vorab gerenderten Zustand versetzen.
  • Erhöhen Sie den SignalR-Grenzwert für die Nachrichtengröße. WARNUNG: Das Erhöhen des Grenzwerts kann das Risiko von Denial-of-Service-Angriffen (DoS) erhöhen.

Zusätzliche Blazor Server-Ressourcen

Razor Komponenten können in Razor Seiten oder MVC-Anwendungen integriert werden. Wenn die Seite oder Ansicht gerendert wird, können Komponenten gleichzeitig vorab gerendert werden.

Prerendering kann die Suchmaschinenoptimierung (Search Engine Optimization, SEO) verbessern, indem Inhalte für die erste HTTP-Antwort gerendert werden, die Suchmaschinen zum Berechnen des Seitenrangs verwenden können.

Verwenden Sie nach der Konfiguration des Projekts die Anleitungen in den folgenden Abschnitten abhängig von den Anforderungen des Projekts:

Konfiguration

Eine vorhandene Razor Pages- oder MVC-App kann Razor-Komponenten in Seiten oder Ansichten integrieren:

  1. In der Layoutdatei des Projekts:

    • Fügen Sie dem <base>-Element in <head> (Pages/Shared/_Layout.cshtml Pages) oder Razor (MVC) das folgende Views/Shared/_Layout.cshtml-Tag hinzu:

      + <base href="~/" />

      Der href-Wert (der App-Basispfad) im obigen Beispiel setzt voraus, dass die App sich im URL-Stammpfad (/) befindet. Wenn es sich bei der App um eine Unteranwendung handelt, lesen Sie ASP.NET Core-App-BasispfadBlazor.

    • Fügen Sie ein <script>-Tag für das blazor.server.js-Skript unmittelbar vor dem Renderabschnitt Scripts hinzu.

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

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

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

      Das Framework fügt das Skript blazor.server.js zur App hinzu. Die Skriptdatei blazor.server.js muss nicht manuell zur App hinzugefügt werden.

  2. Fügen Sie dem Ordner „root“ eine imports-Datei mit dem folgenden Inhalt hinzu. Ändern Sie den Platzhalter {APP NAMESPACE} in den Namespace des Projekts.

    _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. Registrieren Sie den Blazor Server-Dienst in Startup.ConfigureServices.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Fügen Sie den Blazor-Hubendpunkt den Endpunkten (app.UseEndpoints) von Startup.Configure hinzu.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrieren Sie Komponenten in eine beliebige Seite oder Ansicht. Fügen Sie z. B. dem Ordner Counter des Projekts eine Shared-Komponente hinzu.

    Pages/Shared/Counter.razor (Razor Pages) oder 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 Seiten:

    Fügen Sie auf der Index-Seite des Projekts einer Razor Pages-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Seite ein. Wenn die Index-Seite geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Pages/Index.cshtml:

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

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

    Ersetzen Sie im Beispiel oben den Platzhalter {APP NAMESPACE} durch den Namespace der App.

    MVC:

    Fügen Sie in der Index-Ansicht des Projekts einer MVC-App den Namespace der Counter-Komponente hinzu, und betten Sie die Komponente in die Ansicht ein. Wenn die Index-Ansicht geladen wird, wird die Counter-Komponente auf der Seite vorab gerendert. Ersetzen Sie im folgenden Beispiel den Platzhalter {APP NAMESPACE} durch den Namespace des Projekts.

    Views/Home/Index.cshtml:

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

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

Weitere Informationen finden Sie im Abschnitt Rendern von Komponenten einer Seite oder Ansicht.

Verwenden routingfähiger Komponenten in einer Razor Pages-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in Razor Pages-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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. Fügen Sie dem Projekt eine _Host-Seite mit dem folgenden Inhalt hinzu.

    Pages/_Host.cshtml:

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

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

    Komponenten verwenden die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie in den Startup.Configure-Endpunkten von Startup.cs eine Route mit niedriger Priorität für die _Host-Seite als letzten Endpunkt hinzu:

    endpoints.MapFallbackToPage("/_Host");

    Das folgende Beispiel zeigt die hinzugefügte Zeile in der typischen App-Endpunktkonfiguration.

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

  5. Fügen Sie dem Projekt routingfähige Komponenten hinzu.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Verwenden routingfähiger Komponenten in einer MVC-App

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in MVC-Apps ein:

  1. Befolgen Sie die Anweisungen im Abschnitt Configuration.

  2. Fügen Sie eine App-Komponente mit dem folgenden Inhalt zum Projektstamm hinzu.

    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. Fügen Sie dem Projekt eine _Host-Ansicht mit dem folgenden Inhalt hinzu.

    Views/Home/_Host.cshtml:

    @{
    Layout = "_Layout";
}

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

    Komponenten verwenden die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.

    RenderMode konfiguriert, ob die App-Komponente:

    • Ob die Komponente zuvor für die Seite gerendert wird
    • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.

    Weitere Informationen zum Hilfsprogramm für Komponententags, einschließlich Übergabe von Parametern und Konfiguration von RenderMode, finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

  4. Fügen Sie eine Aktion zum Home-Controller hinzu.

    Controllers/HomeController.cs:

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

  5. Fügen Sie in den Startup.Configure-Endpunkten von Startup.cs eine Route mit niedriger Priorität für die Controlleraktion hinzu, die die _Host-Ansicht zurückgibt:

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

    Das folgende Beispiel zeigt die hinzugefügte Zeile in der typischen App-Endpunktkonfiguration.

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

  6. Fügen Sie dem Projekt routingfähige Komponenten hinzu.

    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. Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen RoutableCounter-Komponente unter /routable-counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Rendern von Komponenten einer Seite oder Ansicht

In diesem Abschnitt wird das Hinzufügen von Komponenten zu Seiten oder Ansichten behandelt, wenn die Komponenten nicht direkt über Benutzeranforderungen routingfähig sind.

Verwenden Sie das Komponententaghilfsprogramm zum Rendern einer Komponente einer Seite oder Ansicht.

Rendern zustandsbehafteter interaktiver Komponenten

Zustandsbehaftete interaktive Komponenten können einer Razor-Seite oder -Ansicht hinzugefügt werden.

Wenn die Seite oder Ansicht gerendert wird:

  • Die Komponente wird zusammen mit der Seite oder Ansicht vorab gerendert.
  • Der anfängliche Komponentenzustand, der zum Rendern vorab genutzt wurde, geht verloren.
  • Der neue Komponentenzustand wird erstellt, wenn die SignalR-Verbindung hergestellt wird.

Die folgende Razor-Seite rendert eine Counter-Komponente:

<h1>My Razor Page</h1>

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

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Rendern nicht interaktiver Komponenten

Auf der folgenden Razor-Seite wird die Counter-Komponente statisch mit einem Anfangswert gerendert, der mit einem Formular angegeben wird. Da die Komponente statisch gerendert wird, ist die Komponente nicht interaktiv:

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

Weitere Informationen finden Sie unter Taghilfsprogramm für Komponenten in ASP.NET Core.

Komponentennamespaces

Wenn Sie einen benutzerdefinierten Ordner für die Razor-Komponenten des Projekts verwenden, fügen Sie den Namespace des Ordners zur Seite/Ansicht oder zur Datei _ViewImports.cshtml hinzu. Siehe folgendes Beispiel:

  • Komponenten werden im Ordner Components des Projekts gespeichert.
  • Der Platzhalter {APP NAMESPACE} steht für den Namespace des Projekts. Components stellt den Namen des Ordners dar.
@using {APP NAMESPACE}.Components

Die Datei _ViewImports.cshtml befindet sich im Ordner Pages einer Razor-Pages-App oder im Ordner Views einer MVC-App.

Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

Vorab gerenderte Zustandsgröße und SignalR-Grenzwert für die Nachrichtengröße

Eine große vorrenderte Zustandsgröße Blazor kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenSignalR, was zu folgendem Ergebnis führt:

  • Der SignalR-Schaltkreis initialisiert nicht aufgrund eines Fehlers auf dem Client: Circuit host not initialized.
  • Die Benutzeroberfläche für eine erneute Verbindung auf dem Client wird angezeigt, wenn die Verbindung fehlschlägt. Eine Wiederherstellung ist nicht möglich.

Verwenden Sie einen der folgenden Ansätze, um das Problem zu beheben:

  • Verringern Sie die Menge der Daten, die Sie in den vorab gerenderten Zustand versetzen.
  • Erhöhen Sie den SignalR-Grenzwert für die Nachrichtengröße. WARNUNG: Das Erhöhen des Grenzwerts kann das Risiko von Denial-of-Service-Angriffen (DoS) erhöhen.

Zusätzliche Blazor Server-Ressourcen