Esercizio: Associare i controlli ai dati nelle applicazioni Blazor

Completato

L'app Blazing Pizza deve aggiornare l'interfaccia quando i clienti modificano le pizze e le aggiungono agli ordini. Blazor consente di associare controlli HTML alle proprietà C# da aggiornare quando cambiano i valori.

I clienti dovrebbero vedere quali sono le pizze ordinate e quale sarà l'impatto delle dimensioni scelte sul prezzo che pagheranno.

In questo esercizio si visualizzerà l'app Blazing Pizza in una posizione in cui gli ordini possono essere aggiornati e modificati. Si vedrà come associare i controlli alle proprietà di una pizza e ricalcolare i prezzi in base a queste modifiche.

Visualizzare l'ordine di pizze di un cliente

Si aggiungerà una barra laterale per visualizzare tutte le pizze aggiunte da un cliente all'ordine.

1. Arrestare l'app se è ancora in esecuzione.

2. In Esplora file in Visual Studio Code espandere Pages e selezionare Index.razor.

3. Aggiungere questo codice tra i blocchi @if e @code:

   <div class="sidebar">
       @if (order.Pizzas.Any())
       {
           <div class="order-contents">
               <h2>Your order</h2>
   
               @foreach (var configuredPizza in order.Pizzas)
               {
                 <div class="cart-item">
                     <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                     <div class="item-price">
                         @configuredPizza.GetFormattedTotalPrice()
                     </div>
                 </div>
               }
           </div>
       }
       else
       {
           <div class="empty-cart">Choose a pizza<br>to get started</div>
       }
   
       <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
           Total:
           <span class="total-price">@order.GetFormattedTotalPrice()</span>
           <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
               Order >
           </a>
       </div>
   </div>
   

   Questo codice HTML consente di aggiungere una barra laterale alla pagina. Se presenti in OrderState.Order, le pizze vengono visualizzate. Se non sono presenti ordini, ai clienti viene richiesto di aggiungerne alcuni.

   Verranno visualizzati alcuni errori perché il componente non conosce gli ordini.

4. Aggiungere questo codice nel blocco @code sotto List<PizzaSpecial> specials = new();:

   Order order => OrderState.Order;
   

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

   

   Provare a ordinare alcune pizze e ad annullare l'ordine di alcune. Si noterà che le pizze vengono aggiunte al carrello e che il totale degli ordini viene aggiornato.

6. Premere MAIUSC+F5 o selezionare Arresta debug.

Rimuovere una pizza dall'ordine di un cliente

Come si può notare, non è possibile rimuovere una pizza configurata dal carrello del cliente. Si aggiungerà questa funzionalità.

Il primo passaggio consiste nell'aggiornare il servizio OrderState in modo che possa fornire un metodo per rimuovere le pizze da un ordine.

1. In Esplora file selezionare Services/OrderState.cs.

2. Alla fine della classe aggiungere questo metodo:

   public void RemoveConfiguredPizza(Pizza pizza)
   {
       Order.Pizzas.Remove(pizza);
   }
   

3. In Esplora file espandere Pages e quindi selezionare Index.razor.

4. In <div class="cart-item"> aggiungere un tag <a> prima di </div> di chiusura per creare un pulsante di rimozione:

   <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
   

   Questo tag aggiunge un oggetto X a ogni pizza nella barra laterale dell'ordine. Quando viene selezionato, chiama il metodo RemoveConfiguredPizza nel servizio OrderState.

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

   

6. Premere MAIUSC+F5 o selezionare Arresta debug.

Configurare le dimensioni della pizza in modo dinamico

La finestra di dialogo di configurazione della pizza non viene aggiornata quando si agisce sul dispositivo di scorrimento delle dimensioni. Con il componente è necessario un modo per aggiornare la pizza e le dimensioni e quindi ricalcolare il prezzo.

1. In Esplora file espandere Shared, quindi selezionare ConfigurePizzaDialog.razor.

2. Aggiungere codice al controllo HTML input per associarne il valore alle dimensioni della pizza:

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>
   

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

   Usare la finestra di dialogo aggiornata per aggiungere all'ordine alcune pizze di dimensioni diverse. Fare clic sulla barra del dispositivo di scorrimento invece di trascinare. Si può osservare che le dimensioni della pizza vengono aggiornate quando si esegue l'evento mouse-up sul controllo.

   Se si trascina il dispositivo di scorrimento, le dimensioni non cambieranno finché non si rilascia il pulsante del mouse. Ora si procederà a risolverlo.

4. Premere MAIUSC+F5 o selezionare Arresta debug.

5. Aggiungere l'evento a cui deve essere associato il controllo:

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
   

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

   

In che modo l'aggiunta del codice @bind="Pizza.Size" ha consentito di offrire così tante funzionalità? Se si esamina l'intero file ConfigurePizzaDialog.razor, si noterà che il team aveva già connesso gli altri elementi alle proprietà della pizza.

Ad esempio, il codice per l'aggiornamento del prezzo è il seguente:

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

Il prezzo viene aggiornato in base alle dimensioni della pizza perché il metodo sulla pizza GetFormattedTotalPrice() usa le dimensioni della pizza per calcolare il prezzo totale.

Si sono fatti progressi nell'app Blazing Pizza. Per continuare a migliorarla, completare il modulo successivo di questo percorso di apprendimento.

Continua