Esercizio: Creare un modulo dell'indirizzo con i componenti Blazor

• 4 minuti

Al momento, l'app Blazing Pizza usa elementi HTML per acquisire dati e per i pulsanti. Il framework Blazor ha migliorato il supporto per i moduli che consentono loro di usare componenti che possono essere associati a un modello C#.

Il team vuole sostituire gli elementi HTML correnti con i componenti Blazor. Il team desidera che sia possibile inviare ordini solo se l'indirizzo e il nome non sono vuoti.

Nell'esercizio si sostituiranno i campi HTML correnti con un componente Blazor e si modificherà la modalità di invio degli ordini del cliente. Verrà illustrato come usare EditContext per scrivere convalide manuali per un modulo.

Aggiungere un componente EditForm Blazor

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

2. Nel blocco <div class="main"> aggiungere un nuovo componente EditForm.

   <div class="main">
       <EditForm Model=Order.DeliveryAddress OnSubmit=CheckSubmission>
   

3. Nell'elemento </button> chiudere il componente EditForm.

           </button>
       </EditForm>
   </div>
   

4. Rimuovere l'evento @onclick nell'oggetto </button>.

   <button class="checkout-button btn btn-warning" disabled=@isSubmitting>
   

5. Nel blocco @code aggiungere il codice per gestire l'invio del modulo sopra il metodo PlaceOrder esistente.

   private async Task CheckSubmission()
   {
       isSubmitting = true;
       await PlaceOrder();
       isSubmitting = false;
   }
   

6. Eliminare la riga di codice isSubmitting = true; dal metodo PlaceOrder().

Sostituire gli elementi HTML con i componenti Blazor

1. In Esplora file espandere Condiviso, quindi selezionare AddressEditor.razor.

2. Selezionare il menu Modifica, quindi selezionare Sostituisci.

3. Nel primo campo immettere <input e nel campo sostituisci immettere <InputText, quindi selezionare Sostituisci tutto.

   

4. Selezionare il menu Modifica, quindi selezionare Sostituisci.

5. Nel primo campo immettere @bind= e nel campo sostituisci immettere @bind-Value=, quindi selezionare Sostituisci tutto.

6. Rimuovere il codice @ref="startName" nel campo Name.

7. Rimuovere tutto il codice sotto la dichiarazione Parameter nel blocco @code. Il blocco avrà un aspetto simile al seguente.

   @code {
       [Parameter] public Address Address { get; set; }
   }
   

   FocusAsync è attualmente supportato solo sugli elementi HTML.

Verificare la presenza di campi vuoti prima di inviare un modulo

Verrà aggiunto un messaggio di errore che l'app può mostrare a un cliente se non immette il nome o l'indirizzo.

1. In Esplora file espandere Pagine e selezionare Checkout.razor.

2. Aggiungere un messaggio di errore nell'elemento h4>Deliver to...</h4>.

   <div class="checkout-delivery-address">
     <h4>Deliver to...</h4>
     @if (isError) {
       <div class="alert alert-danger">Please enter a name and address.</div>
     }
     <AddressEditor Address="Order.DeliveryAddress" />
   </div>
   

3. Nel blocco @code aggiungere una dichiarazione per l'oggetto booleano isError.

   bool isError = false;
   

4. Migliorare il metodo CheckSubmission() per inviare un ordine solo se i campi relativi al nome e al codice postale contengono dati.

   private async Task CheckSubmission(EditContext editContext)
   {
       isSubmitting = true;
       var model = editContext.Model as Address;
       isError = string.IsNullOrWhiteSpace(model?.Name)
           || string.IsNullOrWhiteSpace(model?.Line1)
           || string.IsNullOrWhiteSpace(model?.PostalCode);
       if (!isError)
       {
           await PlaceOrder();
       }
       isSubmitting = false;
   }
   

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

   Provare a ordinare alcune pizze senza immettere alcuna informazione. Verrà visualizzato il messaggio di errore.

   

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