Übung: Erstellen eines Adressformulars mit Blazor-Komponenten

Abgeschlossen

Derzeit verwendet die Blazing Pizza-App HTML-Elemente zum Erfassen von Daten und für Schaltflächen. Das Blazor-Framework bietet verbesserte Unterstützung für Formulare, die es ihnen ermöglichen, Komponenten zu verwenden, die an ein C#-Modell gebunden werden können.

Das Team möchte, dass Sie die aktuellen HTML-Elemente durch Blazor-Komponenten ersetzen. Das Team möchte, dass Sie nur Bestellungen übermitteln, wenn Adresse und Name nicht unausgefüllt sind.

In dieser Übung ersetzen Sie die aktuellen HTML-Felder durch eine Blazor-Komponente und ändern, wie der Kunde Bestellungen übermittelt. Sie erfahren, wie Sie EditContext verwenden, um manuelle Validierungen für ein Formular zu schreiben.

Hinzufügen einer Blazor-EditForm-Komponente

1. Erweitern Sie in Visual Studio Code im Datei-Explorer Seiten, und wählen Sie dann Checkout.razor aus.

2. Fügen Sie unterhalb des <div class="main">-Blocks eine neue EditForm-Komponente hinzu.

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

3. Schließen Sie unter dem </button>-Element die EditForm-Komponente.

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

4. Entfernen Sie das @onclick-Ereignis für </button>.

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

5. Fügen Sie im @code-Block den Code zur Verarbeitung der Formularübermittlung über der vorhandenen PlaceOrder-Methode hinzu.

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

6. Löschen Sie die isSubmitting = true;-Codezeile aus der PlaceOrder()-Methode.

Ersetzen von HTML-Elementen durch Blazor-Komponenten

1. Erweitern Sie im Datei-Explorer Freigegeben, und wählen Sie dann AddressEditor.razor aus.

2. Wählen Sie das Menü Bearbeiten und dann Ersetzen aus.

3. Geben Sie im ersten Feld <input ein, geben Sie in das „Ersetzen“-Feld <InputText ein, und wählen Sie dann „Alle ersetzen“ aus.

   

4. Wählen Sie das Menü Bearbeiten und dann Ersetzen aus.

5. Geben Sie im ersten Feld @bind= ein, geben Sie in das „Ersetzen“-Feld @bind-Value= ein, und wählen Sie dann „Alle ersetzen“ aus.

6. Entfernen Sie den @ref="startName"-Code im Feld „Name“.

7. Entfernen Sie den gesamten Code unterhalb der Parameterdeklaration im @code-Block. Der Block sollte jetzt wie folgt aussehen.

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

   FocusAsync wird derzeit nur für HTML-Elemente unterstützt.

Überprüfen auf leere Felder vor dem Übermitteln eines Formulars

Fügen wir nun eine Fehlermeldung hinzu, die die App einem Kunden anzeigen kann, wenn er seinen Namen oder seine Adresse nicht eingibt.

1. Erweitern Sie im Datei-Explorer Seiten, und wählen Sie dann Checkout.razor aus.

2. Fügen Sie unterhalb des h4>Deliver to...</h4>-Elements eine Fehlermeldung hinzu.

   <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. Fügen Sie im @code-Block eine Deklaration für den booleschen isError hinzu.

   bool isError = false;
   

4. Verbessern Sie die CheckSubmission()-Methode dahingehend, dass eine Bestellung nur dann aufgegeben wird, wenn die Felder für Name und Postleitzahl Daten enthalten.

   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. Drücken Sie in Visual Studio Code F5, oder wählen Sie im Menü Ausführen>Debugging starten aus.

   Versuchen Sie, einige Pizzas ohne Eingabe von Informationen zu bestellen. Die Fehlermeldung sollte angezeigt werden.

   

6. Drücken Sie UMSCHALT + F5, um die Ausführung der App zu beenden.