Creare un'interfaccia utente con i componenti Blazor

Completato

I componenti Blazor consentono di definire pagine Web o parti di codice HTML che includono contenuto dinamico usando codice .NET. In Blazor è possibile formulare contenuto dinamico usando C# invece di JavaScript.

Si supponga di lavorare per una società di consegna di pizza a domicilio per creare un nuovo sito Web moderno. Si inizia con una pagina di benvenuto che diventerà la pagina di destinazione per la maggior parte degli utenti del sito. Si vogliono visualizzare in questa pagina le offerte speciali e le pizze più apprezzate.

In questa unità si apprenderà come creare componenti in Blazor e scrivere codice che esegue il rendering di contenuto dinamico in questi componenti.

Informazioni sui componenti Blazor

Blazor è un framework che gli sviluppatori possono usare per creare un'interfaccia utente interattiva scrivendo codice C#. Grazie a Blazor, è possibile usare lo stesso linguaggio per tutto il codice, sul lato server e sul lato client, ed eseguirne il rendering per la visualizzazione in molti browser diversi, inclusi i browser nei dispositivi mobili.

Nota

Sono disponibili due modelli di hosting per il codice nelle app di Blazor:

• Blazor Server: in questo modello l'app viene eseguita sul server Web all'interno di un'app ASP.NET Core. Gli aggiornamenti all'interfaccia utente, gli eventi e le chiamate JavaScript sul lato client vengono inviati tramite una connessione SignalR tra il client e il server. In questo modello verranno illustrate le funzioni e verrà scritto codice per questo modello.
• Blazor WebAssembly: in questo modello l'app di Blazor, le rispettive dipendenze e il runtime .NET vengono scaricati ed eseguiti nel browser.

In Blazor l'interfaccia utente viene creata da parti autonome del codice definite componenti. Ogni componente può contenere una combinazione di codice HTML e C#. I componenti vengono scritti usando la sintassi Razor, in cui il codice viene contrassegnato con la direttiva @code. Altre direttive possono essere usate per accedere alle variabili, per l'associazione ai valori e per il completamento di altre attività di rendering. Quando l'app viene compilata, il codice HTML e il codice vengono compilati in una classe per componente. I componenti vengono scritti come file con un'estensione razor.

Nota

La sintassi Razor viene usata per l'incorporamento di codice .NET nelle pagine Web. È possibile usarla nelle applicazioni MVC ASP.NET, in cui i file hanno estensione cshtml. La sintassi Razor viene usata in Blazor per scrivere componenti. Questi componenti hanno invece l'estensione razor e non esiste alcuna separazione rigida tra controller e visualizzazioni.

Di seguito è riportato un semplice esempio di componente Blazor:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

In questo esempio il codice imposta il valore di una variabile di stringa denominata welcomeMessage. Il rendering di tale variabile viene eseguito entro i tag <p> nel codice HTML. Più avanti in questa unità verranno esaminati esempi più complessi.

Creare componenti Blazor

Quando si crea un'app di Blazor usando il modello blazorserver nell'interfaccia della riga di comando dotnet, alcuni componenti sono inclusi per impostazione predefinita:

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

I componenti predefiniti includono la home page Index.razor e il componente demo Counter.razor. Entrambi i componenti vengono posizionati nella cartella Pages. È possibile modificare queste visualizzazioni per adattarle alle esigenze specifiche o eliminarle e sostituirle con nuovi componenti.

Per aggiungere un nuovo componente a un'app Web esistente, usare questo comando:

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• L'opzione -n specifica il nome del componente da aggiungere. Questo esempio aggiunge un nuovo file denominato PizzaBrowser.razor.
• L'opzione -o specifica la cartella che conterrà il nuovo componente.
• L'opzione -f impone la creazione dell'applicazione con il framework versione .NET 6.

Importante

Il nome del componente Blazor deve iniziare con un carattere maiuscolo.

Dopo avere creato il componente, è possibile aprirlo per la modifica con Visual Studio Code:

code Pages/PizzaBrowser

Scrivere codice in un componente Blazor

Quando si crea un'interfaccia utente in Blazor, si combina codice HTML statico e markup CSS con codice C#, spesso nello stesso file. Per distinguere questi tipi di codice si usa la sintassi Razor. La sintassi Razor include direttive, con il simbolo @ come prefisso, che delimitano il codice C#, i parametri di routing, i dati associati, le classi importate e altre funzionalità.

Si consideri di nuovo questo componente di esempio:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

È possibile riconoscere il markup HTML con i tag <h1> e <p>. Questo markup è il framework statico della pagina, in cui il codice inserirà il contenuto dinamico. Il markup Razor è costituito dagli elementi seguenti:

• La direttiva @page: questa direttiva fornisce un modello di route per Blazor. In fase di esecuzione Blazor individua una pagina di cui eseguire il rendering verificando la corrispondenza tra questo modello e l'URL richiesto dall'utente. In questo caso, è possibile che corrisponda a un URL di tipo http://yourdomain.com/index.
• La direttiva @code: questa direttiva dichiara che il testo nel blocco seguente è codice C#. È possibile inserire in un componente tutti i blocchi di codice necessari. È possibile definire i membri della classe per componente in questi blocchi di codice e impostarne i valori da calcolo, operazioni di ricerca o altre origini. In questo caso il codice definisce un singolo membro di componente denominato welcomeMessage e ne imposta il valore di stringa.
• Direttive di accesso ai membri: se si vuole includere il valore di un membro nella logica di rendering, usare il simbolo @ seguito da un'espressione C#, ad esempio il nome del membro. In questo caso viene usata la direttiva @welcomeMessage per il rendering del valore del membro welcomeMessage nei tag <p>.