Esercizio - Associare controlli ai dati nelle applicazioni Blazor

Completato

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

I clienti dovrebbero vedere quali pizze ordinano e come le dimensioni scelte influiscono sul prezzo.

In questo esercizio si ottiene 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 su queste modifiche.

Visualizzare l'ordine di pizza di un cliente

Si aggiungerà una barra laterale che visualizza tutte le pizze aggiunte da un cliente al loro ordine.

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

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

3. Tra i @if blocchi e @code aggiungere questo codice:

   <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 aggiunge una barra laterale alla pagina. Se sono presenti pizze in OrderState.Order, le visualizza. Se non sono presenti ordini, ai clienti viene richiesto di aggiungere alcuni ordini.

   Ci sono alcuni errori perché il componente non sa quali sono gli ordini.

4. @code Nel blocco in List<PizzaSpecial> specials = new();aggiungere questo codice:

   Order order => OrderState.Order;
   

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

   

   Prova a ordinare alcune pizze e ad annullare alcune. Si noti che vengono aggiunti al carrello e il totale dell'ordine si aggiorna.

6. Premere MAIUSC+F5 o selezionare Arresta debug.

Rimuovere una pizza dall'ordine di un cliente

Si potrebbe notare che non è possibile rimuovere una pizza configurata dal carrello acquisti del cliente. Aggiungiamo questa funzionalità.

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

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

2. Nella parte inferiore della classe aggiungere questo metodo:

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

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

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

   <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 lo si seleziona, chiama il metodo RemoveConfiguredPizza nel servizio OrderState.

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

   

6. Premere MAIUSC+F5 o selezionare Arresta debug.

Configurare le dimensioni della pizza in modo dinamico

Il pannello di configurazione della pizza non viene aggiornato quando viene modificato il cursore delle dimensioni. Il componente richiede un modo per aggiornare la pizza e le dimensioni e quindi ricalcolare il prezzo.

1. Nell'esplora file, espandi Condiviso e quindi seleziona ConfiguraPizzaDialog.razor.

2. Aggiungere il codice per associare il valore del input controllo HTML alle dimensioni della pizza:

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

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

   Usare la finestra di dialogo aggiornata per aggiungere alcune pizze di dimensioni diverse all'ordine. Selezionare un punto sulla barra del dispositivo di scorrimento invece di trascinarlo. 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 cambiano fino a quando non si rilascia il mouse. Occorre correggere questo aspetto.

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. Selezionare F5 o Esegui. Selezionare quindi Avvia debug.

   

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

Ad esempio, il prezzo viene aggiornato a causa di questo codice:

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

Il prezzo viene aggiornato man mano che le dimensioni della pizza cambiano perché il metodo sulla pizza utilizza le dimensioni della pizza GetFormattedTotalPrice() per calcolare il prezzo totale.

Hai fatto progressi sull'app Blazing Pizza. Se si vuole continuare a migliorarlo, completare il modulo successivo in questo percorso di apprendimento.