Esercizio: Creare un gestore eventi Blazor per gli eventi onclick

Completato

Blazor consente di connettere il codice C# agli eventi DOM (Document Object Model) HTML. Questa possibilità verrà usata per migliorare un'app esistente.

Come parte di un team di sviluppo impegnato nell'ottimizzazione di un'app Blazing Pizza, è stato chiesto di completare il processo di pagamento per acquisire gli indirizzi dei clienti. Verranno aggiunti alcuni campi di testo e per migliorare il processo di pagamento.

In questo esercizio si clonerà un'app esistente e si creerà un nuovo componente indirizzo per acquisire i dettagli dell'indirizzo. Una volta aggiunti i campi, verrà impostato lo stato attivo sul primo campo del modulo.

Clonare l'app esistente del team

Nota

In questo modulo vengono usati l'interfaccia della riga di comando di.NET e Visual Studio Code per lo sviluppo locale. Una volta completato questo modulo, è possibile applicare i concetti usando Visual Studio (Windows), Visual Studio per Mac (macOS) o lo sviluppo continuo tramite Visual Studio Code (Windows, Linux e macOS).

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.

Se prima non è stata 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.

1. Aprire Visual Studio Code.

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

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

4. Clonare l'app da GitHub.

   git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza
   

5. Selezionare File, quindi Apri cartella....

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

   Visual Studio Code potrebbe richiedere informazioni sulle dipendenze non risolte. Selezionare Ripristina.

7. Eseguire l'app per controllare che tutto funzioni correttamente.

8. In Visual Studio Code, premere F5 o selezionare Esegui>Avvia debug.

   

   Provare a configurare alcune pizze e ad aggiungerle all'ordine. Nella parte inferiore della pagina selezionare Order > (Ordina). Verrà visualizzata la pagina di pagamento corrente.

9. Premere MAIUSC + F5 per interrompere l'esecuzione dell'app.

Eseguire il refactoring della pagina di pagamento

1. In Visual Studio Code, in Esplora file espandere Pagine e selezionare Checkout.razor.

   Al momento, la pagina di pagamento mostra solo l'elenco delle pizze configurate. È stato chiesto di eseguire il refactoring della pagina per includere una sezione per l'indirizzo.

2. Sostituire il blocco HTML <div class="main"> esistente per avere due colonne per i dati.

   <div class="main">
       <div class="checkout-cols">
           <div class="checkout-order-details">
               <h4>Review order</h4>
               <OrderReview Order="Order" />
           </div>
   
           <div class="checkout-delivery-address">
               <h4>Deliver to...</h4>
               <AddressEditor Address="Order.DeliveryAddress" />
           </div>
       </div>
   
       <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
           Place order
       </button>
   </div>
   

   Il codice precedente connette l'evento HTML onclick per l'elemento button al metodo Blazor PlaceOrder nel blocco @code.

   Il refactoring fa riferimento a due nuovi controlli Blazor, OrderReview e AddressEditor. Il codice di pagamento precedente con l'elenco delle pizze verrà spostato nel componente OrderReview.

3. In Esplora file fare clic con il pulsante destro del mouse su Condiviso, quindi scegliere Nuovo file.

4. Immettere OrderReview.razor come nome file.

5. Aggiungere un ciclo foreach per visualizzare le pizze in un ordine.

   @foreach (var pizza in Order.Pizzas)
   {
       <p>
           <strong>
               @(pizza.Size)"
               @pizza.Special.Name
               (£@pizza.GetFormattedTotalPrice())
           </strong>
       </p>
   }
   
   <p>
       <strong>
           Total price:
           £@Order.GetFormattedTotalPrice()
       </strong>
   </p>
   
   @code {
       [Parameter] public Order Order { get; set; }
   }
   

6. In Esplora file fare clic con il pulsante destro del mouse su Condiviso, quindi scegliere Nuovo file.

7. Immettere AddressEditor.razor come nome file.

8. Aggiungere il codice che usa un elemento input per ogni campo in un indirizzo. La classe Address nella cartella Model mostra tutti i campi.

   <div class="form-field">
       <label>Name:</label>
       <div>
           <input @bind="Address.Name" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 1:</label>
       <div>
           <input @bind="Address.Line1" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 2:</label>
       <div>
           <input @bind="Address.Line2" />
       </div>
   </div>
   
   <div class="form-field">
       <label>City:</label>
       <div>
           <input @bind="Address.City" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Region:</label>
       <div>
           <input @bind="Address.Region" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Postal code:</label>
       <div>
           <input @bind="Address.PostalCode" />
       </div>
   </div>
   
   @code {
       [Parameter] public Address Address { get; set; }
   }
   

Testare la nuova pagina di pagamento

1. In Visual Studio Code, premere F5 o selezionare Esegui>Avvia debug.

   

   Aggiungere alcune pizze e selezionare Order > (Ordina) per visualizzare il nuovo flusso di pagamento.

2. Premere MAIUSC + F5 per interrompere l'esecuzione dell'app.

Migliorare l'usabilità del modulo

Quando il cliente viene indirizzato alla pagina di pagamento, la prima attività che esegue è immettere il proprio nome. Blazor consente di impostare lo stato attivo sugli elementi HTML in una pagina. Si procederà ora all'aggiunta di questa funzionalità per migliorare ulteriormente l'app.

1. In AddressEditor.razor modificare il codice HTML per l'elemento input del nome per aggiungere @ref="startName".

   <input @ref="startName" @bind="Address.Name" />
   

   La direttiva Blazor @ref="startName" consente al blocco di codice di creare un oggetto ElementReference per fare riferimento all'elemento di input. È quindi possibile usare questo riferimento all'elemento per chiamare FocusAsync dopo il rendering di una pagina.

2. Aggiungere il codice per chiamare FocusAsync dopo il caricamento della pagina nella dichiarazione [Parameter] public Address Address { get; set; }.

   private ElementReference startName;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender) {
           await startName.FocusAsync();
       }
   }    
   

   Questo codice crea ElementReference e quindi dopo il rendering di una pagina imposta lo stato attivo sul campo Name.

3. In Visual Studio Code, premere F5 o selezionare Esegui>Avvia debug.

   

   Aggiungere alcune pizze e selezionare Order > (Ordina) per osservare che lo stato attivo si trova sul campo del modulo Name nella pagina di pagamento.

4. Premere MAIUSC + F5 per interrompere l'esecuzione dell'app.