Freigeben über

Integrieren ASP.NET Kernkomponenten Razor in MVC oder Razor Pages

  • Artikel

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-Apps 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 folgenden Anleitungen, um Komponenten in Seiten oder Ansichten einer vorhandenen Razor Seiten- oder MVC-App zu integrierenRazor.

  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 <head> das folgende <base>-Tag und das folgende Taghilfsprogramm für HeadOutlet-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 untergeordnete Anwendung handelt, befolgen Sie die Anweisungen im Abschnitt App-Basispfad des Artikels Hosten und Bereitstellen von Blazor in ASP.NET Core.

      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 Steuern des Inhalts von „head“ in Blazor-Apps in ASP.NET Core.

    • 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 Shared des Projekts eine Counter-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 Pages:

    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 folgende Einstellungen für 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 folgende Einstellungen für 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 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.

Beibehalten des vorab gerenderten Zustands

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 AppsBlazor, die sich in einer Blazor Server App befindenServerPrerendered:

<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.

Im folgenden 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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

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

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

        return Task.CompletedTask;
    }

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

Das folgende Beispiel ist eine aktualisierte Version der FetchData Komponente basierend auf der Blazor Projektvorlage. Durch die Komponente WeatherForecastPreserveState wird Zustand der Wettervorhersage beim Vorabrendering beibehalten und anschließend zum Initialisieren der Komponente abgerufen. 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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", 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 SignalR kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenBlazor, was zu folgendem Ergebnis führt:

  • Die SignalR-Verbindung wird mit einem Fehler auf dem Client nicht initialisiert: 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 folgenden Anleitungen, um Komponenten in Seiten oder Ansichten einer vorhandenen Razor Seiten- oder MVC-App zu integrierenRazor.

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 Steuern des Inhalts von „head“ in Blazor-Apps in ASP.NET Core.

  1. In der Layoutdatei des Projekts:

    • Fügen Sie dem <head>-Element in Pages/Shared/_Layout.cshtml (Razor Pages) oder Views/Shared/_Layout.cshtml (MVC) das folgende <base>-Tag und das folgende Taghilfsprogramm für HeadOutlet-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 untergeordnete Anwendung handelt, befolgen Sie die Anweisungen im Abschnitt App-Basispfad des Artikels Hosten und Bereitstellen von Blazor in ASP.NET Core.

      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 Steuern des Inhalts von „head“ in Blazor-Apps in ASP.NET Core.

    • 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 Shared des Projekts eine Counter-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 Pages:

    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 Steuern des Inhalts von „head“ in Blazor-Apps in ASP.NET Core.

    RenderMode konfiguriert folgende Einstellungen für 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 Steuern des Inhalts von „head“ in Blazor-Apps in ASP.NET Core.

    RenderMode konfiguriert folgende Einstellungen für 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 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 Steuern des Inhalts von „head“ in Blazor-Apps 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.

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 Steuern des Inhalts von „head“ in Blazor-Apps 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.

Beibehalten des vorab gerenderten Zustands

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.

Das folgende Beispiel ist eine aktualisierte Version der FetchData Komponente basierend auf der Blazor Projektvorlage. Durch die Komponente WeatherForecastPreserveState wird Zustand der Wettervorhersage beim Vorabrendering beibehalten und anschließend zum Initialisieren der Komponente abgerufen. 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()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", 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 SignalR kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenBlazor, was zu folgendem Ergebnis führt:

  • Die SignalR-Verbindung wird mit einem Fehler auf dem Client nicht initialisiert: 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 Seiten- oder MVC-App kann Komponenten in Seiten oder Ansichten integrieren Razor :

  1. In der Layoutdatei des Projekts:

    • Fügen Sie dem <head>-Element in Pages/Shared/_Layout.cshtml (Razor Pages) oder Views/Shared/_Layout.cshtml (MVC) das folgende <base>-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 untergeordnete Anwendung handelt, befolgen Sie die Anweisungen im Abschnitt App-Basispfad des Artikels Hosten und Bereitstellen von Blazor in ASP.NET Core.

    • 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 Shared des Projekts eine Counter-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 Pages:

    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

    Seit der Veröffentlichung von ASP.NET Core 5.0.1 und allen weiteren 5.x-Releases enthält die Router-Komponente den PreferExactMatches-Parameter, der auf @true festgelegt ist. Weitere Informationen finden Sie unter Migrieren von ASP.NET Core 3.1 zu 5.0.

  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 folgende Einstellungen für 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 zweigt die hinzugefügte Zeile in der typischen Endpunktkonfiguration einer App:

    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

    Seit der Veröffentlichung von ASP.NET Core 5.0.1 und allen weiteren 5.x-Releases enthält die Router-Komponente den PreferExactMatches-Parameter, der auf @true festgelegt ist. Weitere Informationen finden Sie unter Migrieren von ASP.NET Core 3.1 zu 5.0.

  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 folgende Einstellungen für 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 zweigt die hinzugefügte Zeile in der typischen Endpunktkonfiguration einer App:

    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 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 SignalR kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenBlazor, was zu folgendem Ergebnis führt:

  • Die SignalR-Verbindung wird mit einem Fehler auf dem Client nicht initialisiert: 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-Apps 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 Seiten- oder MVC-App kann Komponenten in Seiten oder Ansichten integrieren Razor :

  1. In der Layoutdatei des Projekts:

    • Fügen Sie dem <head>-Element in Pages/Shared/_Layout.cshtml (Razor Pages) oder Views/Shared/_Layout.cshtml (MVC) das folgende <base>-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 untergeordnete Anwendung handelt, befolgen Sie die Anweisungen im Abschnitt App-Basispfad des Artikels Hosten und Bereitstellen von Blazor in ASP.NET Core.

    • 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 Shared des Projekts eine Counter-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 Pages:

    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 folgende Einstellungen für 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 zweigt die hinzugefügte Zeile in der typischen Endpunktkonfiguration einer App:

    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 folgende Einstellungen für 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 zweigt die hinzugefügte Zeile in der typischen Endpunktkonfiguration einer App:

    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 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 SignalR kann den Grenzwert für die Schaltkreisnachrichtengröße überschreitenBlazor, was zu folgendem Ergebnis führt:

  • Die SignalR-Verbindung wird mit einem Fehler auf dem Client nicht initialisiert: 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