Interface utilisateur web partagée

Maintenant que vous avez créé une application hybride Mobile Blazor Bindings qui intègre l’interface utilisateur web (HTML avec CSS), cette procédure pas à pas vous montre comment partager l’interface utilisateur web avec une application web Blazor afin que vous puissiez fournir votre même interface utilisateur d’application sur le web.

Dans Blazor, cela s’effectue en plaçant l’interface utilisateur partagée dans un projet de bibliothèque de classes Razor, ou RCL en abrégé. Cela permet d’empaqueter l’interface utilisateur web et le code en tant qu’entité réutilisable qui peut être référencée par plusieurs projets dans une solution ou partagée plus largement en la distribuant en tant que package NuGet. Un package RCL peut être référencé par une application Mobile Blazor Bindings et une application Web Blazor afin qu’ils partagent exactement la même interface utilisateur.

Dans cette procédure pas à pas, vous allez créer une interface utilisateur d’affichage réutilisable Email dans une RCL et l’utiliser dans l’application hybride Mobile Blazor Binding et dans une application Web Blazor.

Ajouter une bibliothèque de classes Razor (RCL)

Pour ajouter une rcl à votre application :

1. Cliquez avec le bouton droit sur le nœud Solution dans Explorateur de solutions, puis sélectionnez Ajouter/Nouveau projet.
2. Recherchez le type de projet Bibliothèque de classes Razor, puis cliquez sur Suivant.
3. Entrez un nom pour le projet, par exemple EmailDisplayUI , puis cliquez sur Créer.
4. Dans la boîte de dialogue suivante, vérifiez que les paramètres suivants sont sélectionnés : .NET Core 3.1, Aucune authentification et aucune prise en charge des pages et des vues, puis cliquez sur Créer.

Le nouveau projet contient ses propres fichiers Razor dans lesquels vous allez créer l’interface utilisateur web et un wwwroot dossier pour contenir des ressources statiques qui font partie de ce composant.

Ajouter l’interface utilisateur web partagée au RCL

1. Cliquez avec le bouton droit sur le projet RCL et sélectionnez Ajouter / Classe

2. Entrez le nom EmailData.cs , puis cliquez sur Ajouter

3. Ajouter un fichier nommé Email.cs à la rcl

4. Remplacez son contenu par le code C# suivant :

   namespace EmailDisplayUI
   {
       public class EmailData
       {
           public string From { get; set; }
           public string To { get; set; }
           public string Subject { get; set; }
           public bool IsImportant { get; set; }
           public string Body { get; set; }
       }
   }
   

5. Renommer Component1.razor par DisplayEmail.razor

6. Remplacez son contenu par le balisage Razor suivant :

   <div class="emailDisplay">
       <div class="emailHeader">
           <div>
               <label>From:</label> @Email.From
           </div>
           <div>
               <label>To:</label> @Email.To
           </div>
           <div>
               <label>Priority:</label> @(Email.IsImportant ? "High" : "Normal")
           </div>
           <div>
               <label>Subject:</label> @Email.Subject
           </div>
       </div>
       <div class="emailBody">
           @Email.Body
       </div>
   </div>
   
   @code
   {
       [Parameter] public EmailData Email { get; set; }
   }
   

7. Remplacez le contenu de wwwroot/styles.css par ce qui suit :

   label {
       font-weight: bold;
       font-style: italic;
   }
   
   .emailDisplay {
       background-image: url('background.png');
   }
   
   .emailHeader {
       border: 2px solid #808080;
       padding: 1em;
       margin: 1em 0;
   }
   
   .emailBody {
       border: 1px solid #808080;
       padding: 1em;
       margin: 1em 0;
   }
   

Référencer la RCL

Pour utiliser le RCL, vous devez le référencer à partir du projet d’interface utilisateur main afin que l’interface utilisateur puisse être référencée à partir de celui-ci. Vous devez également le référencer à partir des projets spécifiques à la plateforme afin que les ressources statiques soient détectées et incluses dans ces applications.

Dans chacun des projets FirstBlazorHybridApp, FirstBlazorHybridApp.Android, FirstBlazorHybridApp.iOS, FirstBlazorHybridApp.macOS et FirstBlazorHybridApp.Windows effectuent les opérations suivantes :

1. Cliquez avec le bouton droit sur le projet et sélectionnez Ajouter / Référence du projet ou Ajouter / Référence
2. Sélectionnez EmailDisplayUI et cliquez sur OK

Vous êtes maintenant prêt à utiliser l’interface utilisateur d’affichage Email dans votre projet :

1. Dans le projet FirstBlazorHybridApp, ouvrez le WebUI/_Imports_.razor fichier et ajoutez cette ligne à la fin du fichier : @using EmailDisplayUI

2. Dans le projet FirstBlazorHybridApp, ouvrez le WebUI/Pages/Index.razor fichier

3. Ajoutez le contenu suivant au bas du fichier :

   <DisplayEmail Email="email" />
   
   @code
   {
       EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
   }
   

4. Ajoutez une référence au CSS de chaque projet spécifique à la plateforme en ajoutant la ligne <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> à la <head> section :

   • Android : wwwroot/index.html
   • iOS : Resources/wwwroot/index.html
   • MacOS : Resources/wwwroot/index.html
   • Windows : wwwroot/index.html

Exécuter les applications pour tester l’interface utilisateur

Vous êtes maintenant prêt à tester la nouvelle interface utilisateur ! Cliquez avec le bouton droit sur l’un des projets Android, iOS, macOS ou Windows, sélectionnez Définir comme projet de démarrage, puis exécutez l’application. Vous devez voir le chargement natif de l’interface utilisateur avec l’interface utilisateur web située en dessous, et l’interface utilisateur web doit afficher l’interface utilisateur d’affichage de courrier que vous avez créée.

Sur le simulateur iOS, il doit ressembler à ceci :

[ ! [Email afficher l’interface utilisateur en cours d’exécution dans le simulateur iOS[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Ajouter un projet Blazor Web

Vous êtes maintenant prêt à réutiliser l’interface utilisateur que vous avez créée dans une application web !

1. Cliquez avec le bouton droit sur le nœud de solution dans Explorateur de solutions, puis sélectionnez Ajouter/Nouveau projet

2. Sélectionnez le modèle Application Blazor, puis cliquez sur Suivant

3. Entrez un nom, par exemple FirstBlazorWebApp , puis cliquez sur Créer

4. Sélectionnez l’option Blazor Server App, .NET Core 3.1, Aucune authentification, Oui pour HTTPS et Non pour Docker, puis cliquez sur Créer.

5. Cliquez avec le bouton droit sur le projet FirstBlazorWebApp et sélectionnez Ajouter / Référence du projet

6. Sélectionnez le projet, puis cliquez sur OK.EmailDisplayUI

7. Ouvrez le Pages/_Host.cshtml fichier et ajoutez la ligne <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> à la <head> section

8. Ouvrez le _Imports.razor fichier et ajoutez cette ligne à la fin du fichier : @using EmailDisplayUI

9. Ouvrez le Pages/Index.razor fichier et ajoutez le contenu suivant en bas du fichier :

   <DisplayEmail Email="email" />
   
   @code
   {
       EmailData email = new EmailData { From="sender@example.com", To="recipient@example.com", IsImportant=true, Subject="Learn about Blazor", Body="Tutorials are wonderful!" };
   }
   

10. Pour exécuter le projet, cliquez avec le bouton droit sur le projet, sélectionnez Définir comme projet de démarrage, puis exécutez-le. Cela démarre l’application web ASP.NET Core et ouvre votre navigateur web par défaut à l’application.

Il doit ressembler à ceci dans votre navigateur web :

[ ! [Email afficher l’interface utilisateur en cours d’exécution dans le navigateur web[(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

Ressources supplémentaires

Pour en savoir plus sur les bibliothèques de classes Razor case activée les ressources suivantes :

• bibliothèques de classes de composants Razor ASP.NET Core
• Créer une interface utilisateur réutilisable à l’aide du projet de bibliothèque de classes Razor dans ASP.NET Core

Résumé

Dans cette procédure pas à pas, vous avez créé une application Blazor Hybrid qui utilise une bibliothèque de classes Razor (RCL) pour une partie de son interface utilisateur (l’affichage de l’e-mail). Vous avez ensuite utilisé ce même RCL pour héberger l’interface utilisateur dans une application web ASP.NET Core.

Cette procédure pas à pas a montré un exemple d’interface utilisateur en lecture seule, mais les mêmes techniques peuvent être utilisées pour créer une interface utilisateur arbitrairement complexe avec une logique d’application arbitrairement complexe pour répondre à n’importe quelle exigence d’application. Vous pouvez utiliser des modèles tels que l’injection de dépendances pour créer des services spécifiques à la plateforme.