Esercizio - Creare ed eseguire un'app Blazor Hybrid

  • 8 minuti

Per iniziare, creare la prima app Web Blazor.

In questo modulo si usa Visual Studio 2022 per lo sviluppo locale. Dopo aver completato questo modulo, è possibile applicare i concetti usando un ambiente di sviluppo come Visual Studio Code.

Requisiti per lo sviluppo con .NET MAUI

Per creare app .NET MAUI con .NET 8, è necessario installare Visual Studio versione 17.8 o successiva con il carico di lavoro seguente installato:

  • Sviluppo .NET Multi-Platform App UI

Inoltre, se si vogliono creare app .NET MAUI Blazor, è necessario installare il carico di lavoro ASP.NET e sviluppo Web.

Per una procedura dettagliata della configurazione, vedere la documentazione .

Sviluppo con Visual Studio Code

Se si sviluppa in macOS o Linux, è necessario installare Visual Studio Code e l'estensione.NET MAUI insieme al carico di lavoro .NET SDK e .NET MAUI. Per una procedura dettagliata della configurazione, vedere la documentazione .

Creare una nuova app Blazor Hybrid

Per configurare un progetto Blazor Hybrid da usare, si usa Visual Studio 2022.

  1. In Visual Studio 2022 selezionare File>Nuovo progetto, oppure selezionare Crea un nuovo progetto dall'utilità di avvio.

  2. Nella casella di ricerca posta nella parte superiore della finestra di dialogo Crea un nuovo progetto, immettere .NET MAUI Blazor, selezionare .NET MAUI Blazor App e quindi Avanti.

    Screenshot of the Visual Studio 2022 Create New Project screen and the .NET MAUI Blazor App template.

  3. Nella schermata successiva assegnare al progetto il nome BlazorHybridApp e specificare un percorso nel computer in cui archiviare il progetto. Selezionare la casella accanto a Posiziona soluzione e progetto nella stessa directory, quindi selezionare Avanti.

    Screenshot of the Visual Studio 2022 Configure Your Project screen and recommended settings from step 3.

  4. Nella schermata Informazioni aggiuntive selezionare .NET 8.0 (supporto a lungo termine) nell'elenco a discesa Framework e quindi selezionare Crea.

  5. Questo comando consente di create un progetto Blazor Hybrid basato su .NET MAUI con tutti i file e le pagine necessari.

    È ora necessario avere accesso a questi file e il Esplora soluzioni in Visual Studio 2022 è simile all'esempio seguente:

    Screenshot of Visual Studio 2022 Solution Explorer with a list of the files in a default .NET MAUI Blazor project.

Per configurare un progetto Blazor Hybrid da usare, si usa Visual Studio Code.

  1. In Visual Studio Code aprire Esplora risorse e selezionare Crea progetto .NET.

  2. Selezionare .NET MAUI Blazor Hybrid App nell'elenco a discesa.

    Screenshot of the Visual Studio Code Create New Project screen and the .NET MAUI Blazor App template.

  3. Creare una nuova cartella nei nomi popup BlazorHybridApp e selezionare Seleziona cartella.

  4. Assegnare al progetto il nome BlazorHybridApp e premere INVIO per confermare.

  5. Verrà creato un progetto Blazor Hybrid di base basato su .NET MAUI con tutti i file e le pagine necessari.

    È ora necessario avere accesso a questi file e esplora soluzioni in Visual Studio Code ha un aspetto simile al seguente:

    Screenshot of Visual Studio Code Solution Explorer with a list of the files in a default .NET MAUI Blazor project.

Struttura di progetto e avvio di Blazor Hybrid con .NET MAUI

Il progetto è un normale progetto MAUI .NET con altri contenuti correlati a Blazor.

File di progetto di Blazor

  • Pagine: Questa cartella contiene tre componenti Razor, Counter.razor, FetchData.razor e Index.razor, che definiscono le tre pagine che costituiscono l'interfaccia utente di Blazor.

  • Condivisi: Questa cartella contiene i componenti Razor condivisi, tra cui il layout principale e il menu di spostamento dell'app.

  • wwwroot: Questa cartella include asset Web statici usati da Blazor, tra cui file HTML, CSS, JavaScript e immagine.

  • Main.razor: Componente Razor radice per l'app che configura il router Blazor per gestire gli spostamenti di pagina all'interno della visualizzazione Web.

  • _Imports.razor: Questo file definisce gli spazi dei nomi importati in ogni componente Razor.

File di progetto di .NET MAUI

  • App.xaml: Questo file definisce le risorse dell'applicazione che l'app userà nel layout XAML. Le risorse predefinite si trovano nella cartella Resources e definiscono stili predefiniti e colori a livello di app per ogni controllo incorporato di .NET MAUI.

  • App.xaml.cs: code-behind del file App.xaml. Questo file definisce la classe App. Questa classe rappresenta l'applicazione in fase di esecuzione. Il costruttore in questa classe crea una finestra iniziale e la assegna alla proprietà MainPage, che determina quale pagina viene visualizzata all'avvio dell'applicazione. Inoltre, questa classe consente di eseguire l'override dei comuni gestori degli eventi del ciclo di vita delle applicazioni indipendenti dalla piattaforma. Gli eventi includono OnStart, OnResume e OnSleep.

  • MainPage.xaml: Questo file contiene la definizione dell'interfaccia utente. L'app di esempio generata dal modello di app Blazor .NET MAUI comprende un BlazorWebView che carica il Maincomponente nella pagina HTML host specificata (wwwroot/index.html) in una posizione specificata dal selettore CSS (#app).

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:BlazorHybridApp"
    x:Class="BlazorHybridApp.MainPage"
    BackgroundColor="{DynamicResource PageBackgroundColor}">

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

</ContentPage>

  • MainPage.xaml.cs: code-behind della pagina. In questo file si definisce la logica per i vari gestori degli eventi e altre azioni controllate da .NET MAUI nel trigger della pagina. Il codice di esempio presente nel modello include solo il costruttore predefinito perché tutti gli eventi e gli elementi dell'interfaccia utente si trovano nei componenti Blazor.

    namespace BlazorHybridApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

  • MauiProgram.cs: Ogni piattaforma nativa ha un punto di partenza diverso che crea e inizializza l'applicazione. Questo codice è disponibile nella cartella Platforms del progetto. Questo codice è specifico della piattaforma, ma alla fine chiama il metodo CreateMauiApp della classe statica MauiProgram. È possibile usare il metodo CreateMauiApp per configurare l'applicazione creando un oggetto generatore di app. È necessario specificare almeno la classe che descrive l'applicazione. È possibile eseguire questa operazione con il UseMauiAppmetodo generico dell'oggetto generatore di app. Il parametro type specifica la classe dell'applicazione. Il generatore di app fornisce anche metodi per attività come la registrazione dei tipi di carattere, la configurazione di servizi per l'inserimento delle dipendenze, la registrazione di gestori personalizzati per i controlli e altro ancora. Il codice seguente illustra un esempio di uso del generatore di app per registrare un tipo di carattere, registrare il servizio meteo e aggiungere il supporto per Blazor Hybrid con il metodo AddMauiBlazorWebView:

    using Microsoft.AspNetCore.Components.WebView.Maui;
using BlazorHybridApp.Data;

namespace BlazorHybridApp;

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();
        builder.Logging.AddDebug();
        #endif

        builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}

Eseguire l'app

  • In Visual Studio selezionare Debug>Avvia debug
  • In Visual Studio Code selezionare Esegui>avvia debug. Selezionare il debugger MAUI .NET dall'elenco a discesa per avviare l'applicazione.
This builds and starts the app on Windows, and then rebuilds and restarts the app whenever you make code changes. The app should automatically open on Windows. You can also change the deployment target through the debug drop-down menu to deploy to Android or other platforms.

![Screenshot of the default Blazor Hybrid app running on Windows and Android.](../media/hello-blazor.png)

Questa app Blazor Hybrid viene usata nei prossimi esercizi.