Hosten einer Blazor-Web-App in einer .NET MAUI-App mit BlazorWebView

Artikel
02/13/2024

Die .NET Multi-Platform App UI (.NET MAUI) BlazorWebView ist ein Steuerelement, mit dem Sie eine Blazor-Web-App in Ihrer .NET MAUI-App hosten können. Diese Apps, die als Blazor Hybrid-Apps bezeichnet werden, ermöglichen eine Blazor-Web-App, die in Plattformfeatures und UI-Steuerelemente integriert werden kann. Das BlazorWebView Steuerelement kann einer beliebigen Seite einer .NET MAUI-App hinzugefügt und auf den Stamm der Blazor-App verwiesen werden. Die Razor-Komponenten werden nativ im .NET-Prozess ausgeführt und rendern Web-UI in einem eingebetteten Webansichtssteuerelement. In .NET MAUI können Blazor Hybrid-Apps auf allen Plattformen ausgeführt werden, die von .NET MAUI unterstützt werden.

BlazorWebView definiert die folgenden Eigenschaften:

HostPage, vom Typ string?, der die Stammseite der Blazor-Web-App definiert.
RootComponents, vom Typ RootComponentsCollection, der die Auflistung der Stammkomponenten angibt, die dem Steuerelement hinzugefügt werden können.

HostPage, vom Typ string?, der die Stammseite der Blazor-Web-App definiert.
RootComponents, vom Typ RootComponentsCollection, der die Auflistung der Stammkomponenten angibt, die dem Steuerelement hinzugefügt werden können.
StartPath, vom Typ string, der den Pfad für die anfängliche Navigation im Blazor-Navigationskontext definiert, wenn die Blazor-Komponente geladen ist.

Die RootComponent-Klasse definiert die folgenden Eigenschaften:

Selector, vom Typ string?, der die CSS-Selektorzeichenfolge definiert, die angibt, wo im Dokument die Komponente platziert werden soll.
ComponentType, vom Typ Type?, der den Typ der Stammkomponente definiert.
Parameters, vom Typ IDictionary<string, object?>?, das ein optionales Wörterbuch mit Parametern darstellt, die an die Stammkomponente übergeben werden sollen.

Definiert außerdem BlazorWebView die folgenden Ereignisse:

BlazorWebViewInitializing, mit einem begleitenden BlazorWebViewInitializingEventArgs Objekt, das vor der BlazorWebView Initialisierung ausgelöst wird. Dieses Ereignis ermöglicht die Anpassung der BlazorWebView Konfiguration.
BlazorWebViewInitialized, mit einem zugehörigen BlazorWebViewInitializedEventArgs Objekt, das nach der BlazorWebView Initialisierung ausgelöst wird, aber bevor eine Komponente gerendert wurde. Dieses Ereignis ermöglicht das Abrufen der plattformspezifischen Webansichtsinstanz.
UrlLoadingwird mit einem zugehörigen UrlLoadingEventArgs Objekt ausgelöst, wenn innerhalb eines BlazorWebViewLinks geklickt wird. Dieses Ereignis ermöglicht die Anpassung, ob ein Link in einer BlazorWebViewexternen App geöffnet wird oder ob der URL-Ladeversuch abgebrochen wird.

Vorhandene Razor-Komponenten können in einer .NET MAUI Blazor-App verwendet werden, indem sie den Code in die App verschieben oder auf eine vorhandene Klassenbibliothek oder ein vorhandenes Paket verweisen, das die Komponente enthält. Weitere Informationen finden Sie unter Wiederverwenden von Razor-Komponenten in ASP.NET Core Blazor Hybrid.

Browserentwicklertools können verwendet werden, um .NET MAUI Blazor-Apps zu prüfen. Weitere Informationen finden Sie unter Verwenden von Browserentwicklertools mit ASP.NET Core Blazor Hybrid.

Hinweis

Während Visual Studio alle erforderlichen Tools zum Entwickeln von .NET MAUI Blazor-Apps installiert, müssen Endbenutzer von .NET MAUI Blazor-Apps unter Windows die WebView2-Laufzeit installieren.

Weitere Informationen zu Blazor Hybrid-Apps finden Sie unter ASP.NET Core Blazor Hybrid.

Erstellen einer .NET MAUI Blazor-App

Eine .NET MAUI Blazor-App kann in Visual Studio mithilfe der .NET MAUI Blazor-App-Vorlage erstellt werden:

.NET MAUI Blazor app project template screenshot.

Diese Projektvorlage erstellt eine mehrorientierte .NET MAUI Blazor-App, die für Android, iOS, macOS und Windows bereitgestellt werden kann. Schrittweise Anleitungen zum Erstellen einer .NET MAUI Blazor-App finden Sie unter Erstellen einer .NET MAUI Blazor-App.

Die BlazorWebView von der Projektvorlage erstellte Vorlage wird in "MainPage.xaml" definiert und verweist auf den Stamm der Blazor-App:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorWebViewDemo"
             x:Class="BlazorWebViewDemo.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

Die Razor-Stammkomponente für die App befindet sich in Main.razor, die Razor in einen Typ kompiliert, der im Stammnamespace der Anwendung benannt istMain. Die restlichen Razor-Komponenten befinden sich in den Ordnern "Seiten" und "Freigegebene Projekte" und sind identisch mit den Komponenten, die in der Standard-Blazor-Webvorlage verwendet werden. Statische Webressourcen für die App befinden sich im Ordner "wwwroot ".

Hinzufügen einer BlazorWebView zu einer vorhandenen App

Der Prozess zum Hinzufügen einer BlazorWebView vorhandenen .NET MAUI-App lautet wie folgt:

Fügen Sie dem Projekt das Razor SDK hinzu, Microsoft.NET.Sdk.Razor indem Sie die erste Zeile der CSPROJ-Projektdatei bearbeiten:
```
<Project Sdk="Microsoft.NET.Sdk.Razor">
```
Das Razor SDK ist erforderlich, um Projekte zu erstellen und zu verpacken, die Razor-Dateien für Blazor-Projekte enthalten.
Fügen Sie die Razor-Stammkomponente für die App zum Projekt hinzu.
Fügen Sie Ihre Razor-Komponenten zu Projektordnern namens "Seiten" und "Freigegeben" hinzu.
Fügen Sie Ihre statischen Webressourcen zu einem Projektordner mit dem Namen "wwwroot" hinzu.
Fügen Sie ihrem Projekt optionale _Imports.razor-Dateien hinzu.

Fügen Sie einer Seite in Ihrer .NET MAUI-App eine BlazorWebView Seite hinzu, und zeigen Sie sie auf das Stammverzeichnis der Blazor-App:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyBlazorApp"
             x:Class="MyBlazorApp.MainPage">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

Ändern Sie die CreateMauiApp Methode Ihrer MauiProgram Klasse, um das Steuerelement für die BlazorWebView Verwendung in Ihrer App zu registrieren. Rufen Sie dazu im IServiceCollection Objekt die AddMauiBlazorWebView Methode auf, um der Dienstauflistung Komponentenwebansichtsdienste hinzuzufügen:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

Zugreifen auf bereichsbezogene Dienste über die native Benutzeroberfläche

BlazorWebView verfügt über eine TryDispatchAsync Methode, die einen angegebenen Action<ServiceProvider> asynchronen Aufruf ausführen und die in Razor-Komponenten verfügbaren bereichsbezogenen Dienste übergeben kann. Auf diese Weise kann Code über die native Benutzeroberfläche auf bereichsbezogene Dienste zugreifen, z. B. NavigationManager:

private async void OnMyMauiButtonClicked(object sender, EventArgs e)
{
    var wasDispatchCalled = await blazorWebView.TryDispatchAsync(sp =>
    {
        var navMan = sp.GetRequiredService<NavigationManager>();
        navMan.CallSomeNavigationApi(...);
    });

    if (!wasDispatchCalled)
    {
        // Consider what to do if it the dispatch fails - that's up to your app to decide.
    }
}

Diagnostizieren von Problemen

BlazorWebView verfügt über integrierte Protokollierung, mit der Sie Probleme in Ihrer Blazor Hybrid-App diagnostizieren können. Es gibt zwei Schritte zum Aktivieren dieser Protokollierung:

Aktivieren Sie BlazorWebView und verwandte Komponenten zum Protokollieren von Diagnoseinformationen.
Konfigurieren Sie einen Logger, um die Protokollausgabe an die Stelle zu schreiben, an der sie angezeigt werden kann.

Weitere Informationen zur Protokollierung finden Sie unter Protokollierung in C# und .NET.

BlazorWebView-Protokollierung aktivieren

Alle Protokollierungskonfigurationen können als Teil der Dienstregistrierung im Abhängigkeitseinfügungssystem ausgeführt werden. Um die maximale Protokollierung für BlazorWebView und zugehörige Komponenten unter dem Microsoft.AspNetCore.Components.WebView Namespace zu aktivieren, fügen Sie den folgenden Code hinzu, in dem die Dienste Ihrer App registriert sind:

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
});

Alternativ können Sie zum Aktivieren der maximalen Protokollierung für jede Komponente, die verwendet Microsoft.Extensions.Loggingwird, den folgenden Code verwenden:

services.AddLogging(logging =>
{
    logging.SetMinimumLevel(LogLevel.Trace);
});

Konfigurieren der Protokollierungsausgabe und Anzeigen der Ausgabe

Nach dem Konfigurieren von Komponenten zum Schreiben von Protokollinformationen müssen Sie konfigurieren, wo die Logger die Protokolle schreiben sollen, und dann die Protokollausgabe anzeigen.

Die Debugprotokollierungsanbieter schreiben die Ausgabe mithilfe von Debug Anweisungen, und die Ausgabe kann aus Visual Studio angezeigt werden.

Um den Debugprotokollierungsanbieter zu konfigurieren, fügen Sie zunächst einen Verweis in Ihr Projekt zum Microsoft.Extensions.Logging.Debug NuGet-Paket hinzu. Registrieren Sie dann den Anbieter innerhalb des Aufrufs AddLogging , den Sie im vorherigen Schritt hinzugefügt haben, indem Sie die AddDebug Erweiterungsmethode aufrufen:

services.AddLogging(logging =>
{
    logging.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
    logging.AddDebug();
});

Wenn Sie die App aus Visual Studio (mit aktiviertem Debuggen) ausführen, können Sie die Debugausgabe im Ausgabefenster von Visual Studio anzeigen.