Esercizio: Creare un'interfaccia utente con i componenti Blazor

5 minuti

In questo esercizio si inizia a creare una nuova app Blazing Pizza per la società di consegna di pizze a domicilio. L'azienda ti fornisce il CSS attuale, le immagini e l'HTML dal suo vecchio sito per lavorare.

Note

In questo modulo vengono usati l'interfaccia della riga di comando di .NET e Visual Studio Code per lo sviluppo locale. Dopo aver completato il modulo, è possibile applicare i concetti usando Visual Studio per Windows o Visual Studio per Mac per macOS. Per lo sviluppo continuo è possibile usare Visual Studio Code per Windows, Linux e macOS.

Questo modulo usa .NET 9.0 SDK. Assicurarsi di avere installato .NET 9.0 eseguendo il comando seguente nel terminale dei comandi preferito:

dotnet --list-sdks

Verrà visualizzato un output simile all'esempio seguente:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Assicurarsi che sia elencata una versione che inizia con 9. Se il comando non è presente nell'elenco o non viene trovato, installare la versione più recente di .NET 9.0 SDK.

Se si sta creando la prima app Blazor, seguire le istruzioni di installazione per Blazor per installare la versione corretta di .NET e verificare che il computer sia configurato correttamente. Fermarsi al passaggio Creare un'app.

Creare una nuova app Blazor

.NET consente di creare nuovi progetti con qualsiasi versione di comandi di Visual Studio o del terminale. Per illustrare i passaggi negli esercizi seguenti, verranno usati il terminale e Visual Studio Code.

Aprire Visual Studio Code.
Aprire il terminale integrato da Visual Studio Code selezionando Visualizza. Nel menu principale selezionare quindi Terminale.
Nel terminale passare alla posizione in cui si vuole creare il progetto.
Eseguire il comando del terminale dotnet:
```
dotnet new blazor -o BlazingPizza
```
Questo comando consente di creare un nuovo progetto del server Blazor in una cartella denominata BlazingPizza.
Selezionare File>Apri cartella.
Nella finestra di dialogo Apri passare alla cartella BlazingPizza e scegliere Seleziona cartella.

Questi file consentono di eseguire e eseguire il debug dell'app Blazor con gli strumenti di debug di Visual Studio Code.

Testare la configurazione

Per eseguire l'app, è possibile scegliere di usare il terminale o Visual Studio Code.

Nella finestra del terminale avviare l'app Blazor con:
```
dotnet watch
```
Questo comando compila e quindi avvia l'app. Il comando watch indica a dotnet di controllare tutti i file di progetto. Tutte le modifiche apportate ai file di progetto attivano automaticamente una ricompilazione e quindi riavviano l'app.

Nel browser predefinito del computer si dovrebbe aprire una nuova pagina all'indirizzo http://localhost:5000.
Per arrestare l'app, premere CTRL + C nella finestra del terminale.

È anche possibile eseguire ed eseguire il debug del progetto con Visual Studio Code.

In Visual Studio Code selezionare F5. In alternativa, selezionare Avvia debug nel menu Esegui.

L'app dovrebbe compilare e aprire una nuova pagina del browser.
Visual Studio Code passa anche alla finestra Esegui con debug che consente di riavviare o arrestare l'app.

Screenshot che mostra la finestra di debug in Visual Studio Code.
Per arrestare l'app, selezionare MAIUSC + F5.

Scaricare gli asset e i file di avvio di Blazing Pizza

Clonare i file di progetto dell'app Blazor esistenti del team dal repository GitHub.

Eliminare la cartella BlazingPizza usando Esplora file o in Visual Studio Code.

Nel terminale clonare i file di lavoro correnti in una nuova cartella BlazingPizza.

git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

Eseguire la versione corrente dell'app. Selezionare F5.

Screenshot che mostra l'app Blazing Pizza iniziale.

Creare alcune pizze

Il componente Pages/Index.razor consente ai clienti di selezionare e configurare le pizze da ordinare. Il componente risponde all'URL radice dell'app.

Il team ha anche creato classi per rappresentare i modelli nell'app. Esaminare il modello PizzaSpecial corrente.

Nell'Esplora file di Visual Studio Code, espandi la cartella Modello. Selezionare quindi PizzaSpecial.

namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

Si noti che all'ordine di una pizza sono associati gli elementi Name, BasePrice, Description e ImageUrl.

In Esplora file espandere Pages e quindi selezionare Index.razor.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
Al momento, è presente solo un tag H1 per il titolo. Si aggiungerà quindi il codice per creare pizze speciali.

Sotto il tag <h1> aggiungere il codice C# seguente:

@code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

Il blocco @code crea una matrice per contenere le pizze speciali. Durante l'inizializzazione della pagina, aggiunge sei pizze alla matrice.

Premere F5 o selezionare Esegui. Selezionare quindi Avvia debug.

Quando l'app viene compilata ed eseguita, noterai che non succede nulla. Il codice non viene usato da alcun elemento nel codice HTML lato client. Ora si procederà a risolverlo.
Premere MAIUSC + F5 o selezionare Arresta debug.

In Index.razor sostituire <h1>Blazing Pizzas</h1> con questo codice:

<div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

Questo codice combina codice HTML normale insieme alle direttive di ciclo e di accesso ai membri. Il ciclo @foreach crea un tag <li> per ogni pizza nella matrice specials.

All'interno del ciclo, per ogni pizza speciale vengono visualizzati il nome, la descrizione, il prezzo e l'immagine con direttive membro.

Premere F5 o selezionare Esegui. Selezionare quindi Avvia debug.

Screenshot che mostra un elenco di pizze Blazing Pizza.

È ora disponibile un componente di base pizza per consentire ai clienti di ordinare una pizza. Negli esercizi seguenti si migliora questo componente.

Commenti e suggerimenti

Questa pagina è stata utile?