Erstellen einer .NET MAUIBlazor Hybrid-App mit einer Blazor-Web-App

In diesem Artikel wird erläutert, wie Sie eine .NET MAUIBlazor Hybrid-App mit einer Blazor-Web-App erstellen, die eine freigegebene Benutzeroberfläche über eine Razor-Klassenbibliothek (RCL) verwendet.

Voraussetzungen und vorläufige Schritte

Voraussetzungen und vorläufige Schritte finden Sie unter Erstellen einer .NET MAUIBlazor Hybrid-App. Es wird empfohlen, das .NET MAUIBlazor Hybrid-Tutorial zum Einrichten Ihres lokalen Systems für die Entwicklung von .NET MAUI zu verwenden, bevor Sie die Anleitungen in diesem Artikel verwenden.

.NET MAUIBlazor Hybrid und Web App-Beispiel-App

Rufen Sie die Beispiel-App namens MauiBlazorWeb ab aus dem Blazor-GitHub-Beispiel-Repository (dotnet/blazor-samples) (.NET 8 oder höher).

Die Beispiel-App ist eine Startlösung, die eine (systemeigene, plattformübergreifende) .NET MAUIBlazor Hybrid-App, eine Blazor-Web App und eine Razor-Klassenbibliothek (RCL) enthält, welche die von den systemeigenen und Web-Apps verwendete freigegebene UI (Razor-Komponenten) enthält.

Migrieren einer .NET MAUIBlazor Hybrid-Lösung

Anstatt die Beispiel-App zu verwenden, können Sie eine vorhandene .NET MAUIBlazor Hybrid-App mit den Anweisungen in diesem Abschnitt mithilfe von Visual Studio migrieren.

Fügen Sie der Projektmappe mit der Blazor-Web App-Projektvorlage ein neues Projekt hinzu. Wählen Sie die folgenden Optionen:

• Projektname: Verwenden Sie den Namen der Projektmappe und fügen Sie .Web an. In den Beispielen in diesem Artikel wird die folgende Benennung vorausgesetzt:
  • Projektmappe: MauiBlazorWeb
  • MAUI-Projekt: MauiBlazorWeb.Maui
  • Blazor-Web App: MauiBlazorWeb.Web
  • Razor-Klassenbibliothek (RCL) (wird in einem späteren Schritt hinzugefügt): MauiBlazorWeb.Shared
• Authentifizierungstyp: Keine
• Konfigurieren für HTTPS: Ausgewählt (aktiviert)
• Interaktiver Rendermodus: Server
• Interaktivitätsort: Global
• Beispielseiten: Nicht ausgewählt (deaktiviert)

Die Einstellung für die Interaktivitätsposition auf Global ist wichtig, da MAUI-Apps immer interaktiv ausgeführt werden und Fehler auf Razor-Komponentenseiten auslösen, die explizit einen Rendermodus angeben. Wenn Sie keinen globalen Rendermodus verwenden, müssen Sie den im Abschnitt Rendermodi Blazor verwenden beschriebenen Ansatz implementieren, nachdem Sie den Anweisungen in diesem Abschnitt durchgeführt haben. Weitere Informationen finden Sie unter BlazorWebView benötigt eine Möglichkeit, ResolveComponentForRenderMode (dotnet/aspnetcore #51235) zu aktivieren.

Fügen Sie der Projektmappe neue Razor-Klassenbibliothek (RCL) hinzu. In den Beispielen in diesem Artikel wird davon ausgegangen, dass das Projekt MauiBlazorWeb.Shared benannt ist. Wählen Sie keine Supportseiten und Ansichten aus, wenn Sie das Projekt der Projektmappe hinzufügen.

Fügen Sie dem RCL aus dem MAUI-Projekt und dem Blazor-Web App-Projekt Verweise hinzu.

Verschieben Sie den Components-Ordner und den gesamten Inhalt aus dem MAUI-Projekt in die RCL. Vergewissern Sie sich, dass der Components-Ordner aus dem MAUI-Projekt gelöscht wird.

Tipp

Wenn Sie einen Ordner oder eine Datei in Visual Studio verschieben, verwenden Sie entweder Tastaturbefehle oder das Kontextmenü, indem Sie für einen Ausschneiden- und Einfügevorgang auf die rechte Maustaste klicken. Wenn Sie den Ordner in Visual Studio nur von einer Stelle an eine andere ziehen, ist ein zusätzlicher Schritt erforderlich, um das Original zu löschen.

Verschieben Sie den css-Ordner aus dem wwwroot-Ordner des MAUI-Projekts in den Ordner der wwwroot-RCL.

Löschen Sie die folgenden Dateien aus dem wwwroot-Ordner der RCL:

• background.png
• exampleJsInterop.js

Ersetzen Sie in der RCL die Stammdatei _Imports.razor durch die Stammdatei im Components-Ordner der RCL, überschreiben Sie die vorhandene Datei in der RCL und löschen Sie das Original im Components-Ordner. Nachdem Sie die Datei verschoben haben, öffnen Sie sie und benennen Sie die letzten beiden @using-Anweisungen so um, dass sie dem RCL-Namespace entsprechen. Im folgenden Beispiel ist der RCL-Namespace MauiBlazorWeb.Shared:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

Löschen Sie im Stammverzeichnis des RCL-Projekts die folgenden Dateien:

• Component1.razor
• ExampleJsInterop.cs

Öffnen Sie in der RCL die Components/Routes.razor-Datei und ändern Sie MauiProgram zu Routes:

- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">

Öffnen Sie die MainPage.xaml-Datei im MAUI-Projekt. Fügen Sie einen xmlns:shared-Verweis auf die RCL in den ContentPage-Attributen hinzu. Im folgenden Beispiel ist der RCL-Namespace MauiBlazorWeb.Shared. Legen Sie den richtigen Wert für die clr-namespace und die assembly fest:

xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"

Aktualisieren Sie auch in der MainPage.xaml-Datei die BlazorWebView-Stammkomponente ComponentType von local zu shared:

- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />

Öffnen Sie im MAUI-Projekt die wwwroot/index.html-Datei und ändern Sie Stylesheets, um auf den statischen Ressourcenpfad der RCL zu verweisen.

Entfernen Sie die folgenden Zeilen:

- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />

Ersetzen Sie die vorherigen Zeilen durch das folgende Markup. Im folgenden Beispiel ist _content/MauiBlazorWeb.Shared/ der statische Objektpfad der RCL:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Öffnen Sie die _Imports.razor-Datei in der Blazor-Web App und fügen Sie die folgenden beiden @using-Anweisungen für die RCL hinzu. Im folgenden Beispiel ist der RCL-Namespace MauiBlazorWeb.Shared:

@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components

Öffnen Sie im Blazor-Web App-Projekt die App-Komponente (Components/App.razor). Entfernen Sie das app.css-Stylesheet:

- <link rel="stylesheet" href="app.css" />

Ersetzen Sie die vorangehende Zeile durch die Verweise auf die statische Ressourcenformatvorlage der RCL. Im folgenden Beispiel ist _content/MauiBlazorWeb.Shared/ der statische Objektpfad der RCL:

<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />

Löschen Sie im Blazor-Web App-Projekt den folgenden Ordner und die Dateien:

• Components/Layout "
• Components/Routes.razor
• Components/Pages/Home.razor
• wwwroot/app.css

Öffnen Sie die Program.cs-Datei der Blazor-Web App und fügen Sie der App eine zusätzliche Assembly für die RCL hinzu. Im folgenden Beispiel ist der RCL-Namespace MauiBlazorWeb.Shared:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);

Führen Sie das MAUI-Projekt aus, indem Sie das Projekt im Projektmappen-Explorer und die Startschaltfläche von Visual Studio auswählen.

Führen Sie das Blazor-Web App-Projekt aus, indem Sie das Blazor-Web App-Projekt im Projektmappen-Explorer auswählen und die Startschaltfläche von Visual Studio mit der https-Buildkonfiguration verwenden.

Wenn Sie einen Buildfehler erhalten, dass die RCL-Assembly nicht aufgelöst werden kann, erstellen Sie zuerst das RCL-Projekt. Wenn MAUI-Projektressourcenfehler beim Build auftreten, erstellen Sie das MAUI-Projekt neu, um die Fehler zu löschen.

Verwenden von Blazor-Rendermodi

Verwenden Sie die Anleitungen in einem der folgenden Unterabschnitte, die den Spezifikationen Ihrer App für das Anwenden von Blazor-Rendermodi für einen bestimmten Interaktivitätsort in der Blazor-Web App entsprechen, aber die Rendermoduszuweisungen im MAUI-Projekt ignorieren.

Rendermodus- und Interaktivitätsspezifikationsunterabschnitte:

• Globale Server-Interaktivität
• Globale Auto- oder WebAssembly-Interaktivität
• Interaktivität pro Seite/Komponente des Servers
• Automatische Interaktivität pro Seite/Komponente
• WebAssembly-Interaktivität pro Seite/Komponente

Globale Server-Interaktivität

• Interaktiver Rendermodus: Server
• Interaktivitätsort: Global
• Projektmappenprojekte
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor-Web App (MauiBlazorWeb.Web)
  • RCL (MauiBlazorWeb.Shared): Enthält die freigegebenen Razor-Komponenten, ohne Rendermodi in jeder Komponente festzulegen.

Projektverweise: MauiBlazorWeb.Maui und MauiBlazorWeb.Web haben einen Projektverweis auf MauiBlazorWeb.Shared.

Globale Automatische oder WebAssembly-Interaktivität

• Interaktiver Rendermodus: Auto oder WebAssembly
• Interaktivitätsort: Global
• Projektmappenprojekte
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor-Web-App
    • Serverprojekt: MauiBlazorWeb.Web
    • Clientprojekt: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): Enthält die freigegebenen Razor-Komponenten, ohne Rendermodi in jeder Komponente festzulegen.

Projektverweise:

• Die MauiBlazorWeb.Maui-, MauiBlazorWeb.Web- und MauiBlazorWeb.Web.Client-Projekte haben einen Projektverweis auf MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web verfügt über einen Projektverweis auf MauiBlazorWeb.Web.Client.

Interaktivität pro Seite/Komponente des Servers

• Interaktiver Rendermodus: Server
• Interaktivitätsort: Pro Seite/Komponente
• Projektmappenprojekte
  • MAUI (MauiBlazorWeb.Maui): Aufruf von InteractiveRenderSettings.ConfigureBlazorHybridRenderModes in MauiProgram.cs.
  • Blazor-Web App (MauiBlazorWeb.Web): Legt kein @rendermode-Direktive-Attribut für die HeadOutlet- und Routes-Komponenten der App-Komponente (Components/App.razor) fest.
  • RCL (MauiBlazorWeb.Shared): Enthält die freigegebenen Razor-Komponenten, die den InteractiveServer-Rendermodus in jeder Komponente festlegen.

MauiBlazorWeb.Maui und MauiBlazorWeb.Web haben einen Projektverweis auf MauiBlazorWeb.Shared.

Fügen Sie der RCL die folgende InteractiveRenderSettings-Klasse hinzu. Die Klasseneigenschaften werden zum Festlegen von Komponentenrendermodi verwendet.

Das MAUI-Projekt ist standardmäßig interaktiv, sodass keine Aktion auf Projektebene im MAUI-Projekt ausgeführt wird, außer beim Aufrufen von InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Für die Blazor-Web App im Webclient werden die Eigenschaftswerte von RenderMode zugewiesen. Wenn die Komponenten in eine BlazorWebView für den systemeigenen Client des MAUI-Projekts geladen werden, sind die Rendermodi nicht zugewiesen (null), da das MAUI-Projekt die Rendermoduseigenschaften explizit auf null festlegt, wenn ConfigureBlazorHybridRenderModes aufgerufen wird.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

In MauiProgram.CreateMauiApp von MauiProgram.csConfigureBlazorHybridRenderModes aufrufen:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Fügen Sie in der _Imports.razor-Datei der RCL die folgende globale statische @using-Direktive hinzu, um die Eigenschaften der Klasse für Komponenten verfügbar zu machen:

@using static InteractiveRenderSettings

Hinweis

Die Zuweisung von Rendermodi über die InteractiveRenderSettings-Klasseneigenschaften der RCL unterscheidet sich von einer typischen eigenständigen Blazor-Web App. In einer Blazor-Web App werden die Rendermodi normalerweise über die @using static Microsoft.AspNetCore.Components.Web.RenderMode-Anweisung in der _Import-Datei der Blazor-Web App von RenderMode bereitgestellt.

Automatische Interaktivität pro Seite/Komponente

• Interaktiver Rendermodus: Auto
• Interaktivitätsort: Pro Seite/Komponente
• Projektmappenprojekte
  • MAUI (MauiBlazorWeb.Maui): Aufruf von InteractiveRenderSettings.ConfigureBlazorHybridRenderModes in MauiProgram.cs.
  • Blazor-Web-App
    • Serverprojekt: MauiBlazorWeb.Web: Legt kein @rendermode-Direktive-Attribut für die HeadOutlet- und Routes-Komponenten der App-Komponente (Components/App.razor) fest.
    • Clientprojekt: MauiBlazorWeb.Web.Client
  • RCL (MauiBlazorWeb.Shared): Enthält die freigegebenen Razor-Komponenten, die den InteractiveAuto-Rendermodus in jeder Komponente festlegen.

Projektverweise:

• MauiBlazorWeb.Maui, MauiBlazorWeb.Web und MauiBlazorWeb.Web.Client haben einen Projektverweis auf MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web verfügt über einen Projektverweis auf MauiBlazorWeb.Web.Client.

Fügen Sie der RCL die folgende InteractiveRenderSettings-Klasse hinzu. Die Klasseneigenschaften werden zum Festlegen von Komponentenrendermodi verwendet.

Das MAUI-Projekt ist standardmäßig interaktiv, sodass keine Aktion auf Projektebene im MAUI-Projekt ausgeführt wird, außer beim Aufrufen von InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Für die Blazor-Web App im Webclient werden die Eigenschaftswerte von RenderMode zugewiesen. Wenn die Komponenten in eine BlazorWebView für den systemeigenen Client des MAUI-Projekts geladen werden, sind die Rendermodi nicht zugewiesen (null), da das MAUI-Projekt die Rendermoduseigenschaften explizit auf null festlegt, wenn ConfigureBlazorHybridRenderModes aufgerufen wird.

InteractiveRenderSettings.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

In MauiProgram.CreateMauiApp von MauiProgram.csConfigureBlazorHybridRenderModes aufrufen:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Fügen Sie in der _Imports.razor-Datei der RCL die folgende globale statische @using-Direktive hinzu, um die Eigenschaften der Klasse für Komponenten verfügbar zu machen:

@using static InteractiveRenderSettings

Hinweis

Die Zuweisung von Rendermodi über die InteractiveRenderSettings-Klasseneigenschaften der RCL unterscheidet sich von einer typischen eigenständigen Blazor-Web App. In einer Blazor-Web App werden die Rendermodi normalerweise über die @using static Microsoft.AspNetCore.Components.Web.RenderMode-Anweisung in der _Import-Datei der Blazor-Web App von RenderMode bereitgestellt.

WebAssembly-Interaktivität pro Seite/Komponente

• Interaktiver Rendermodus: WebAssembly
• Interaktivitätsort: Pro Seite/Komponente
• Projektmappenprojekte
  • MAUI (MauiBlazorWeb.Maui)
  • Blazor-Web-App
    • Serverprojekt: MauiBlazorWeb.Web: Legt kein @rendermode-Direktive-Attribut für die HeadOutlet- und Routes-Komponenten der App-Komponente (Components/App.razor) fest.
    • Clientprojekt: MauiBlazorWeb.Web.Client
  • RCLs
    • MauiBlazorWeb.Shared
    • MauiBlazorWeb.Shared.Client: Enthält die freigegebenen Razor-Komponenten, die den InteractiveWebAssembly-Rendermodus in jeder Komponente festlegen. Die .Shared.Client-RCL wird getrennt von der .Shared-RCL verwaltet, da die App die Komponenten verwalten sollte, die für die Ausführung auf WebAssembly separat von den Komponenten auf dem Server erforderlich sind, und die auf dem Server verbleiben.

Projektverweise:

• MauiBlazorWeb.Maui und MauiBlazorWeb.Web haben Projektverweise auf MauiBlazorWeb.Shared.
• MauiBlazorWeb.Web verfügt über einen Projektverweis auf MauiBlazorWeb.Web.Client.
• MauiBlazorWeb.Web.Client und MauiBlazorWeb.Shared haben einen Projektverweis auf MauiBlazorWeb.Shared.Client.

Fügen Sie der Router-Komponenteninstanz für die MauiBlazorWeb.Shared.Client-Projektassembly (über die _Imports-Datei) der Routes.razor-Datei des MauiBlazorWeb.Shared-Projekts den folgenden AdditionalAssemblies-Parameter hinzu:

<Router AppAssembly="@typeof(Routes).Assembly" 
        AdditionalAssemblies="new [] { typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Components.Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Fügen Sie die MauiBlazorWeb.Shared.Client-Projektassembly (über die _Imports-Datei) mit dem folgenden AddAdditionalAssemblies-Aufruf in der Program.cs-Datei des MauiBlazorWeb.Web-Projekts hinzu:

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

Fügen Sie der .Shared.Client-RCL die folgende InteractiveRenderSettings-Klasse hinzu. Die Klasseneigenschaften werden verwendet, um Komponentenrendermodi für serverbasierte Komponenten festzulegen.

Das MAUI-Projekt ist standardmäßig interaktiv, sodass keine Aktion auf Projektebene im MAUI-Projekt ausgeführt wird, außer beim Aufrufen von InteractiveRenderSettings.ConfigureBlazorHybridRenderModes.

Für die Blazor-Web App im Webclient werden die Eigenschaftswerte von RenderMode zugewiesen. Wenn die Komponenten in eine BlazorWebView für den systemeigenen Client des MAUI-Projekts geladen werden, sind die Rendermodi nicht zugewiesen (null), da das MAUI-Projekt die Rendermoduseigenschaften explizit auf null festlegt, wenn ConfigureBlazorHybridRenderModes aufgerufen wird.

InteractiveRenderSettings.cs (.Shared.Client-RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared;

public static class InteractiveRenderSettings
{
    public static IComponentRenderMode? InteractiveServer { get; set; } = 
        RenderMode.InteractiveServer;
    public static IComponentRenderMode? InteractiveAuto { get; set; } = 
        RenderMode.InteractiveAuto;
    public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
        RenderMode.InteractiveWebAssembly;

    public static void ConfigureBlazorHybridRenderModes()
    {
        InteractiveServer = null;
        InteractiveAuto = null;
        InteractiveWebAssembly = null;
    }
}

Der .Shared-RCL wird eine etwas andere Version der InteractiveRenderSettings-Klasse hinzugefügt. In der Klasse, die der .Shared-RCL hinzugefügt wurde, wird InteractiveRenderSettings.ConfigureBlazorHybridRenderModes der .Shared.Client-RCL aufgerufen. Dadurch wird sichergestellt, dass der Rendermodus von WebAssembly-Komponenten, die auf dem MAUI-Client gerendert werden, nicht zugewiesen sind (null), da sie standardmäßig auf dem systemeigenen Client interaktiv sind.

InteractiveRenderSettings.cs (.Shared-RCL):

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace MauiBlazorWeb.Shared
{
    public static class InteractiveRenderSettings
    {
        public static IComponentRenderMode? InteractiveServer { get; set; } = 
            RenderMode.InteractiveServer;
        public static IComponentRenderMode? InteractiveAuto { get; set; } = 
            RenderMode.InteractiveAuto;
        public static IComponentRenderMode? InteractiveWebAssembly { get; set; } = 
            RenderMode.InteractiveWebAssembly;

        public static void ConfigureBlazorHybridRenderModes()
        {
            InteractiveServer = null;
            InteractiveAuto = null;
            InteractiveWebAssembly = null;
            MauiBlazorWeb.Shared.Client.InteractiveRenderSettings
                .ConfigureBlazorHybridRenderModes();
        }
    }
}

In MauiProgram.CreateMauiApp von MauiProgram.csConfigureBlazorHybridRenderModes aufrufen:

InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();

Fügen Sie in der _Imports.razor-Datei der .Shared.Client-RCL @using static InteractiveRenderSettings hinzu, um die Eigenschaften der InteractiveRenderSettings-Klasse Komponenten zur Verfügung zu stellen:

@using static InteractiveRenderSettings

Hinweis

Die Zuweisung von Rendermodi über die InteractiveRenderSettings-Klasseneigenschaften der RCL unterscheidet sich von einer typischen eigenständigen Blazor-Web App. In einer Blazor-Web App werden die Rendermodi normalerweise über die @using static Microsoft.AspNetCore.Components.Web.RenderMode-Anweisung in der _Import-Datei der Blazor-Web App von RenderMode bereitgestellt.

Verwenden von Schnittstellen zur Unterstützung verschiedener Geräteimplementierungen

Im folgenden Beispiel wird veranschaulicht, wie Sie eine Schnittstelle verwenden, um verschiedene Implementierungen in der Web-App und der nativen (MAUI)-App aufzurufen. Im folgenden Beispiel wird eine Komponente erstellt, die den Geräteformfaktor anzeigt. Verwenden Sie die MAUI-Abstraktionsebene für systemeigene Apps und stellen Sie eine Implementierung für die Web-App bereit.

In der Razor-Klassenbibliothek (RCL) enthält ein Interfaces-Ordner eine IFormFactor-Schnittstelle.

Interfaces/IFormFactor.cs:

namespace MauiBlazorWeb.Shared.Interfaces;

public interface IFormFactor
{
    public string GetFormFactor();
    public string GetPlatform();
}

Die folgende DeviceFormFactor-Komponente ist im Ordner der RCL Components vorhanden.

Components/Pages/DeviceFormFactor.razor:

@page "/device-form-factor"
@using MauiBlazorWeb.Shared.Interfaces
@inject IFormFactor FormFactor

<PageTitle>Form Factor</PageTitle>

<h1>Device Form Factor</h1>

<p>You are running on:</p>

<ul>
    <li>Form Factor: @factor</li>
    <li>Platform: @platform</li>
</ul>

<p>
    <em>This component is defined in the MauiBlazorWeb.Shared library.</em>
</p>

@code {
    private string factor => FormFactor.GetFormFactor();
    private string platform => FormFactor.GetPlatform();
}

In der RCL ist ein Eintrag für die DeviceFormFactor-Komponente Teil des Navigationsmenüs in der NavMenu-Komponente.

In Components/Layout/NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="device-form-factor">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Form Factor
    </NavLink>
</div>

Das Web und native Apps enthalten die Implementierungen für IFormFactor.

In der Blazor-Web App enthält ein Ordner mit dem Namen Services die folgende FormFactor.cs-Datei mit der Implementierung für die FormFactor-Web-App-Verwendung.

Services/FormFactor.cs (Blazor-Web App-Projekt):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Web.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return "Web";
    }
    public string GetPlatform()
    {
        return Environment.OSVersion.ToString();
    }
}

Im MAUI-Projekt enthält ein Ordner mit dem Namen Services die folgende FormFactor.cs-Datei mit der Implementierung für die FormFactor systemeigene Verwendung. Die MAUI-Abstraktionsebene wird verwendet, um Code zu schreiben, der auf allen systemeigenen Geräteplattformen funktioniert.

Services/FormFactor.cs (MAUI-Projekt):

using MauiBlazorWeb.Shared.Interfaces;

namespace MauiBlazorWeb.Maui.Services;

public class FormFactor : IFormFactor
{
    public string GetFormFactor()
    {
        return DeviceInfo.Idiom.ToString();
    }
    public string GetPlatform()
    {
        return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
    }
}

Die Abhängigkeitsinjektion wird verwendet, um die Implementierungen dieser Dienste abzurufen.

Im MAUI-Projekt enthält die MauiProgram.cs-Datei folgende using-Anweisungen am Anfang der Datei:

using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;

Unmittelbar vor dem Aufruf von builder.Build() wird FormFactor registriert, um gerätespezifische Dienste hinzuzufügen, die von der RCL verwendet werden:

builder.Services.AddSingleton<IFormFactor, FormFactor>();

In der Blazor-Web App enthält die Program-Datei die folgenden using-Anweisungen am Anfang der Datei:

using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;  

Unmittelbar vor dem Aufruf von builder.Build() wird FormFactor registriert, um gerätespezifische Dienste hinzuzufügen, die von der Blazor-Web App verwendet werden:

builder.Services.AddScoped<IFormFactor, FormFactor>();

Wenn die Lösung auch auf WebAssembly über ein .Web.Client-Projekt ausgerichtet ist, ist auch eine Implementierung der vorherigen API im .Web.Client-Projekt erforderlich.

Sie können auch Compilervorprozessordirektiven in Ihrer RCL verwenden, um je nach Gerät, auf dem die App ausgeführt wird, unterschiedliche UI-Elemente zu implementieren. Für dieses Szenario muss die App die RCL, genau wie die MAUI-App, mit mehreren Zielen erreichen. Ein Beispiel finden Sie im GitHub-Repository BethMassi/BethTimeUntil.

Zusätzliche Ressourcen

• ASP.NET Core Blazor-Rendermodi
• Wiederverwenden von Razor-Komponenten in ASP.NET Core Blazor Hybrid-Apps