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. La società ha fornito il codice in formato CSS, le immagini e i contenuti in formato HTML correnti del vecchio sito come base per iniziare.

Nota

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.

Se non è stata ancora creata un'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

Questo modulo usa .NET 6.0 SDK. Assicurarsi che .NET 6.0 sia installato eseguendo il comando successivo nel terminale preferito:

dotnet --list-sdks

Verrà visualizzato un output simile al seguente:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Assicurarsi che sia elencata una versione che inizia con 6. Se non viene elencata alcuna versione o se il comando non viene trovato, installare la versione più recente di .NET 6.0 SDK.

.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.

  1. Aprire Visual Studio Code.

  2. Aprire il terminale integrato da Visual Studio Code selezionando Visualizza. Quindi nel menu principale selezionare Terminale.

  3. Nel terminale passare alla posizione in cui si vuole creare il progetto.

  4. Eseguire il comando del terminale dotnet:

    dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0

    Questo comando consente di creare un nuovo progetto del server Blazor in una cartella denominata BlazingPizza. Indica anche al progetto di disabilitare HTTPS.

  5. Selezionare File>Apri cartella.

  6. Nella finestra di dialogo Apri passare alla cartella BlazingPizza e scegliere Seleziona cartella.

  7. Visual Studio Code chiede di aggiungere gli asset necessari per compilare il progetto ed eseguirne il debug. Selezionare Sì.

    Screenshot showing the missing assets dialog.

  8. Visual Studio Code aggiunge launch.json e tasks.json nella cartella .vscode del progetto.

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

Esegui un test della tua configurazione

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

  1. 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.

  2. Per arrestare l'app, premere CTRL + C nella finestra del terminale.

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

  1. 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.

  2. Visual Studio Code passa anche alla finestra Esegui con debug che consente di riavviare o arrestare l'app.

    Screenshot showing the debugging window in Visual Studio Code.

  3. Selezionare MAIUSC + F5 per arrestare l'app.

Scaricare gli asset e i file di avvio di Blazing Pizza

Si cloneranno ora i file di progetto dell'app Blazor esistenti dei team dal repository GitHub.

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

  2. 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

  3. Eseguire la versione corrente dell'app. Selezionare F5.

    Screenshot showing the starter Blazing Pizza app.

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.

  1. In Esplora file in Visual Studio Code espandere la cartella Model. 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.

  2. 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.

  3. 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.

  4. Premere F5 o selezionare Esegui. Selezionare quindi Avvia debug.

    L'app dovrebbe essere compilata ed eseguita e non mostrare modifiche. Il codice non viene usato da alcun elemento nel codice HTML lato client. Ora si procederà a risolverlo.

  5. Premere MAIUSC + F5 o selezionare Arresta debug.

  6. 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.

  7. Premere F5 o selezionare Esegui. Selezionare quindi Avvia debug.

    Screenshot showing a list of blazing pizzas.

È ora disponibile un componente di base pizza per consentire ai clienti di ordinare una pizza. Questo componente verrà migliorato negli esercizi successivi.