Integrieren von ASP.NET Core Razor-Komponenten in Razor Pages- und MVC-AppsIntegrate ASP.NET Core Razor components into Razor Pages and MVC apps

Von Luke Latham und Daniel RothBy Luke Latham and Daniel Roth

Razor-Komponenten können in Razor Pages- und MVC-Apps integriert werden. components can be integrated into Razor Pages and MVC apps. Wenn die Seite oder Ansicht gerendert wird, können Komponenten gleichzeitig vorab gerendert werden.When the page or view is rendered, components can be prerendered at the same time.

Nachdem Sie die App vorbereitet haben, verwenden Sie die Anleitungen in den folgenden Abschnitten, abhängig von den Anforderungen der App:After preparing the app, use the guidance in the following sections depending on the app's requirements:

Vorbereiten der AppPrepare the app

Eine vorhandene Razor Pages- oder MVC-App kann Razor-Komponenten in Seiten und Ansichten integrieren:An existing Razor Pages or MVC app can integrate Razor components into pages and views:

  1. In der Layoutdatei der App (_Layout.cshtml):In the app's layout file (_Layout.cshtml):

    • Fügen Sie das folgende <base>-Tag zum <head>-Element hinzu:Add the following <base> tag to the <head> element:

      <base href="~/" />
      

      Der href-Wert (der App-Basispfad) im obigen Beispiel setzt voraus, dass die App sich im URL-Stammpfad (/) befindet.The href value (the app base path) in the preceding example assumes that the app resides at the root URL path (/). Wenn es sich bei der App um eine untergeordnete Anwendung handelt, befolgen Sie die Anweisungen im Abschnitt App-Basispfad des Hosten und Bereitstellen von ASP.NET Core Blazor-Artikels.If the app is a sub-application, follow the guidance in the App base path section of the Hosten und Bereitstellen von ASP.NET Core Blazor article.

      Die Datei _Layout.cshtml befindet sich bei Razor-Pages-Apps im Ordner Pages/Shared und bei MVC-Apps im Ordner Views/Shared.The _Layout.cshtml file is located in the Pages/Shared folder in a Razor Pages app or Views/Shared folder in an MVC app.

    • Fügen Sie direkt vor dem schließenden </body>-Tag ein <script>-Tag für das Skript blazor.server.js ein:Add a <script> tag for the blazor.server.js script immediately before the closing </body> tag:

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

      Das Framework fügt das Skript blazor.server.js zur App hinzu.The framework adds the blazor.server.js script to the app. Das Skript muss nicht manuell zur App hinzugefügt werden.There's no need to manually add the script to the app.

  2. Fügen Sie im Stammordner des Projekts eine _Imports.razor-Datei mit dem folgenden Inhalt ein (ändern Sie den letzten Namespace MyAppNamespace in den Namespace der App):Add an _Imports.razor file to the root folder of the project with the following content (change the last namespace, MyAppNamespace, to the namespace of the app):

    @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 MyAppNamespace
    
  3. Registrieren Sie in Startup.ConfigureServices den Blazor Server-Dienst:In Startup.ConfigureServices, register the Blazor Server service:

    services.AddServerSideBlazor();
    
  4. Fügen Sie in Startup.Configure den Blazor Hub-Endpunkt zu app.UseEndpoints hinzu:In Startup.Configure, add the Blazor Hub endpoint to app.UseEndpoints:

    endpoints.MapBlazorHub();
    
  5. Integrieren Sie Komponenten in eine beliebige Seite oder Ansicht.Integrate components into any page or view. Weitere Informationen finden Sie im Abschnitt Rendern von Komponenten einer Seite oder Ansicht.For more information, see the Render components from a page or view section.

Verwenden routingfähiger Komponenten in einer Razor Pages-AppUse routable components in a Razor Pages app

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.This section pertains to adding components that are directly routable from user requests.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in Razor Pages-Apps ein:To support routable Razor components in Razor Pages apps:

  1. Befolgen Sie die Anleitungen im Abschnitt Vorbereiten der App.Follow the guidance in the Prepare the app section.

  2. Fügen Sie eine App.razor-Datei mit dem folgenden Inhalt zum Projektstamm hinzu:Add an App.razor file to the project root with the following content:

    @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 Ordner Pages eine _Host.cshtml-Datei mit dem folgenden Inhalt hinzu:Add a _Host.cshtml file to the Pages folder with the following content:

    @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.Components use the shared _Layout.cshtml file for their layout.

    RenderMode konfiguriert folgende Einstellungen für die App-Komponente:RenderMode configures whether the App component:

    • Ob die Komponente zuvor für die Seite gerendert wirdIs prerendered into the page.
    • 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.Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
    RendermodusRender Mode BeschreibungDescription
    ServerPrerendered Rendert die App-Komponente in statisches HTML und fügt einen Marker für eine Blazor Server-App hinzu.Renders the App component into static HTML and includes a marker for a Blazor Server app. Wenn der Benutzer-Agent gestartet wird, wird der Marker zum Bootstrapping einer Blazor-App verwendet.When the user-agent starts, this marker is used to bootstrap a Blazor app.
    Server Rendert einen Marker für eine Blazor Server-App.Renders a marker for a Blazor Server app. Die Ausgabe der App-Komponente ist nicht enthalten.Output from the App component isn't included. Wenn der Benutzer-Agent gestartet wird, wird der Marker zum Bootstrapping einer Blazor-App verwendet.When the user-agent starts, this marker is used to bootstrap a Blazor app.
    Static Rendert die App-Komponente in statischem HTML.Renders the App component into static HTML.

    Weitere Informationen zum Taghilfsprogramm für Komponenten finden Sie unter Komponententaghilfsprogramm in ASP.net Core.For more information on the Component Tag Helper, see Komponententaghilfsprogramm in ASP.net Core.

  4. Fügen Sie eine Route mit niedriger Priorität für die Seite _Host.cshtml zur Endpunktkonfiguration in Startup.Configure hinzu:Add a low-priority route for the _Host.cshtml page to endpoint configuration in Startup.Configure:

    app.UseEndpoints(endpoints =>
    {
        ...
    
        endpoints.MapFallbackToPage("/_Host");
    });
    
  5. Fügen Sie routingfähige Komponenten zur App hinzu.Add routable components to the app. Zum Beispiel:For example:

    @page "/counter"
    
    <h1>Counter</h1>
    
    ...
    

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.For more information on namespaces, see the Component namespaces section.

Verwenden routingfähiger Komponenten in einer MVC-AppUse routable components in an MVC app

In diesem Abschnitt wird das Hinzufügen von Komponenten behandelt, die über Benutzeranforderungen direkt routingfähig sind.This section pertains to adding components that are directly routable from user requests.

So richten Sie die Unterstützung von routingfähigen Razor-Komponenten in MVC-Apps ein:To support routable Razor components in MVC apps:

  1. Befolgen Sie die Anleitungen im Abschnitt Vorbereiten der App.Follow the guidance in the Prepare the app section.

  2. Fügen Sie eine App.razor-Datei mit dem folgenden Inhalt zum Projektstamm hinzu:Add an App.razor file to the root of the project with the following content:

    @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 Ordner Views/Home eine _Host.cshtml-Datei mit dem folgenden Inhalt hinzu:Add a _Host.cshtml file to the Views/Home folder with the following content:

    @{
        Layout = "_Layout";
    }
    
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    

    Komponenten verwenden die gemeinsam verwendete Datei _Layout.cshtml für ihr Layout.Components use the shared _Layout.cshtml file for their layout.

    RenderMode konfiguriert folgende Einstellungen für die App-Komponente:RenderMode configures whether the App component:

    • Ob die Komponente zuvor für die Seite gerendert wirdIs prerendered into the page.
    • 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.Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
    RendermodusRender Mode BeschreibungDescription
    ServerPrerendered Rendert die App-Komponente in statisches HTML und fügt einen Marker für eine Blazor Server-App hinzu.Renders the App component into static HTML and includes a marker for a Blazor Server app. Wenn der Benutzer-Agent gestartet wird, wird der Marker zum Bootstrapping einer Blazor-App verwendet.When the user-agent starts, this marker is used to bootstrap a Blazor app.
    Server Rendert einen Marker für eine Blazor Server-App.Renders a marker for a Blazor Server app. Die Ausgabe der App-Komponente ist nicht enthalten.Output from the App component isn't included. Wenn der Benutzer-Agent gestartet wird, wird der Marker zum Bootstrapping einer Blazor-App verwendet.When the user-agent starts, this marker is used to bootstrap a Blazor app.
    Static Rendert die App-Komponente in statischem HTML.Renders the App component into static HTML.

    Weitere Informationen zum Taghilfsprogramm für Komponenten finden Sie unter Komponententaghilfsprogramm in ASP.net Core.For more information on the Component Tag Helper, see Komponententaghilfsprogramm in ASP.net Core.

  4. Fügen Sie eine Aktion zum Home-Controller hinzu:Add an action to the Home controller:

    public IActionResult Blazor()
    {
       return View("_Host");
    }
    
  5. Fügen Sie eine Route mit niedriger Priorität für die Controlleraktion hinzu, die die Ansicht _Host.cshtml an die Endpunktkonfiguration in Startup.Configure zurückgibt:Add a low-priority route for the controller action that returns the _Host.cshtml view to the endpoint configuration in Startup.Configure:

    app.UseEndpoints(endpoints =>
    {
        ...
    
        endpoints.MapFallbackToController("Blazor", "Home");
    });
    
  6. Erstellen Sie einen Pages-Ordner, und fügen Sie routingfähige Komponenten zur App hinzu.Create a Pages folder and add routable components to the app. Zum Beispiel:For example:

    @page "/counter"
    
    <h1>Counter</h1>
    
    ...
    

Weitere Informationen zu Namespaces finden Sie im Abschnitt Komponentennamespaces.For more information on namespaces, see the Component namespaces section.

Rendern von Komponenten einer Seite oder AnsichtRender components from a page or view

In diesem Abschnitt wird das Hinzufügen von Komponenten zu Seiten oder Ansichten behandelt, wenn die Komponenten nicht direkt über Benutzeranforderungen routingfähig sind.This section pertains to adding components to pages or views, where the components aren't directly routable from user requests.

Verwenden Sie das Komponententaghilfsprogramm zum Rendern einer Komponente einer Seite oder Ansicht.To render a component from a page or view, use the Component Tag Helper.

Rendern zustandsbehafteter interaktiver KomponentenRender stateful interactive components

Zustandsbehaftete interaktive Komponenten können einer Razor-Seite oder -Ansicht hinzugefügt werden.Stateful interactive components can be added to a Razor page or view.

Wenn die Seite oder Ansicht gerendert wird:When the page or view renders:

  • Die Komponente wird mit der Seite oder Ansicht vorab gerendert.The component is prerendered with the page or view.
  • Der anfängliche Komponentenzustand, der zum Rendern vorab genutzt wurde, geht verloren.The initial component state used for prerendering is lost.
  • Der neue Komponentenzustand wird erstellt, wenn die SignalR-Verbindung hergestellt wird.New component state is created when the SignalR connection is established.

Die folgende Razor-Seite rendert eine Counter-Komponente:The following Razor page renders a Counter component:

<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 Komponententaghilfsprogramm in ASP.net Core.For more information, see Komponententaghilfsprogramm in ASP.net Core.

Rendern nicht interaktiver KomponentenRender noninteractive components

Auf der folgenden Razor-Seite wird die Counter-Komponente statisch mit einem Anfangswert gerendert, der mit einem Formular angegeben wird.In the following Razor page, the Counter component is statically rendered with an initial value that's specified using a form. Da die Komponente statisch gerendert wird, ist die Komponente nicht interaktiv:Since the component is statically rendered, the component isn't interactive:

<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 Komponententaghilfsprogramm in ASP.net Core.For more information, see Komponententaghilfsprogramm in ASP.net Core.

KomponentennamespacesComponent namespaces

Wenn Sie einen benutzerdefinierten Ordner für die Komponenten der App verwenden, fügen Sie den Namespace des Ordners zur Seite/Ansicht oder zur Datei _ViewImports.cshtml hinzu.When using a custom folder to hold the app's components, add the namespace representing the folder to either the page/view or to the _ViewImports.cshtml file. Im folgenden Beispiel:In the following example:

  • Ändern Sie MyAppNamespace in den Namespace der App.Change MyAppNamespace to the app's namespace.
  • Wenn die Komponenten nicht in einem Ordner namens Components enthalten sind, ändern Sie Components in den Namen des Ordners, in dem sich die Komponenten befinden.If a folder named Components isn't used to hold the components, change Components to the folder where the components reside.
@using MyAppNamespace.Components

Die Datei _ViewImports.cshtml befindet sich im Ordner Pages einer Razor-Pages-App oder im Ordner Views einer MVC-App.The _ViewImports.cshtml file is located in the Pages folder of a Razor Pages app or the Views folder of an MVC app.

Weitere Informationen finden Sie unter Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.For more information, see Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.