Interfaccia utente Web condivisa

Importante

Questo progetto è una versione sperimentale. Speriamo di provare le associazioni Sperimentale blazor per dispositivi mobili e fornire feedback all'indirizzo https://github.com/xamarin/MobileBlazorBindings.

Dopo aver creato un'app ibrida Mobile Blazor Bindings che incorpora l'interfaccia utente Web (HTML con CSS), questa procedura dettagliata illustra come condividere l'interfaccia utente Web con un'app Web Blazor in modo da poter fornire la stessa interfaccia utente dell'app sul Web.

In Blazor questa operazione viene eseguita inserendo l'interfaccia utente condivisa in un progetto di libreria di classi Razor o RCL per brevità. In questo modo è possibile creare il pacchetto dell'interfaccia utente Web e del codice come entità riutilizzabile a cui è possibile fare riferimento da più progetti in una soluzione o condivisi in modo più ampio distribuendolo come pacchetto NuGet. È possibile fare riferimento a un pacchetto RCL da un'app Mobile Blazor Bindings e da un'app Web Blazor in modo che convidano esattamente la stessa interfaccia utente.

In questa procedura dettagliata si creerà un'interfaccia utente di visualizzazione Email riutilizzabile in un RCL e la si userà nell'app ibrida Mobile Blazor Binding e in un'app Web Blazor.

Nota

Questa pagina è una continuazione della procedura dettagliata Creare la prima app ibrida . È consigliabile completare la procedura dettagliata prima di continuare.

Aggiungere una libreria di classi Razor (RCL)

Per aggiungere un RCL all'app:

1. Fare clic con il pulsante destro del mouse sul nodo Soluzione in Průzkumník řešení e scegliere Aggiungi/Nuovo progetto.
2. Individuare il tipo di progetto Libreria di classi Razor e fare clic su Avanti.
3. Immettere un nome per il progetto, ad esempio EmailDisplayUI e fare clic su Crea.
4. Nella finestra di dialogo successiva verificare che siano selezionate le impostazioni seguenti: .NET Core 3.1, Nessuna autenticazione e nessun supporto per pagine e visualizzazioni, quindi fare clic su Crea.

Il nuovo progetto contiene i propri file Razor in cui verrà creata l'interfaccia utente Web e una wwwroot cartella per contenere asset statici che fanno parte di questo componente.

Aggiungere l'interfaccia utente Web condivisa all'RCL

1. Fare clic con il pulsante destro del mouse sul progetto RCL e scegliere Aggiungi/Classe

2. Immettere il nome EmailData.cs e fare clic su Aggiungi

3. Aggiungere un file denominato Email.cs all'RCL

4. Sostituire il contenuto con il codice C# seguente:

   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. Rinominare Component1.razor in DisplayEmail.razor

6. Sostituire il contenuto con il markup Razor seguente:

   <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. Modificare il contenuto di wwwroot/styles.css nel modo seguente:

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

Fare riferimento a RCL

Per usare l'RCL, è necessario farvi riferimento dal progetto principale dell'interfaccia utente in modo che l'interfaccia utente possa farvi riferimento. È anche necessario farvi riferimento dai progetti specifici della piattaforma in modo che gli asset statici vengano rilevati e inclusi in tali app.

In ognuno dei progetti FirstBlazorHybridApp, FirstBlazorHybridApp.Android, FirstBlazorHybridApp.iOS, FirstBlazorHybridApp.macOS e FirstBlazorHybridApp.Windows eseguono le operazioni seguenti:

1. Fare clic con il pulsante destro del mouse sul progetto e scegliere Aggiungi/Riferimento al progetto o Aggiungi/Riferimento
2. Selezionare EmailDisplayUI e fare clic su OK

A questo momento è possibile usare l'interfaccia utente di visualizzazione Email nel progetto:

1. Nel progetto FirstBlazorHybridApp aprire il WebUI/_Imports_.razor file e aggiungere questa riga alla fine del file: @using EmailDisplayUI

2. Nel progetto FirstBlazorHybridApp aprire il WebUI/Pages/Index.razor file

3. Aggiungere il contenuto seguente alla fine del file:

   <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. Aggiungere un riferimento al CSS da ogni progetto specifico della <head> piattaforma aggiungendo la riga <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> alla sezione :

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

Eseguire le app per testare l'interfaccia utente

È ora possibile testare la nuova interfaccia utente. Fare clic con il pulsante destro del mouse su uno dei progetti Android, iOS, macOS o Windows, scegliere Imposta come progetto di avvio ed eseguire l'app. Verrà visualizzato il caricamento dell'interfaccia utente nativa con l'interfaccia utente Web sottostante e l'interfaccia utente Web dovrebbe mostrare l'interfaccia utente visualizzata tramite posta elettronica creata.

Nel simulatore iOS dovrebbe essere simile al seguente:

[ ! [Email visualizzare l'interfaccia utente in esecuzione nel simulatore iOS[(./media/shared-web-ui/ios-shared-ui-inline.png) [(./media/shared-web-ui/ios-shared-ui-expanded.png#lightbox)

Aggiungere un progetto Web Blazor

A questo momento è possibile riutilizzare l'interfaccia utente compilata in un'app Web.

1. Fare clic con il pulsante destro del mouse sul nodo della soluzione in Průzkumník řešení e scegliere Aggiungi/Nuovo progetto

2. Selezionare il modello Di app Blazor e fare clic su Avanti

3. Immettere un nome, ad esempio FirstBlazorWebApp e fare clic su Crea

4. Selezionare l'opzione App Server Blazor, .NET Core 3.1, Nessuna autenticazione, Sì per HTTPS e No per Docker, quindi fare clic su Crea.

5. Fare clic con il pulsante destro del mouse sul progetto FirstBlazorWebApp e scegliere Aggiungi/Riferimento al progetto

6. Selezionare il EmailDisplayUI progetto e fare clic su OK

7. Aprire il Pages/_Host.cshtml file e aggiungere la riga <link href="_content/EmailDisplayUI/styles.css" rel="stylesheet" /> alla <head> sezione

8. Aprire il _Imports.razor file e aggiungere questa riga alla fine del file: @using EmailDisplayUI

9. Aprire il Pages/Index.razor file e aggiungere il contenuto seguente alla fine del file:

   <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. Per eseguire il progetto, fare clic con il pulsante destro del mouse sul progetto, scegliere Imposta come progetto di avvio ed eseguirlo. Verrà avviata l'app Web ASP.NET Core e verrà aperto il Web browser predefinito all'app.

Dovrebbe essere simile al seguente nel Web browser:

[ ! [Email visualizzare l'interfaccia utente in esecuzione nel Web browser[(./media/shared-web-ui/web-shared-ui-inline.png) [(./media/shared-web-ui/web-shared-ui-expanded.png#lightbox)

Risorse aggiuntive

Per altre informazioni sulle librerie di classi Razor, vedere queste risorse:

• ASP.NET Core librerie di classi dei componenti Razor
• Creare un'interfaccia utente riutilizzabile usando il progetto di libreria di classi Razor in ASP.NET Core

Riepilogo

In questa procedura dettagliata è stata creata un'app Blazor Hybrid che usa una libreria di classi Razor (RCL) per una parte dell'interfaccia utente (visualizzazione della posta elettronica). È stato quindi usato lo stesso RCL per ospitare l'interfaccia utente in un'applicazione Web ASP.NET Core.

Questa procedura dettagliata ha illustrato un esempio di interfaccia utente di sola lettura, ma le stesse tecniche possono essere usate per creare un'interfaccia utente arbitrariamente complessa con logica dell'applicazione arbitrariamente complessa per soddisfare qualsiasi requisito dell'applicazione. È possibile usare modelli come l'inserimento delle dipendenze per creare servizi specifici della piattaforma.