Teilen über

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 die Anleitungen in den folgenden Abschnitten je nach den Anforderungen der App:

Verwenden nicht routingfähiger Komponenten in Seiten oder Ansichten

Verwenden Sie die folgende Anleitung, um Razor-Komponenten mit dem Taghilfsprogramm für Komponenten in Seiten oder Ansichten einer bestehenden Razor-Seiten- oder MVC-App zu integrieren.

Hinweis

Wenn Ihre App direkt routingfähige Komponenten erfordert (nicht in Seiten oder Ansichten eingebettet), überspringen Sie diesen Abschnitt, und verwenden Sie die Anleitungen im Abschnitt Hinzufügen von Blazor-Unterstützung zu einer ASP.NET Core-App.

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>

    Das Blazor Framework fügt das blazor.web.js Skript automatisch in die App ein.

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

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" />

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>

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="@Assets["{ASSEMBLY NAME}.styles.css"]" />
    <HeadOutlet />
</head>

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

</html>

<!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="{ASSEMBLY NAME}.styles.css" />
    <HeadOutlet />
</head>

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

</html>

Der Platzhalter {ASSEMBLY NAME} ist der Assemblyname der App. Beispielsweise verwendet ein Projekt mit dem Assemblynamen ContosoApp den Dateinamen ContosoApp.styles.css für Stylesheets.

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 UseAntiforgery Fä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. Beachten Sie, dass bei Verwendung des interaktiven Auto- oder des interaktiven WebAssembly-Rendermodus der auf den Client heruntergeladene Komponentencode 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 Artikel Tooling für ASP.NET Core 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 Option -ai|--all-interactive.
  • Übergeben Sie die -e|--empty-Option.

Kopieren Sie das gesamte .Client-Projekt aus der Spender-Blazor Web 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-Blazor Web 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-Blazor Web 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 genauso wie die 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-Blazor Web 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.

Implementieren des Layouts und der Stile von Blazor

Weisen Sie optional eine Standard-Layoutkomponente zu, indem Sie den Parameter RouteView.DefaultLayout der RouteView-Komponente verwenden.

In Routes.razor verwendet das folgende Beispiel eine MainLayout-Komponente als Standardlayout:

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

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

Blazor-Projektvorlagenlayouts und Stylesheets stehen im dotnet/aspnetcore-GitHub-Repository zur Verfügung:

  • MainLayout.razor
  • MainLayout.razor.css
  • NavMenu.razor
  • NavMenu.razor.css

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

Je nachdem, wie Sie Ihre Layoutdateien in der App organisieren, müssen Sie möglicherweise eine @using-Anweisung für den Ordner der Layoutdateien in der App-Datei _Imports.razor hinzufügen, um sie für die Verwendung in den App-Komponenten anzuzeigen.

Bei der Verwendung von CSS-Isolation müssen Sie nicht explizit auf Stylesheets verweisen. Das Blazor-Framework bündelt automatisch einzelne Komponenten-Stylesheets. Auf das gebündelte Stylesheet der App wird bereits in der App-Komponente App verwiesen ({ASSEMBLY NAME}.styles.css, wobei der {ASSEMBLY NAME}-Platzhalter der Assemblyname der App ist).

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() => 
    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