Créer une application .NET MAUIBlazor Hybrid avec une Blazor Web App
Cet article vous montre comment créer une application .NET MAUIBlazor Hybrid avec une Blazor Web App qui utilise une interface utilisateur partagée via une bibliothèque de classes Razor (RCL).
Prérequis et étapes préliminaires
Pour connaître les prérequis et les étapes préliminaires, consultez Créer une application .NET MAUIBlazor Hybrid. Nous vous recommandons d’utiliser le didacticiel .NET MAUIBlazor Hybrid afin de configurer votre système local pour le développement de .NET MAUI avant d’utiliser les instructions de cet article.
L’application .NET MAUIBlazor Hybrid et modèle de solution d’application web
L’application .NET MAUIBlazor Hybrid et le modèle de solution d’application web configurent une solution qui cible Android, iOS, Mac, Windows et Web qui réutilise l’interface utilisateur. Vous pouvez choisir un mode de rendu interactif Blazor pour l’application web afin qu’il crée les projets appropriés pour l’application, notamment une Blazor Web App et une application .NET MAUIBlazor Hybrid. Une bibliothèque de classes (RCL) Razor partagée maintient les composants Razor pour l’interface utilisateur de l’application. Le modèle fournit également un exemple de code pour vous montrer comment utiliser une injection de dépendance pour offrir différentes implémentations d’interface pour Blazor Hybrid et Blazor Web App. Cela est abordé dans la section Utiliser des interfaces pour prendre en charge différentes implémentations d’appareil de cet article.
Si vous n’avez pas encore installé la charge de travail .NET MAUI, installez-la maintenant. La charge de travail .NET MAUI fournit le modèle de projet :
dotnet workload install maui
Créez une solution à partir du modèle de projet avec la commande .NET CLI suivante :
dotnet new maui-blazor-web -o MauiBlazorWeb -I Server
Dans la commande précédente :
- L’option
-o|--output
crée un nouveau dossier pour l’application nomméeMauiBlazorWeb
. - L’option
-I|--InteractivityPlatform
définit le mode de rendu d’interactivité au serveur interactifInteractiveServer
. Les trois modes de rendu Blazor interactif (Server
,WebAssembly
etAuto
) sont pris en charge par le modèle de projet. Pour en savoir plus, consultez la section Utiliser des modes de renduBlazor.
L’application adopte automatiquement une interactivité globale qui est importante car les applications MAUI s’exécutent toujours interactivement et lève des erreurs sur des pages de composant Razor qui spécifient explicitement un mode de rendu. Pour plus d’informations, consultez BlazorWebView a besoin d’un moyen d’activer le contournement de ResolveComponentForRenderMode (dotnet/aspnetcore
#51235).
.NET MAUIBlazor Hybrid et l’application d’exemple d’application web
Obtenir l’exemple d’application nommé MauiBlazorWeb
à partir du dépôt GitHub d’exemples de Blazor (dotnet/blazor-samples
) (.NET 8 ou version ultérieure).
L’exemple d’application est une solution de démarrage qui contient une application .NET MAUIBlazor Hybrid (native et multiplateforme), une Blazor Web App et une bibliothèque de classes Razor (RCL) qui contient l’interface utilisateur partagée (composants Razor) utilisée par les applications web et natives.
Migration d’une solution .NET MAUIBlazor Hybrid
Au lieu d’utiliser l’exemple d’application, vous pouvez migrer une application .NET MAUIBlazor Hybrid existante avec les instructions de cette section à l’aide de Visual Studio.
Ajoutez un nouveau projet à la solution avec le modèle de projet Blazor Web App. Sélectionnez les options suivantes :
- Nom du projet : Utilisez le nom de la solution avec
.Web
ajouté. Les exemples fournit dans cet article présument les désignations suivantes :- Solution :
MauiBlazorWeb
- Projet MAUI :
MauiBlazorWeb.Maui
- Blazor Web App:
MauiBlazorWeb.Web
- Bibliothèque de classes (RCL) Razor (ajoutée à une étape ultérieure) :
MauiBlazorWeb.Shared
- Solution :
- Type d’authentification : Aucun
- Configurer pour HTTPS : Sélectionné (activé)
- Mode de rendu interactif : Serveur
- Emplacement d’interactivité : Global
- Exemples de pages : non sélectionné (désactivé)
Le paramètre d’emplacement d’interactivité sur Global est important car les applications MAUI s’exécutent toujours de manière interactive et renvoient des erreurs sur les pages de composants Razor qui spécifient explicitement un mode de rendu. Si vous n’utilisez pas de mode de rendu global, vous devez utiliser l’approche décrite dans la section Utiliser les modes de renduBlazor après avoir suivi les instructions dans cette section. Pour plus d’informations, consultez BlazorWebView a besoin d’un moyen d’activer le contournement de ResolveComponentForRenderMode (dotnet/aspnetcore
#51235).
Ajoutez un nouveau projet Razor bibliothèque de classes (RCL) à la solution. Les exemples de cet article supposent que le projet est nommé MauiBlazorWeb.Shared
. Ne sélectionnez pas Vues et pages de support lorsque vous ajoutez le projet à la solution.
Ajoutez des références de projet à la RCL depuis le projet MAUI et du projet Blazor Web App.
Déplacez le dossier Components
et tout son contenu depuis le projet MAUI vers la liste RCL. Vérifiez que le dossier Components
est supprimé du projet MAUI.
Conseil
Lors du déplacement d’un dossier ou d’un fichier dans Visual Studio, utilisez des raccourcis clavier ou le menu contextuel en cliquant avec le bouton droit sur une opération couper-coller. Glisser le dossier dans Visual Studio copie uniquement depuis un emplacement vers un autre, ce qui nécessite une étape supplémentaire pour supprimer l’original.
Déplacez le dossier css
depuis le dossier wwwroot
du projet MAUI vers le dossier RCL wwwroot
.
Supprimez les fichiers suivants du dossier RCL wwwroot
:
background.png
exampleJsInterop.js
Dans la liste RCL, remplacez le fichier racine _Imports.razor
par celui du dossier RCL Components
, en remplaçant le fichier existant dans la liste RCL et en supprimant l’original dans le dossier Components
. Après avoir déplacé le fichier, ouvrez-le et renommez les deux dernières états @using
pour qu’ils correspondent à l’espace de noms du RCL. Dans l’exemple suivant, l’espace de noms RCL est MauiBlazorWeb.Shared
:
@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components
À la racine du projet RCL, supprimez les fichiers suivants :
Component1.razor
ExampleJsInterop.cs
Dans la liste RCL, ouvrez le fichier Components/Routes.razor
et remplacez MauiProgram
par Routes
:
- <Router AppAssembly="@typeof(MauiProgram).Assembly">
+ <Router AppAssembly="@typeof(Routes).Assembly">
Ouvrez le fichier MainPage.xaml
dans le projet MAUI. Ajoutez une référence xmlns:shared
au RCL dans les attributs ContentPage. Dans l’exemple suivant, l’espace de noms RCL est MauiBlazorWeb.Shared
. Définissez la bonne valeur pour les clr-namespace
et les assembly
:
xmlns:shared="clr-namespace:MauiBlazorWeb.Shared;assembly=MauiBlazorWeb.Shared"
Également dans le fichier MainPage.xaml
, mettez à jour le composant racine BlazorWebView ComponentType de local
à shared
:
- <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
+ <RootComponent Selector="#app" ComponentType="{x:Type shared:Components.Routes}" />
Dans le projet MAUI, ouvrez le fichier wwwroot/index.html
et modifiez les feuilles de style pour pointer vers le chemin d’accès des ressources statiques du RCL.
Supprimez les lignes suivantes :
- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
- <link rel="stylesheet" href="css/app.css" />
Remplacez les lignes précédentes par le code suivant. Dans l’exemple suivant, le chemin d'accès à la ressource statique de RCL est _content/MauiBlazorWeb.Shared/
:
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />
Dans la Blazor Web App, ouvrez le fichier _Imports.razor
et ajoutez les deux instructions @using
suivantes pour la liste RCL. Dans l’exemple suivant, l’espace de noms RCL est MauiBlazorWeb.Shared
:
@using MauiBlazorWeb.Shared
@using MauiBlazorWeb.Shared.Components
Dans le projet Blazor Web App, ouvrez le composant App
(Components/App.razor
). Supprimez la feuille de style app.css
:
- <link rel="stylesheet" href="app.css" />
Remplacez la ligne précédente par les références de feuille de style de ressource statique RCL. Dans l’exemple suivant, le chemin d'accès à la ressource statique de RCL est _content/MauiBlazorWeb.Shared/
:
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="_content/MauiBlazorWeb.Shared/css/app.css" />
Dans le projet Blazor Web App, supprimez le dossier et les fichiers suivants :
Components/Layout
Components/Routes.razor
Components/Pages/Home.razor
wwwroot/app.css
Ouvrez le fichier Program.cs
de la Blazor Web App et ajoutez un assembly supplémentaire pour la bibliothèque RCL à l’application. Dans l’exemple suivant, l’espace de noms RCL est MauiBlazorWeb.Shared
:
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly);
Exécutez le projet MAUI en sélectionnant le projet dans Explorateur de solutions et en utilisant le bouton Démarrer de Visual Studio.
Exécutez le projet Blazor Web App en sélectionnant le projet Blazor Web App dans Explorateur de solutions et en utilisant le bouton Démarrer de Visual Studio avec la configuration de build https
.
Si vous recevez une erreur de génération indiquant que l’assembly RCL ne peut pas être résolu, générez d’abord le projet RCL. Si des erreurs de ressource de projet MAUI surviennent lors de la génération, régénérez le projet MAUI afin de supprimer les erreurs.
Utiliser les modes de rendu Blazor
Utilisez les instructions de l’une des sous-sections suivantes qui correspond aux spécifications de votre application pour appliquer les modes de rendu Blazor dans la Blazor Web App, mais ignorez les affectations de mode de rendu dans le projet MAUI.
Sous-sections de spécification de mode de rendu :
Utilisez les instructions de l’une des sous-sections suivantes qui correspond aux spécifications de votre application pour appliquer les modes de rendu Blazor pour un emplacement d’interactivité donné dans la Blazor Web App, mais ignorez les affectations de mode de rendu dans le projet MAUI.
Sous-sections des spécifications de mode de rendu et d’interactivité :
Interactivité de serveur global
- Mode de rendu interactif : Serveur
- Emplacement d’interactivité : Global
- Projets de solution
- MAUI (
MauiBlazorWeb
) - Blazor Web App (
MauiBlazorWeb.Web
) - RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor sans définir de modes de rendu dans chaque composant.
- MAUI (
Références de projet : MauiBlazorWeb
et MauiBlazorWeb.Web
ont une référence de projet à MauiBlazorWeb.Shared
.
- Mode de rendu interactif : Serveur
- Emplacement d’interactivité : Global
- Projets de solution
- MAUI (
MauiBlazorWeb.Maui
) - Blazor Web App (
MauiBlazorWeb.Web
) - RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor sans définir de modes de rendu dans chaque composant.
- MAUI (
Références de projet : MauiBlazorWeb.Maui
et MauiBlazorWeb.Web
ont une référence de projet à MauiBlazorWeb.Shared
.
Interactivité globale auto ou WebAssembly
- Mode de rendu interactif : Automatique ou WebAssembly
- Emplacement d’interactivité : Global
- Projets de solution
- MAUI (
MauiBlazorWeb
) - Blazor Web App
- Projet de serveur :
MauiBlazorWeb.Web
- Projet client :
MauiBlazorWeb.Web.Client
- Projet de serveur :
- RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor sans définir de modes de rendu dans chaque composant.
- MAUI (
Références du projet :
- Les projets
MauiBlazorWeb
,MauiBlazorWeb.Web
, etMauiBlazorWeb.Web.Client
ont une référence de projet àMauiBlazorWeb.Shared
. MauiBlazorWeb.Web
a une référence de projet àMauiBlazorWeb.Web.Client
.
- Mode de rendu interactif : Automatique ou WebAssembly
- Emplacement d’interactivité : Global
- Projets de solution
- MAUI (
MauiBlazorWeb.Maui
) - Blazor Web App
- Projet de serveur :
MauiBlazorWeb.Web
- Projet client :
MauiBlazorWeb.Web.Client
- Projet de serveur :
- RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor sans définir de modes de rendu dans chaque composant.
- MAUI (
Références du projet :
- Les projets
MauiBlazorWeb.Maui
,MauiBlazorWeb.Web
, etMauiBlazorWeb.Web.Client
ont une référence de projet àMauiBlazorWeb.Shared
. MauiBlazorWeb.Web
a une référence de projet àMauiBlazorWeb.Web.Client
.
Interactivité server par page/composant
- Mode de rendu interactif : Serveur
- Emplacement d’interactivité : Par page/composant
- Projets de solution
- MAUI (
MauiBlazorWeb
) : AppelsInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
dansMauiProgram.cs
. - Blazor Web App (
MauiBlazorWeb.Web
) : ne définit pas d’attribut de directive@rendermode
sur les composantsHeadOutlet
etRoutes
du composantApp
(Components/App.razor
). - RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor qui définissent les de modes de renduInteractiveServer
dans chaque composant.
- MAUI (
MauiBlazorWeb
et MauiBlazorWeb.Web
ont une référence de projet à MauiBlazorWeb.Shared
.
Ajoutez la classe InteractiveRenderSettings
suivante à la liste RCL. Les propriétés de classe sont utilisées pour définir les modes de rendu des composants.
Le projet MAUI est interactif par défaut. Par conséquent, aucune action n’est effectuée au niveau du projet MAUI autre que l’appel de InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Pour la Blazor Web App sur le client web, les valeurs de propriété sont affectées à partir de RenderMode. Lorsque les composants sont chargés dans un BlazorWebView pour le client natif du projet MAUI, les modes de rendu ne sont pas attribués (null
), car le projet MAUI définit explicitement les propriétés du mode de rendu sur null
lorsque ConfigureBlazorHybridRenderModes
est appelé.
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;
}
}
Dans MauiProgram.CreateMauiApp
de MauiProgram.cs
, appelez ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
Dans le _Imports.razor
fichier de la .Shared
bibliothèque RCL, remplacez l’instruction @using
par Microsoft.AspNetCore.Components.Web.RenderMode une @using
instruction pour InteractiveRenderSettings
rendre les propriétés de la InteractiveRenderSettings
classe disponibles pour les composants :
- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings
Remarque
L’affectation des modes de rendu via les propriétés de classe RCL InteractiveRenderSettings
diffère d’une Blazor Web App autonome classique. Dans un Blazor Web App, les modes de rendu sont normalement fournis dans RenderMode le Blazor Web Appfichier du _Import
fichier.
Interactivité automatique par page/composant
- Mode de rendu interactif : Automatique
- Emplacement d’interactivité : Par page/composant
- Projets de solution
- MAUI (
MauiBlazorWeb
) : AppelsInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
dansMauiProgram.cs
. - Blazor Web App
- Projet de serveur:
MauiBlazorWeb.Web
: Ne définit pas d’attribut de directive@rendermode
sur les composantsHeadOutlet
etRoutes
du composantApp
(Components/App.razor
). - Projet client :
MauiBlazorWeb.Web.Client
- Projet de serveur:
- RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor qui définissent les de modes de renduInteractiveAuto
dans chaque composant.
- MAUI (
Références du projet :
MauiBlazorWeb
,MauiBlazorWeb.Web
etMauiBlazorWeb.Web.Client
ont une référence de projet àMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
a une référence de projet àMauiBlazorWeb.Web.Client
.
Ajoutez la classe InteractiveRenderSettings
suivante est ajoutée à la liste RCL. Les propriétés de classe sont utilisées pour définir les modes de rendu des composants.
Le projet MAUI est interactif par défaut. Par conséquent, aucune action n’est effectuée au niveau du projet MAUI autre que l’appel de InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Pour la Blazor Web App sur le client web, les valeurs de propriété sont affectées à partir de RenderMode. Lorsque les composants sont chargés dans un BlazorWebView pour le client natif du projet MAUI, les modes de rendu ne sont pas attribués (null
), car le projet MAUI définit explicitement les propriétés du mode de rendu sur null
lorsque ConfigureBlazorHybridRenderModes
est appelé.
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;
}
}
Dans MauiProgram.CreateMauiApp
de MauiProgram.cs
, appelez ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
Dans le _Imports.razor
fichier de la .Shared.Client
bibliothèque RCL, remplacez l’instruction @using
par Microsoft.AspNetCore.Components.Web.RenderMode une @using
instruction pour InteractiveRenderSettings
rendre les propriétés de la InteractiveRenderSettings
classe disponibles pour les composants :
- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings
Remarque
L’affectation des modes de rendu via les propriétés de classe RCL InteractiveRenderSettings
diffère d’une Blazor Web App autonome classique. Dans un Blazor Web App, les modes de rendu sont normalement fournis dans RenderMode le Blazor Web Appfichier du _Import
fichier.
Interactivité par page/composant WebAssembly
- Mode de rendu interactif : WebAssembly
- Emplacement d’interactivité : Par page/composant
- Projets de solution
- MAUI (
MauiBlazorWeb
) - Blazor Web App
- Projet de serveur:
MauiBlazorWeb.Web
: Ne définit pas d’attribut de directive@rendermode
sur les composantsHeadOutlet
etRoutes
du composantApp
(Components/App.razor
). - Projet client :
MauiBlazorWeb.Web.Client
- Projet de serveur:
- Listes RCL
MauiBlazorWeb.Shared
MauiBlazorWeb.Shared.Client
: Renferme les composants partagés Razor qui définissent les de modes de renduInteractiveWebAssembly
dans chaque composant. La liste RCL.Shared.Client
est conservée séparément de la liste RCL.Shared
car l’application doit conserver les composants requis pour s’exécuter sur WebAssembly de manière séparée des composants qui s’exécutent sur le serveur et qui restent sur le serveur.
- MAUI (
Références du projet :
MauiBlazorWeb
etMauiBlazorWeb.Web
ont des références de projet dansMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
a une référence de projet àMauiBlazorWeb.Web.Client
.MauiBlazorWeb.Web.Client
etMauiBlazorWeb.Shared
ont une référence de projet dansMauiBlazorWeb.Shared.Client
.
Ajoutez le paramètre suivant AdditionalAssemblies à l’instance de composant Router
pour l’assembly de projet MauiBlazorWeb.Shared.Client
(via son fichier _Imports
) dans le fichier Routes.razor
du projet MauiBlazorWeb.Shared
:
<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>
Ajoutez l’assembly de projet MauiBlazorWeb.Shared.Client
(via son fichier _Imports
) avec l’appel suivant AddAdditionalAssemblies dans le fichier Program.cs
du projet MauiBlazorWeb.Web
:
app.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly);
Ajoutez la classe suivante InteractiveRenderSettings
est ajoutée à la liste RCL .Shared.Client
. Les propriétés de classe sont utilisées pour définir les modes de rendu des composants pour les composants basé sur le serveur.
Le projet MAUI est interactif par défaut. Par conséquent, aucune action n’est effectuée au niveau du projet MAUI autre que l’appel de InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Pour la Blazor Web App sur le client web, les valeurs de propriété sont affectées à partir de RenderMode. Lorsque les composants sont chargés dans un BlazorWebView pour le client natif du projet MAUI, les modes de rendu ne sont pas attribués (null
), car le projet MAUI définit explicitement les propriétés du mode de rendu sur null
lorsque ConfigureBlazorHybridRenderModes
est appelé.
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;
}
}
Une version légèrement différente de la classe InteractiveRenderSettings
est ajoutée à la RCL .Shared
. Dans la classe ajoutée au .Shared
RCL, InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
du .Shared.Client
RCL est appelée. Cela garantit que le mode de rendu des composants WebAssembly rendus sur le client MAUI n’est pas attribué (null
) car il est interactif par défaut sur le client natif.
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();
}
}
}
Dans MauiProgram.CreateMauiApp
de MauiProgram.cs
, appelez ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
Dans le _Imports.razor
fichier de la .Shared.Client
bibliothèque RCL, remplacez l’instruction @using
par Microsoft.AspNetCore.Components.Web.RenderMode une @using
instruction pour InteractiveRenderSettings
rendre les propriétés de la InteractiveRenderSettings
classe disponibles pour les composants :
- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings
Remarque
L’affectation des modes de rendu via les propriétés de classe RCL InteractiveRenderSettings
diffère d’une Blazor Web App autonome classique. Dans un Blazor Web App, les modes de rendu sont normalement fournis dans RenderMode le Blazor Web Appfichier du _Import
fichier.
Interactivité server par page/composant
- Mode de rendu interactif : Serveur
- Emplacement d’interactivité : Par page/composant
- Projets de solution
- MAUI (
MauiBlazorWeb.Maui
) : AppelsInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
dansMauiProgram.cs
. - Blazor Web App (
MauiBlazorWeb.Web
) : ne définit pas d’attribut de directive@rendermode
sur les composantsHeadOutlet
etRoutes
du composantApp
(Components/App.razor
). - RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor qui définissent les de modes de renduInteractiveServer
dans chaque composant.
- MAUI (
MauiBlazorWeb.Maui
et MauiBlazorWeb.Web
ont une référence de projet à MauiBlazorWeb.Shared
.
Ajoutez la classe InteractiveRenderSettings
suivante à la liste RCL. Les propriétés de classe sont utilisées pour définir les modes de rendu des composants.
Le projet MAUI est interactif par défaut. Par conséquent, aucune action n’est effectuée au niveau du projet MAUI autre que l’appel de InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Pour la Blazor Web App sur le client web, les valeurs de propriété sont affectées à partir de RenderMode. Lorsque les composants sont chargés dans un BlazorWebView pour le client natif du projet MAUI, les modes de rendu ne sont pas attribués (null
), car le projet MAUI définit explicitement les propriétés du mode de rendu sur null
lorsque ConfigureBlazorHybridRenderModes
est appelé.
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;
}
}
Dans MauiProgram.CreateMauiApp
de MauiProgram.cs
, appelez ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
Dans le _Imports.razor
fichier de la .Shared
bibliothèque RCL, remplacez l’instruction @using
par Microsoft.AspNetCore.Components.Web.RenderMode une @using
instruction pour InteractiveRenderSettings
rendre les propriétés de la InteractiveRenderSettings
classe disponibles pour les composants :
- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings
Remarque
L’affectation des modes de rendu via les propriétés de classe RCL InteractiveRenderSettings
diffère d’une Blazor Web App autonome classique. Dans un Blazor Web App, les modes de rendu sont normalement fournis dans RenderMode le Blazor Web Appfichier du _Import
fichier.
Interactivité automatique par page/composant
- Mode de rendu interactif : Automatique
- Emplacement d’interactivité : Par page/composant
- Projets de solution
- MAUI (
MauiBlazorWeb.Maui
) : AppelsInteractiveRenderSettings.ConfigureBlazorHybridRenderModes
dansMauiProgram.cs
. - Blazor Web App
- Projet de serveur:
MauiBlazorWeb.Web
: Ne définit pas d’attribut de directive@rendermode
sur les composantsHeadOutlet
etRoutes
du composantApp
(Components/App.razor
). - Projet client :
MauiBlazorWeb.Web.Client
- Projet de serveur:
- RCL (
MauiBlazorWeb.Shared
) : Renferme les composants partagés Razor qui définissent les de modes de renduInteractiveAuto
dans chaque composant.
- MAUI (
Références du projet :
MauiBlazorWeb.Maui
,MauiBlazorWeb.Web
etMauiBlazorWeb.Web.Client
ont une référence de projet àMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
a une référence de projet àMauiBlazorWeb.Web.Client
.
Ajoutez la classe InteractiveRenderSettings
suivante est ajoutée à la liste RCL. Les propriétés de classe sont utilisées pour définir les modes de rendu des composants.
Le projet MAUI est interactif par défaut. Par conséquent, aucune action n’est effectuée au niveau du projet MAUI autre que l’appel de InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Pour la Blazor Web App sur le client web, les valeurs de propriété sont affectées à partir de RenderMode. Lorsque les composants sont chargés dans un BlazorWebView pour le client natif du projet MAUI, les modes de rendu ne sont pas attribués (null
), car le projet MAUI définit explicitement les propriétés du mode de rendu sur null
lorsque ConfigureBlazorHybridRenderModes
est appelé.
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;
}
}
Dans MauiProgram.CreateMauiApp
de MauiProgram.cs
, appelez ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
Dans le _Imports.razor
fichier de la .Shared
bibliothèque RCL, remplacez l’instruction @using
par Microsoft.AspNetCore.Components.Web.RenderMode une @using
instruction pour InteractiveRenderSettings
rendre les propriétés de la InteractiveRenderSettings
classe disponibles pour les composants :
- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings
Remarque
L’affectation des modes de rendu via les propriétés de classe RCL InteractiveRenderSettings
diffère d’une Blazor Web App autonome classique. Dans un Blazor Web App, les modes de rendu sont normalement fournis dans RenderMode le Blazor Web Appfichier du _Import
fichier.
Interactivité par page/composant WebAssembly
- Mode de rendu interactif : WebAssembly
- Emplacement d’interactivité : Par page/composant
- Projets de solution
- MAUI (
MauiBlazorWeb.Maui
) - Blazor Web App
- Projet de serveur:
MauiBlazorWeb.Web
: Ne définit pas d’attribut de directive@rendermode
sur les composantsHeadOutlet
etRoutes
du composantApp
(Components/App.razor
). - Projet client :
MauiBlazorWeb.Web.Client
- Projet de serveur:
- Listes RCL
MauiBlazorWeb.Shared
MauiBlazorWeb.Shared.Client
: Renferme les composants partagés Razor qui définissent les de modes de renduInteractiveWebAssembly
dans chaque composant. La liste RCL.Shared.Client
est conservée séparément de la liste RCL.Shared
car l’application doit conserver les composants requis pour s’exécuter sur WebAssembly de manière séparée des composants qui s’exécutent sur le serveur et qui restent sur le serveur.
- MAUI (
Références du projet :
MauiBlazorWeb.Maui
etMauiBlazorWeb.Web
ont des références de projet dansMauiBlazorWeb.Shared
.MauiBlazorWeb.Web
a une référence de projet àMauiBlazorWeb.Web.Client
.MauiBlazorWeb.Web.Client
etMauiBlazorWeb.Shared
ont une référence de projet dansMauiBlazorWeb.Shared.Client
.
Ajoutez le paramètre suivant AdditionalAssemblies à l’instance de composant Router
pour l’assembly de projet MauiBlazorWeb.Shared.Client
(via son fichier _Imports
) dans le fichier Routes.razor
du projet MauiBlazorWeb.Shared
:
<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>
Ajoutez l’assembly de projet MauiBlazorWeb.Shared.Client
(via son fichier _Imports
) avec l’appel suivant AddAdditionalAssemblies dans le fichier Program.cs
du projet MauiBlazorWeb.Web
:
app.MapRazorComponents<App>()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared._Imports).Assembly)
.AddAdditionalAssemblies(typeof(MauiBlazorWeb.Shared.Client._Imports).Assembly);
Ajoutez la classe suivante InteractiveRenderSettings
est ajoutée à la liste RCL .Shared.Client
. Les propriétés de classe sont utilisées pour définir les modes de rendu des composants pour les composants basé sur le serveur.
Le projet MAUI est interactif par défaut. Par conséquent, aucune action n’est effectuée au niveau du projet MAUI autre que l’appel de InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
.
Pour la Blazor Web App sur le client web, les valeurs de propriété sont affectées à partir de RenderMode. Lorsque les composants sont chargés dans un BlazorWebView pour le client natif du projet MAUI, les modes de rendu ne sont pas attribués (null
), car le projet MAUI définit explicitement les propriétés du mode de rendu sur null
lorsque ConfigureBlazorHybridRenderModes
est appelé.
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;
}
}
Une version légèrement différente de la classe InteractiveRenderSettings
est ajoutée à la RCL .Shared
. Dans la classe ajoutée au .Shared
RCL, InteractiveRenderSettings.ConfigureBlazorHybridRenderModes
du .Shared.Client
RCL est appelée. Cela garantit que le mode de rendu des composants WebAssembly rendus sur le client MAUI n’est pas attribué (null
) car il est interactif par défaut sur le client natif.
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();
}
}
}
Dans MauiProgram.CreateMauiApp
de MauiProgram.cs
, appelez ConfigureBlazorHybridRenderModes
:
InteractiveRenderSettings.ConfigureBlazorHybridRenderModes();
Dans le _Imports.razor
fichier de la .Shared.Client
bibliothèque RCL, remplacez l’instruction @using
par Microsoft.AspNetCore.Components.Web.RenderMode une @using
instruction pour InteractiveRenderSettings
rendre les propriétés de la InteractiveRenderSettings
classe disponibles pour les composants :
- @using static Microsoft.AspNetCore.Components.Web.RenderMode
+ @using static InteractiveRenderSettings
Remarque
L’affectation des modes de rendu via les propriétés de classe RCL InteractiveRenderSettings
diffère d’une Blazor Web App autonome classique. Dans un Blazor Web App, les modes de rendu sont normalement fournis par RenderMode le biais du Blazor Web Appfichier du _Import
fichier.
Utilisation d’interfaces pour prendre en charge différentes implémentations d’appareils
L’exemple suivant montre comment utiliser une interface pour appeler différentes implémentations dans l’application web et l’application MAUI (native). L’exemple suivant crée un composant qui affiche le facteur de forme de l’appareil. Utilisez la couche d’abstraction MAUI pour les applications natives et fournissez une implémentation pour l’application web.
Dans la Razor bibliothèque de classes (RCL), un Services
dossier contient une IFormFactor
interface.
Services/IFormFactor.cs
:
namespace MauiBlazorWeb.Shared.Services
{
public interface IFormFactor
{
public string GetFormFactor();
public string GetPlatform();
}
}
Le composant Home
(Components/Pages/Home.razor
) de la RCL affiche la plateforme et le facteur de forme.
Components/Pages/Home.razor
:
@page "/"
@using MauiBlazorWeb.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();
}
Dans la bibliothèque de classes (RCL) Razor, un dossier Interfaces
contient une interface IFormFactor
.
Interfaces/IFormFactor.cs
:
namespace MauiBlazorWeb.Shared.Interfaces;
public interface IFormFactor
{
public string GetFormFactor();
public string GetPlatform();
}
Le composant DeviceFormFactor
, suivant est présent dans le dossier Components
de la RCL.
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();
}
Dans la RCL, une entrée pour le composant DeviceFormFactor
fait parti du menu de navigation dans le composant NavMenu
.
Dans 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>
Les applications web et natives contiennent les implémentations pour IFormFactor
.
Dans l’Blazor Web App, un dossier nommé Services
contient le fichier FormFactor.cs
suivant avec l’implémentation FormFactor
pour l’utilisation de l’application web.
Services/FormFactor.cs
(projet MauiBlazorWeb.Web
) :
using MauiBlazorWeb.Shared.Services;
namespace MauiBlazorWeb.Web.Services
{
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return "Web";
}
public string GetPlatform()
{
return Environment.OSVersion.ToString();
}
}
}
using MauiBlazorWeb.Shared.Interfaces;
namespace MauiBlazorWeb.Web.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor() => "Web";
public string GetPlatform() => Environment.OSVersion.ToString();
}
Dans le projet MAUI, un dossier nommé Services
contient le fichier FormFactor.cs
suivant avec l’implémentation FormFactor
pour une utilisation native. La couche d’abstractions MAUI est utilisée pour écrire du code qui fonctionne sur toutes les plateformes d’appareils natives.
Services/FormFactor.cs
(projet MauiBlazorWeb
) :
using MauiBlazorWeb.Shared.Services;
namespace MauiBlazorWeb.Services
{
public class FormFactor : IFormFactor
{
public string GetFormFactor()
{
return DeviceInfo.Idiom.ToString();
}
public string GetPlatform()
{
return DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
}
}
Services/FormFactor.cs
(projet MauiBlazorWeb.Maui
) :
using MauiBlazorWeb.Shared.Interfaces;
namespace MauiBlazorWeb.Maui.Services;
public class FormFactor : IFormFactor
{
public string GetFormFactor() => DeviceInfo.Idiom.ToString();
public string GetPlatform() =>
DeviceInfo.Platform.ToString() + " - " + DeviceInfo.VersionString;
}
Vous utilisez l’injection de dépendances pour obtenir les implémentations de ces services.
Dans le projet MAUI, ouvrez le fichier MauiProgram.cs
et ajoutez les instructions using
suivantes en haut du fichier :
using MauiBlazorWeb.Services;
using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Maui.Services;
using MauiBlazorWeb.Shared.Interfaces;
Juste avant l’appel à builder.Build()
, FormFactor
est inscrit pour ajouter des services spécifiques à l’appareil utilisés par la RCL :
builder.Services.AddSingleton<IFormFactor, FormFactor>();
Dans l’Blazor Web App, le fichier Program
a les instructions using
suivantes en haut du fichier :
using MauiBlazorWeb.Shared.Interfaces;
using MauiBlazorWeb.Web.Services;
Juste avant l’appel à builder.Build()
, FormFactor
est inscrit pour ajouter des services spécifiques à l’appareil utilisés par Blazor Web App :
builder.Services.AddScoped<IFormFactor, FormFactor>();
Si la solution cible également WebAssembly via un projet .Web.Client
, une implémentation de l’API précédente est également requise dans le projet .Web.Client
.
Vous pouvez également utiliser des directives de préprocesseur du compilateur dans votre RCL pour implémenter une interface utilisateur différente en fonction de l’appareil sur lequel l’application s’exécute. Pour ce scénario, l’application doit cibler plusieurs cibles de la liste RCL comme l’application MAUI. Pour obtenir un exemple, consultez le BethMassi/BethTimeUntil
dépôt GitHub.