Integrieren von ASP.NET Core Razor-Komponenten in ASP.NET Core-Apps

  • Artikel

In diesem Artikel werden Szenarios für die Integration von Razor-Komponenten für ASP.NET Core-Apps erläutert.

Razor-Komponentenintegration

Razor-Komponenten können in Razor Pages, MVC und andere Arten von ASP.NET Core-Apps integriert werden. Razor-Komponenten können auch in jede Web-App integriert werden, einschließlich Apps, die nicht auf ASP.NET Core basieren, wie benutzerdefinierte HTML-Elemente.

Verwenden Sie den Leitfaden in den folgenden Abschnitten abhängig von den Anforderungen des Projekts:

Hinzufügen von Blazor-Unterstützung zu einer ASP.NET Core-App

Dieser Abschnitt behandelt das Hinzufügen von Blazor-Unterstützung zu einer ASP.NET Core-App:

Hinweis

Für die Beispiele in diesem Abschnitt ist BlazorSample der Name und Namespace der Beispiel-App.

Hinzufügen von statischem serverseitigen Rendering (statischer SSR)

Fügen Sie der App einen Components-Ordner hinzu.

Fügen Sie die folgende _Imports-Datei für Namespaces hinzu, die von Razor-Komponenten verwendet werden.

Components/_Imports.razor:

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

Ändern Sie den Namespaceplatzhalter ({APP NAMESPACE}) in den Namespace der App. Beispiel:

@using BlazorSample
@using BlazorSample.Components

Fügen Sie der App den Blazor-Router (<Router>, Router) in einer Routes-Komponente hinzu, die im Components-Ordner der App platziert wird.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Sie können ein Standardlayout mit dem RouteView.DefaultLayout-Parameter der RouteView-Komponente angeben:

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

Weitere Informationen finden Sie unter ASP.NET Core Blazor-Layouts.

Fügen Sie der Anwendung eine App-Komponente hinzu, die als Stammkomponente dient, bei der es sich um die erste Komponente handelt, die von der Anwendung geladen wird.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Ändern Sie für das <link>-Element im vorherigen Beispiel BlazorSample, den Dateinamen des Stylesheets, sodass es dem Projektnamen der App entspricht. Ein Projekt mit dem Namen ContosoApp verwendet z. B. den Namen der ContosoApp.styles.css-Stylesheetdatei:

<link rel="stylesheet" href="ContosoApp.styles.css" />

Fügen Sie dem Components-Ordner einen Pages-Ordner hinzu, der routingfähige Razor-Komponenten enthält.

Fügen Sie die folgende Welcome-Komponente hinzu, um SSR zu veranschaulichen.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

In der Program-Datei ASP.NET Core-Projekts:

  • Fügen Sie oben in der Datei eine using-Anweisung für die Komponenten des Projekts hinzu:

    using {APP NAMESPACE}.Components;

    Ändern Sie in der vorherigen Zeile den Platzhalter {APP NAMESPACE} in den Namespace der App. Zum Beispiel:

    using BlazorSample.Components;

  • Fügen Sie Razor-Komponentendienste (AddRazorComponents) hinzu. Dadurch werden automatisch Fälschungsschutzdienste (AddAntiforgery) hinzugefügt. Fügen Sie die folgende Zeile vor der Zeile hinzu, die aufgerufen wird builder.Build()):

    builder.Services.AddRazorComponents();

  • Fügen Sie mit UseAntiforgeryFälschungsschutz-Middleware zur Anforderungsverarbeitungspipeline hinzu. UseAntiforgery wird nach dem Aufruf von UseRouting aufgerufen. Wenn Anrufe von UseRouting und UseEndpoints vorhanden, muss der Aufruf von UseAntiforgery zwischen diesen liegen. Der Aufruf von UseAntiforgery muss nach den Aufrufen von UseAuthentication und UseAuthorization erfolgen.

    app.UseAntiforgery();

  • Fügen Sie der Anforderungsverarbeitungspipeline der Anwendung MapRazorComponents hinzu, wobei die App-Komponente (App.razor) als Standardstammkomponente (die erste geladene Komponente) angegeben ist. Platzieren Sie den folgenden Code vor der Zeile, die app.Run aufruft:

    app.MapRazorComponents<App>();

Wenn die App ausgeführt wird, wird auf die Welcome-Komponente am /welcome-Endpunkt zugegriffen.

Aktivieren des interaktiven serverseitigen Renderings (interaktiver SSR)

Befolgen Sie die Anweisungen im Abschnitt Hinzufügen des statischen serverseitigen Renderings (statischer SSR).

Fügen Sie in der Program-Datei der App einen Aufruf an AddInteractiveServerComponents hinzu, dem Razor-Komponentendienste mit AddRazorComponents hinzugefügt werden:

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

Fügen Sie einen Aufruf an AddInteractiveServerRenderMode hinzu, wo die Razor-Komponenten MapRazorComponents zugeordnet werden:

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

Fügen Sie der App die folgende Counter-Komponente hinzu, die interaktives serverseitiges Rendering (interaktives SSR) verwendet.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Wenn die App ausgeführt wird, wird auf die Counter-Komponente bei /counter zugegriffen.

Aktivieren des interaktiven automatischen (auto) oder clientseitigen Renderings (CSR)

Befolgen Sie die Anweisungen im Abschnitt Hinzufügen des statischen serverseitigen Renderings (statischer SSR).

Komponenten, die den Modus Interaktives automatisches Rendern verwenden, verwenden zunächst interaktive SSR. Die .NET-Runtime und das App Bundle werden im Hintergrund auf den Client heruntergeladen und zwischengespeichert, sodass sie zukünftig verwendet werden können. Komponenten, die den interaktiven WebAssembly-Rendermodus verwenden, werden nur interaktiv auf dem Client gerendert, nachdem das Blazor-Bundle heruntergeladen wurde und die Blazor-Laufzeit aktiviert wird. Denken Sie daran, dass Komponentencode, der beim Verwenden des interaktiven Auto- oder interaktiven WebAssembly-Rendermodus auf den Client heruntergeladen wird, nicht privat ist. Weitere Informationen finden Sie unter ASP.NET Core Blazor-Rendermodi.

Nach der Entscheidung, welcher Rendermodus verwendet werden soll:

Fügen Sie der App einen Paketverweis für das Microsoft.AspNetCore.Components.WebAssembly.Server-NuGet-Paket hinzu.

Hinweis

Einen Leitfaden zum Hinzufügen von Paketen zu .NET-Apps finden Sie in Installieren und Verwalten von Paketen unter Workflow der Nutzung von Paketen (NuGet-Dokumentation). Überprüfen Sie unter NuGet.org, ob die richtige Paketversion verwendet wird.

Erstellen Sie eine Spender-Blazor-Web-App, um Ressourcen für die App bereitzustellen. Befolgen Sie die Anweisungen im Tooling für ASP.NET Core-Artikel Blazor und wählen Sie die Unterstützung für die folgenden Vorlagenfeatures beim Generieren der Blazor-Web App aus.

Verwenden Sie für den Namen der App denselben Namen wie die ASP.NET Core-App, was zu übereinstimmenden App-Namensmarkups in Komponenten und übereinstimmenden Namespaces im Code führt. Die Verwendung desselben Namens/Namespaces ist nicht unbedingt erforderlich, da Namespaces angepasst werden können, nachdem Ressourcen von der Spender-App in die ASP.NET Core-App verschoben wurden. Man spart jedoch Zeit, wenn die Namespaces von Beginn an übereinstimmen.

Visual Studio:

  • Wählen Sie für den interaktiven Rendermodus die Option Auto (Server und WebAssembly).
  • Legen Sie den Interaktivitätsspeicherort auf Pro Seite/Komponente fest.
  • Deaktivieren Sie das Kontrollkästchen für Beispielseiten einschließen.

.NET CLI:

  • Verwenden Sie die -int Auto-Option.
  • Verwenden Sie nicht die -ai|--all-interactive-Option.
  • Übergeben Sie die -e|--empty-Option.

Kopieren Sie das gesamte .Client-Projekt aus der Spender-Web-Blazor-App in den Lösungsordner der ASP.NET Core-App.

Wichtig

Kopieren Sie den .Client-Ordner nicht in den Projektordner von ASP.NET Core. Der beste Ansatz zum Organisieren von .NET-Lösungen besteht darin, jedes Projekt der Lösung in einen eigenen Ordner innerhalb eines Lösungsordners auf oberster Ebene zu platzieren. Wenn über dem Ordner des ASP.NET Core-Projekts kein Lösungsordner vorhanden ist, erstellen Sie einen Ordner. Kopieren Sie als Nächstes den Ordner des .Client-Projekts aus der Spender-Web-Blazor-App in den Lösungsordner. Die endgültige Projektordnerstruktur sollte das folgende Layout aufweisen:

  • BlazorSampleSolution (Lösungsordner der obersten Ebene)
    • BlazorSample (ursprüngliches ASP.NET Core-Projekt)
    • BlazorSample.Client (.Client-Projektordner aus der Spender-Web-Blazor-App)

Für die ASP.NET Core-Projektmappendatei können Sie sie im Ordner ASP.NET Core-Projekts belassen. Alternativ können Sie die Projektmappendatei verschieben oder eine neue im Projektmappenordner der obersten Ebene erstellen, solange die Projektverweise ordnungsgemäß auf die Projektdateien (.csproj) der beiden Projekte im Projektmappenordner verweisen.

Wenn Sie die Spender-Blazor-Web-App beim Erstellen des Spenderprojekts mit der ASP.NET Core-App benannt haben, entsprechen die Namespaces, die von den gespendeten Ressourcen verwendet werden, den in der ASP.NET Core-App verwendeten Namespaces. Sie sollten keine weiteren Schritte ausführen müssen, um Namespaces abzugleichen. Wenn Sie beim Erstellen des Spender-Web-Blazor-App-Projekts einen anderen Namespace verwendet haben, müssen Sie die Namespaces für die gespendeten Ressourcen entsprechend anpassen, wenn Sie den Rest dieser Anleitung genau wie dargestellt verwenden möchten. Wenn die Namespaces nicht übereinstimmen, passen Sie entweder die Namespaces an, bevor Sie fortfahren oder während Sie die restlichen Schritte in diesem Abschnitt befolgen.

Löschen Sie die Spender-Blazor-Web-App, da sie in diesem Prozess nicht weiter verwendet wird.

Fügen Sie das .Client-Projekt zur Projektmappe hinzu:

  • Visual Studio: Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Projektmappe und wählen Sie Hinzufügen>Vorhandenes Projekt aus. Navigieren Sie zum .Client-Ordner, und wählen Sie die Projektdatei (.csproj).

  • .NET CLI: Verwenden Sie den dotnet sln add-Befehl, um das .Client-Projekt der Projektmappe hinzuzufügen.

Fügen Sie dem Clientprojekt einen Projektverweis aus dem ASP.NET Core-Projekt hinzu:

  • Visual Studio: Klicken Sie mit rechts im ASP.NET Core-Projekt und wählen Sie Hinzufügen>Projektverweis aus. Wählen Sie das .Client-Projekt aus und klicken Sie auf OK.

  • .NET CLI: Verwenden Sie aus dem Projektordner von ASP.NET Core den folgenden Befehl:

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj

    Der vorstehende Befehl setzt Folgendes voraus:

    • Der Projektdateiname lautet BlazorSample.Client.csproj.
    • Das .Client-Projekt befindet sich in einem BlazorSample.Client-Ordner im Projektmappenordner. Der .Client-Ordner befindet sich neben dem Projektordner von ASP.NET Core.

    Weitere Informationen zum dotnet add reference-Befehl finden Sie in der dotnet add reference(.NET-Dokumentation).

Nehmen Sie die folgenden Änderungen an der Program-Datei der ASP.NET Core-App vor:

  • Fügen Sie mit AddInteractiveWebAssemblyComponents interaktive WebAssembly-Komponentendienste hinzu, wobei Razor-Komponentendienste mit AddRazorComponents hinzugefügt werden.

    Für interaktives automatisches Rendering:

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

    Nur für interaktives WebAssembly-Rendering:

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

  • Fügen Sie den interaktiven WebAssembly-Rendermodus (AddInteractiveWebAssemblyRenderMode) und zusätzliche Assemblys für das .Client-Projekt hinzu, wobei Razor-Komponenten mit MapRazorComponents zugeordnet werden.

    Für interaktives automatisches (auto) Rendering:

    app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Nur für interaktives WebAssembly-Rendering:

    app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Ändern Sie BlazorSample.Client in den vorherigen Beispielen so, dass sie dem Namespace des .Client-Projekts entsprechen.

Fügen Sie dem .Client-Projekt einen Pages-Ordner hinzu.

Wenn das ASP.NET Core-Projekt über eine vorhandene Counter-Komponente verfügt:

  • Verschieben Sie die Komponente in den Pages-Ordner des .Client-Projekts.
  • Entfernen Sie die @rendermode-Direktive am Anfang der Komponentendatei.

Wenn die ASP.NET Core-App keine Counter-Komponente enthält, fügen Sie dem .Client-Projekt die folgende Counter-Komponente (Pages/Counter.razor) hinzu:

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Wenn die App nur interaktives WebAssembly-Rendering verwendet, entfernen Sie die @rendermode-Direktive und den Wert:

- @rendermode InteractiveAuto

Führen Sie die Projektmappe aus dem ASP.NET Core-App-Projekt aus:

  • Visual Studio: Vergewissern Sie sich, dass das ASP.NET Core-Projekt im Projektmappen-Explorer ausgewählt ist, wenn die App ausgeführt wird.

  • .NET CLI: Führen Sie das Projekt aus dem Ordner ASP.NET Core-Projekts aus.

Um die Counter-Komponente zu laden, navigieren Sie zu /counter.

Verwenden nicht routingfähiger Komponenten in Seiten oder Ansichten

Verwenden Sie den folgenden Leitfaden, um Razor-Komponenten in Seiten und Ansichten einer vorhandenen Razor Pages- oder MVC-App mit dem Component Tag Helper zu integrieren.

Wenn das Vorabrendering durch den Server verwendet wird und 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.

Weitere Informationen zu Renderingmodi, einschließlich des nicht interaktiven statischen Komponentenrenderings, finden Sie unter Component Tag Helper in ASP.NET Core. Informationen zum Speichern des Zustands von vorab gerenderten Razor-Komponenten finden Sie unter Persist Component State Tag Helper in ASP.NET Core.

Fügen Sie dem Stammordner des Projekts einen Components-Ordner hinzu.

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

Components/_Imports.razor:

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

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 <head>-Markup das folgende <base>-Tag und Component Tag Helper für eine HeadOutlet-Komponente 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.web.js unmittelbar vor dem Renderabschnitt Scripts (@await RenderSectionAsync(...)) hinzu:

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

    Es ist nicht erforderlich, der App manuell ein blazor.web.js-Skript hinzuzufügen, da das Blazor-Framework das blazor.web.js-Skript zur App hinzufügt.

Hinweis

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

Fügen Sie dem Projekt eine nicht betriebsbereite (no-op) App-Komponente hinzu.

Components/App.razor:

@* No-op App component *@

Wenn Dienste registriert sind, fügen Sie Dienste für Razor-Komponenten und -Dienste hinzu, um das Rendern interaktiver Serverkomponenten zu unterstützen.

Fügen Sie oben in der Datei Program eine using-Anweisung für die Komponenten des Projekts hinzu:

using {APP NAMESPACE}.Components;

Ändern Sie in der vorherigen Zeile den Platzhalter {APP NAMESPACE} in den Namespace der App. Beispiel:

using BlazorSample.Components;

In der Datei vor der Program-Zeile, in der die App erstellt wird (builder.Build()):

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

Weitere Informationen zum Hinzufügen von Unterstützung für interaktive Server- und WebAssembly-Komponenten finden Sie unter ASP.NET Core Blazor-Rendermodi.

Rufen Sie in der Datei Program unmittelbar nach dem Aufruf zum Zuordnen von Razor Pages (MapRazorPages) in einer Razor Pages-App oder zum Zuordnen der Standardcontrollerroute (MapControllerRoute) in einer MVC-App MapRazorComponents auf, um die verfügbaren Komponenten zu ermitteln und die Stammkomponente der App (die erste zu ladende Komponente) anzugeben. Standardmäßig ist die Stammkomponente der App die App-Komponente (App.razor). Verketten eines Aufrufs von AddInteractiveInteractiveServerRenderMode zum Konfigurieren des interaktiven serverseitigen Renderings (interaktiver SSR) für die App:

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

Hinweis

Wenn die App noch nicht aktualisiert wurde, um Antiforgery Middleware einzuschließen, fügen Sie die folgende Zeile nach dem Aufruf von UseAuthorization hinzu:

app.UseAntiforgery();

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

Components/EmbeddedCounter.razor:

<h1>Embedded 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 EmbeddedCounter-Komponente hinzu, und betten Sie die Komponente in die Seite ein. Wenn die Index-Seite geladen wird, wird die EmbeddedCounter-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}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

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

MVC:

Fügen Sie in der Index-Ansicht des Projekts einer MVC-App den Namespace der EmbeddedCounter-Komponente hinzu, und betten Sie die Komponente in die Ansicht ein. Wenn die Index-Ansicht geladen wird, wird die EmbeddedCounter-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}.Components
@{
    ViewData["Title"] = "Home Page";
}

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

Verwenden von routingfähigen Komponenten

Verwenden Sie die folgenden Anleitungen, um routingfähige Razor-Komponenten in eine vorhandene Razor Pages- oder MVC-App zu integrieren.

In dem Leitfaden in diesem Abschnitt wird Folgendes angenommen:

  • Der Titel der App lautet Blazor Sample.
  • Der Namespace der App ist BlazorSample.

So unterstützen Sie routingfähige Razor-Komponenten:

Fügen Sie dem Stammordner des Projekts einen Components-Ordner hinzu.

Fügen Sie dem Components-Ordner eine Datei mit dem folgenden Inhalt hinzu.

Components/_Imports.razor:

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

Ändern Sie den Platzhalter {APP NAMESPACE} in den Namespace des Projekts. Beispiel:

@using BlazorSample
@using BlazorSample.Components

Fügen Sie dem Components-Ordner einen Layout-Ordner hinzu.

Fügen Sie dem Layout-Ordner eine Fußzeilenkomponente und ein Stylesheet hinzu.

Components/Layout/Footer.razor:

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

Legen Sie im vorherigen Markup den {APP TITLE}-Platzhalter auf den Titel der App fest. Beispiel:

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css:

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

Fügen Sie dem Layout-Ordner eine Navigationsmenükomponente hinzu.

Components/Layout/NavMenu.razor:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Legen Sie im vorherigen Markup den {APP TITLE}-Platzhalter auf den Titel der App fest. Beispiel:

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

Fügen Sie dem Layout-Ordner eine Hauptlayoutkomponente und ein Stylesheet hinzu.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css:

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Fügen Sie dem Components-Ordner eine Routes-Datei mit dem folgenden Inhalt hinzu.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

Fügen Sie dem Components-Ordner ein App-Komponente mit dem folgenden Inhalt hinzu.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Aktualisieren Sie im vorherigen Code den App-Titel und den Namen der Stylesheetdatei:

  • Legen Sie für den {APP TITLE}-Platzhalter im <title>-Element den Titel der App fest. Beispiel:

    <title>Blazor Sample</title>

  • Legen Sie für den {APP NAMESPACE}-Platzhalter im Stylesheet-Element „<link>“ den Namespace der App fest. Beispiel:

    <link rel="stylesheet" href="/BlazorSample.styles.css" />

Wenn Dienste registriert sind, fügen Sie Dienste für Razor-Komponenten und -Dienste hinzu, um das Rendern interaktiver Serverkomponenten zu unterstützen.

Fügen Sie oben in der Datei Program eine using-Anweisung für die Komponenten des Projekts hinzu:

using {APP NAMESPACE}.Components;

Ändern Sie in der vorherigen Zeile den Platzhalter {APP NAMESPACE} in den Namespace der App. Beispiel:

using BlazorSample.Components;

In der Datei vor der Program-Zeile, in der die App erstellt wird (builder.Build()):

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

Weitere Informationen zum Hinzufügen von Unterstützung für interaktive Server- und WebAssembly-Komponenten finden Sie unter ASP.NET Core Blazor-Rendermodi.

Rufen Sie in der Program-Datei unmittelbar nach dem Aufruf zum Zuordnen von Razor Pages ( MapRazorPages ) MapRazorComponents auf, um verfügbare Komponenten zu ermitteln und die Stammkomponente der App anzugeben. Standardmäßig ist die Stammkomponente der App die App-Komponente (App.razor). Verketten eines Aufrufs von AddInteractiveServerRenderMode zum Konfigurieren des interaktiven serverseitigen Renderings (interaktiver SSR) für die App:

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

Hinweis

Wenn die App noch nicht aktualisiert wurde, um Antiforgery Middleware einzuschließen, fügen Sie die folgende Zeile nach dem Aufruf von UseAuthorization hinzu:

app.UseAntiforgery();

Erstellen Sie einen Pages-Ordner im Components-Ordner für routingfähige Komponenten. Das folgende Beispiel ist eine Counter-Komponente, die auf der Counter-Komponente in den Blazor-Projektvorlagen basiert.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

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

Führen Sie das Projekt aus, und navigieren Sie zu der routingfähigen Counter-Komponente unter /counter.

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.

Zurückgeben einer RazorComponentResult aus einer MVC-Controlleraktion

Eine MVC-Controlleraktion kann eine Komponente mit RazorComponentResult<TComponent> zurückgeben.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

In einem Controller:

public IResult GetWelcomeComponent()
{
    return new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });
}

Es wird nur HTML-Markup für die gerenderte Komponente zurückgegeben. Layouts und HTML-Seitenmarkup werden nicht automatisch mit der Komponente gerendert. Um eine vollständige HTML-Seite zu erstellen, kann die App ein Blazor Layout pflegen, das HTML-Markup für <html>, <head>, <body> und andere Tags bereitstellt. Die Komponente enthält das Layout mit der @layoutRazor Direktive oben in der Komponentendefinitionsdatei, z. B. Welcome.razor in diesem Abschnitt. Im folgenden Beispiel wird davon ausgegangen, dass die App ein Layout mit dem Namen RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor) hat:

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Sie können vermeiden, die @using-Anweisung für den Ordner Layout in einzelnen Komponenten zu platzieren, indem Sie sie in die App-Datei _Imports.razor verschieben.

Weitere Informationen finden Sie unter ASP.NET Core Blazor-Layouts.

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

Beispiel:

@using BlazorSample.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.

Zusätzliche Ressourcen

Vorabrendern von ASP.NET Core Razor-Komponenten