Héberger une application web Blazor dans une application .NET MAUI à l’aide de BlazorWebView

Article
02/13/2024

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) BlazorWebView est un contrôle qui vous permet d’héberger une application web Blazor dans votre application .NET MAUI. Ces applications, appelées applications Hybrides Blazor, permettent à une application web Blazor d’être intégrée aux fonctionnalités de la plateforme et aux contrôles d’interface utilisateur. Le BlazorWebView contrôle peut être ajouté à n’importe quelle page d’une application .NET MAUI et pointé vers la racine de l’application Blazor. Les composants Razor s’exécutent en mode natif dans le processus .NET et affichent l’interface utilisateur web dans un contrôle d’affichage web incorporé. Dans .NET MAUI, les applications Blazor Hybrid peuvent s’exécuter sur toutes les plateformes prises en charge par .NET MAUI.

BlazorWebView définit les propriétés suivantes :

HostPage, de type string?, qui définit la page racine de l’application web Blazor.
RootComponents, de type RootComponentsCollection, qui spécifie la collection de composants racines qui peuvent être ajoutés au contrôle.

HostPage, de type string?, qui définit la page racine de l’application web Blazor.
RootComponents, de type RootComponentsCollection, qui spécifie la collection de composants racines qui peuvent être ajoutés au contrôle.
StartPath, de type string, qui définit le chemin d’accès pour la navigation initiale dans le contexte de navigation Blazor lorsque le composant Blazor est terminé le chargement.

La RootComponent classe définit les propriétés suivantes :

Selector, de type string?, qui définit la chaîne de sélecteur CSS qui spécifie où dans le document, le composant doit être placé.
ComponentType, de type Type?, qui définit le type du composant racine.
Parameters, de type IDictionary<string, object?>?, qui représente un dictionnaire facultatif de paramètres à passer au composant racine.

En outre, BlazorWebView définit les événements suivants :

BlazorWebViewInitializing, avec un objet associé BlazorWebViewInitializingEventArgs , qui est déclenché avant l’initialisation BlazorWebView . Cet événement active la personnalisation de la BlazorWebView configuration.
BlazorWebViewInitialized, avec un objet associé BlazorWebViewInitializedEventArgs , qui est déclenché après l’initialisation BlazorWebView , mais avant le rendu d’un composant. Cet événement permet la récupération de l’instance d’affichage web spécifique à la plateforme.
UrlLoading, avec un objet associé UrlLoadingEventArgs , est déclenché lorsqu’un lien hypertexte est cliqué dans un BlazorWebView. Cet événement permet de personnaliser si un lien hypertexte est ouvert dans l’application BlazorWebViewexterne ou si la tentative de chargement d’URL est annulée.

Les composants Razor existants peuvent être utilisés dans une application .NET MAUI Blazor en déplaçant le code dans l’application, ou en référençant une bibliothèque de classes ou un package existant qui contient le composant. Pour plus d’informations, consultez Réutiliser les composants Razor dans ASP.NET Core Blazor Hybrid.

Les outils de développement du navigateur peuvent être utilisés pour inspecter les applications .NET MAUI Blazor. Pour plus d’informations, consultez Utiliser les outils de développement de navigateur avec ASP.NET Core Blazor Hybrid.

Remarque

Alors que Visual Studio installe tous les outils nécessaires pour développer des applications .NET MAUI Blazor, les utilisateurs finaux des applications .NET MAUI Blazor sur Windows doivent installer le runtime WebView2 .

Pour plus d’informations sur les applications Blazor Hybrid, consultez ASP.NET Core Blazor Hybrid.

Créer une application .NET MAUI Blazor

Une application .NET MAUI Blazor peut être créée dans Visual Studio par le modèle d’application .NET MAUI Blazor :

.NET MAUI Blazor app project template screenshot.

Ce modèle de projet crée une application .NET MAUI Blazor multi-ciblée qui peut être déployée sur Android, iOS, macOS et Windows. Pour obtenir des instructions pas à pas sur la création d’une application .NET MAUI Blazor, consultez Créer une application .NET MAUI Blazor.

Le BlazorWebView modèle de projet créé est défini dans MainPage.xaml et pointe vers la racine de l’application Blazor :

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

Le composant Razor racine de l’application se trouve dans Main.razor, que Razor compile dans un type nommé Main dans l’espace de noms racine de l’application. Le reste des composants Razor se trouvent dans les dossiers de projets Pages et Partagés , et sont identiques aux composants utilisés dans le modèle web Blazor par défaut. Les ressources web statiques de l’application se trouvent dans le dossier wwwroot .

Ajouter un BlazorWebView à une application existante

Le processus d’ajout d’une BlazorWebView application .NET MAUI existante est le suivant :

Ajoutez le Kit de développement logiciel (SDK) Microsoft.NET.Sdk.Razor Razor à votre projet en modifiant sa première ligne du fichier projet CSPROJ :
```
<Project Sdk="Microsoft.NET.Sdk.Razor">
```
Le Kit de développement logiciel (SDK) Razor est nécessaire pour générer et empaqueter des projets Razor contenant des fichiers Razor pour les projets Blazor.
Ajoutez le composant Razor racine de l’application au projet.
Ajoutez vos composants Razor aux dossiers de projet nommés Pages et Partagés.
Ajoutez vos ressources web statiques à un dossier de projet nommé wwwroot.
Ajoutez tous les fichiers _Imports.razor facultatifs à votre projet.

Ajoutez une BlazorWebView page dans votre application .NET MAUI et pointez-la à la racine de l’application Blazor :

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

Modifiez la CreateMauiApp méthode de votre MauiProgram classe pour inscrire le BlazorWebView contrôle à utiliser dans votre application. Pour ce faire, sur l’objet IServiceCollection , appelez la AddMauiBlazorWebView méthode pour ajouter des services de vue web de composant à la collection de services :

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

Accédez aux services délimités à partir de l’interface utilisateur native

BlazorWebView a une TryDispatchAsync méthode qui peut appeler une méthode spécifiée Action<ServiceProvider> de manière asynchrone et transmettre les services délimités disponibles dans les composants Razor. Cela permet au code de l’interface utilisateur native d’accéder aux services délimités tels que 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.
    }
}

Problèmes de diagnostic

BlazorWebView a une journalisation intégrée qui peut vous aider à diagnostiquer les problèmes dans votre application Blazor Hybrid. Il existe deux étapes pour activer cette journalisation :

Activez BlazorWebView et les composants associés pour consigner les informations de diagnostic.
Configurez un enregistreur d’événements pour écrire la sortie du journal dans laquelle vous pouvez l’afficher.

Pour plus d’informations sur la journalisation, consultez Journalisation en C# et .NET.

Activer la journalisation BlazorWebView

Toutes les configurations de journalisation peuvent être effectuées dans le cadre de l’inscription de service dans le système d’injection de dépendances. Pour activer la journalisation maximale pour BlazorWebView et les composants associés sous l’espace Microsoft.AspNetCore.Components.WebView de noms, ajoutez le code suivant à l’emplacement où les services de votre application sont inscrits :

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

Vous pouvez également activer la journalisation maximale pour chaque composant qui utilise Microsoft.Extensions.Logging, vous pouvez utiliser le code suivant :

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

Configurer la sortie de journalisation et afficher la sortie

Après avoir configuré des composants pour écrire des informations de journal, vous devez configurer l’emplacement où les enregistreurs d’événements doivent écrire les journaux, puis afficher la sortie du journal.

Les fournisseurs de journalisation de débogage écrivent la sortie à l’aide Debug d’instructions, et la sortie peut être consultée à partir de Visual Studio.

Pour configurer le fournisseur de journalisation de débogage , ajoutez d’abord une référence dans votre projet au Microsoft.Extensions.Logging.Debug package NuGet. Ensuite, inscrivez le fournisseur à l’intérieur de l’appel auquel AddLogging vous avez ajouté à l’étape précédente en appelant la AddDebug méthode d’extension :

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

Lorsque vous exécutez l’application à partir de Visual Studio (avec débogage activé), vous pouvez afficher la sortie de débogage dans la fenêtre Sortie de Visual Studio.