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-Lösungsvorlage
Die .NET MAUIBlazor Hybrid und Web App-Lösungsvorlage richtet eine Lösung ein, die auf Android, iOS, Mac, Windows und Web ausgerichtet ist, welche die Benutzeroberfläche wiederverwendet. Sie können einen Blazor interaktiven Rendermodus für die Web-App auswählen und die entsprechenden Projekte für die App erstellen, einschließlich einer Blazor-Web App und einer .NET MAUIBlazor Hybrid-App. Eine freigegebene Razor-Klassenbibliothek (RCL) verwaltet die Razor-Komponenten für die Benutzeroberfläche der App. Die Vorlage enthält außerdem Beispielcode, mit dem Sie zeigen können, wie Sie Abhängigkeitseinfügungen verwenden, um verschiedene Schnittstellenimplementierungen für die Blazor Hybrid- und Blazor-Web App bereitzustellen, die in den Verwendungsschnittstellen zur Unterstützung verschiedener Geräteimplementierungen in diesem Artikel behandelt wird.
Wenn Sie die .NET MAUI-Workload noch nicht installiert haben, installieren Sie sie jetzt. Die .NET MAUI-Arbeitsauslastung stellt die Projektvorlage bereit:
dotnet workload install maui
Erstellen Sie eine Projektmappe aus der Projektvorlage mit dem folgenden .NET CLI-Befehl:
dotnet new maui-blazor-web -o MauiBlazorWeb -I Server
Für den obigen Befehl gilt Folgendes:
- Die
-o|--output
-Option erstellt einen neuen Ordner für die App mit dem NamenMauiBlazorWeb
. - Die
-I|--InteractivityPlatform
-Option legt den Interaktivitäts-Rendermodus auf interaktiven Server (InteractiveServer
) fest. Alle drei interaktiven Blazor-Rendermodi (Server
,WebAssembly
undAuto
) werden von der Projektvorlage unterstützt. Weitere Informationen finden Sie im Abschnitt Verwenden von Blazor-Rendermodi.
Die App übernimmt automatisch globale Interaktivität, was wichtig ist, da MAUI-Apps immer interaktiv ausgeführt werden und Fehler auf Razor-Komponentenseiten auslösen, die einen Rendermodus explizit angeben. Weitere Informationen finden Sie unter BlazorWebView benötigt eine Möglichkeit, ResolveComponentForRenderMode (dotnet/aspnetcore
#51235) zu aktivieren.
.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
- Projektmappe:
- 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 in der Blazor-Web App entsprechen, aber die Rendermoduszuweisungen im MAUI-Projekt ignorieren.
Spezifikationsunterabschnitte des Rendermodus:
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
- Interaktiver Rendermodus: Server
- Interaktivitätsort: Global
- Projektmappenprojekte
- MAUI (
MauiBlazorWeb
) - Blazor-Web App (
MauiBlazorWeb.Web
) - RCL (
MauiBlazorWeb.Shared
): Enthält die freigegebenen Razor-Komponenten, ohne Rendermodi in jeder Komponente festzulegen.
- MAUI (
Projektverweise: MauiBlazorWeb
und MauiBlazorWeb.Web
haben einen Projektverweis auf MauiBlazorWeb.Shared
.
- 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.
- MAUI (
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
) - Blazor-Web-App
- Serverprojekt:
MauiBlazorWeb.Web
- Clientprojekt:
MauiBlazorWeb.Web.Client
- Serverprojekt:
- RCL (
MauiBlazorWeb.Shared
): Enthält die freigegebenen Razor-Komponenten, ohne Rendermodi in jeder Komponente festzulegen.
- MAUI (
Projektverweise:
- Die
MauiBlazorWeb
-,MauiBlazorWeb.Web
- undMauiBlazorWeb.Web.Client
-Projekte haben einen Projektverweis aufMauiBlazorWeb.Shared
. MauiBlazorWeb.Web
verfügt über einen Projektverweis aufMauiBlazorWeb.Web.Client
.
- Interaktiver Rendermodus: Auto oder WebAssembly
- Interaktivitätsort: Global
- Projektmappenprojekte
- MAUI (
MauiBlazorWeb.Maui
) - Blazor-Web-App
- Serverprojekt:
MauiBlazorWeb.Web
- Clientprojekt:
MauiBlazorWeb.Web.Client
- Serverprojekt:
- RCL (
MauiBlazorWeb.Shared
): Enthält die freigegebenen Razor-Komponenten, ohne Rendermodi in jeder Komponente festzulegen.
- MAUI (
Projektverweise:
- Die
MauiBlazorWeb.Maui
-,MauiBlazorWeb.Web
- undMauiBlazorWeb.Web.Client
-Projekte haben einen Projektverweis aufMauiBlazorWeb.Shared
. MauiBlazorWeb.Web
verfügt über einen Projektverweis aufMauiBlazorWeb.Web.Client
.
Interaktivität pro Seite/Komponente des Servers
- Interaktiver Rendermodus: Server
- Interaktivitätsort: Pro Seite/Komponente
- Projektmappenprojekte
- MAUI (
MauiBlazorWeb.Maui
): Aufruf vonInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
inMauiProgram.cs
. - Blazor-Web App (
MauiBlazorWeb.Web
): Legt kein@rendermode
-Direktive-Attribut für dieHeadOutlet
- undRoutes
-Komponenten derApp
-Komponente (Components/App.razor
) fest. - RCL (
MauiBlazorWeb.Shared
): Enthält die freigegebenen Razor-Komponenten, die denInteractiveServer
-Rendermodus in jeder Komponente festlegen.
- MAUI (
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.cs
ConfigureBlazorHybridRenderModes
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 vonInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
inMauiProgram.cs
. - Blazor-Web-App
- Serverprojekt:
MauiBlazorWeb.Web
: Legt kein@rendermode
-Direktive-Attribut für dieHeadOutlet
- undRoutes
-Komponenten derApp
-Komponente (Components/App.razor
) fest. - Clientprojekt:
MauiBlazorWeb.Web.Client
- Serverprojekt:
- RCL (
MauiBlazorWeb.Shared
): Enthält die freigegebenen Razor-Komponenten, die denInteractiveAuto
-Rendermodus in jeder Komponente festlegen.
- MAUI (
Projektverweise:
MauiBlazorWeb.Maui
,MauiBlazorWeb.Web
undMauiBlazorWeb.Web.Client
haben einen Projektverweis aufMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
verfügt über einen Projektverweis aufMauiBlazorWeb.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.cs
ConfigureBlazorHybridRenderModes
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 dieHeadOutlet
- undRoutes
-Komponenten derApp
-Komponente (Components/App.razor
) fest. - Clientprojekt:
MauiBlazorWeb.Web.Client
- Serverprojekt:
- RCLs
MauiBlazorWeb.Shared
MauiBlazorWeb.Shared.Client
: Enthält die freigegebenen Razor-Komponenten, die denInteractiveWebAssembly
-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.
- MAUI (
Projektverweise:
MauiBlazorWeb.Maui
undMauiBlazorWeb.Web
haben Projektverweise aufMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
verfügt über einen Projektverweis aufMauiBlazorWeb.Web.Client
.MauiBlazorWeb.Web.Client
undMauiBlazorWeb.Shared
haben einen Projektverweis aufMauiBlazorWeb.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.cs
ConfigureBlazorHybridRenderModes
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 Home
-Komponente (Components/Pages/Home.razor
) der RCL zeigt den Formfaktor und die Plattform an.
Components/Pages/Home.razor
:
@page "/"
@using MyApp.Shared.Services
@inject IFormFactor FormFactor
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app running on <em>@factor</em> using <em>@platform</em>.
@code {
private string factor => FormFactor.GetFormFactor();
private string platform => FormFactor.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.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return DeviceInfo.Idiom.ToString();
}
public string GetPlatform()
{
return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
}
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.Services;
using MauiBlazorWeb.Shared.Interfaces;
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