Oefening: een Blazor event handler maken voor onclick-events

Blazor biedt u de kracht om C#-code te verbinden met HTML DOM-gebeurtenissen. In deze oefening gebruikt u deze mogelijkheid om een bestaande app te verbeteren.

Als onderdeel van een ontwikkelteam dat werkt aan het verbeteren van een Blazing Pizza-app, wordt u gevraagd het betalingsproces te voltooien om de adressen van klanten vast te leggen. U wilt tekstvelden toevoegen en het betalingsproces verbeteren.

In deze oefening kloont u een bestaande app en maakt u een nieuw adresonderdeel om adresgegevens vast te leggen. Als de velden zijn ingesteld, stelt u de focus in op het eerste veld in het formulier.

De bestaande app van uw team klonen

In deze module wordt de .NET 9.0 SDK gebruikt. Zorg ervoor dat .NET 9.0 is geïnstalleerd door de volgende opdracht uit te voeren in de opdrachtterminal van uw voorkeur:

dotnet --list-sdks

Uitvoer die vergelijkbaar is met het volgende voorbeeld wordt weergegeven:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Zorg ervoor dat er een versie wordt vermeld die begint met 9 . Als er geen wordt vermeld of de opdracht niet wordt gevonden, installeert u de meest recente .NET 9.0 SDK.

Als u uw eerste Blazor-app maakt, volgt u de installatie-instructies voor Blazor om de juiste versie van .NET te installeren en te controleren of uw computer correct is ingesteld. Stop bij de Maak uw app stap.

1. Open Visual Studio Code.

2. Open de geïntegreerde terminal vanuit Visual Studio Code door Weergave te selecteren en vervolgens Terminal te selecteren in het hoofdmenu.

3. Navigeer in de terminal naar de locatie waar u het project wilt maken.

4. Kloon de app vanuit GitHub.

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

5. Selecteer Bestand en kies Map openen....

6. Navigeer in het dialoogvenster Openen naar de BlazingPizza-map en selecteer Select Folder.

   Visual Studio Code vraagt u mogelijk om niet-opgeloste afhankelijkheden. Selecteer Terugzetten.

7. Voer de app uit om te controleren of alles goed werkt.

8. Druk in Visual Studio Code op F5 of selecteer Uitvoeren>Foutopsporing starten.

   

   Configureer enkele pizza's en voeg ze toe aan uw bestelling. Selecteer Order > onder aan de pagina. U zou de huidige betaalpagina moeten zien.

9. Druk op Shift + F5 om te voorkomen dat de app wordt uitgevoerd.

De betaalpagina herstructureren

1. Vouw in Visual Studio Code in de verkenner Pagina's uit en selecteer Checkout.razor.

   Op dit moment toont de kassapagina alleen de lijst met pizza's die zijn geconfigureerd. U wordt gevraagd de pagina te herstructureren om een adressectie op te nemen.

2. Vervang het bestaande <div class="main"> HTML-blok met twee kolommen voor gegevens.

   <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>
   

   De voorgaande code verbindt de HTML-gebeurtenis onclick voor het knopelement met de PlaceOrder Blazor-methode in het @code blok.

   De herstructurering verwijst naar twee nieuwe Blazor-besturingselementen OrderReview en AddressEditor. Verplaats de oude kassacode die de pizza's vermeldt naar het OrderReview onderdeel.

3. Klik in de Verkenner met de rechtermuisknop op Gedeeld en selecteer Nieuw Bestand.

4. Voer OrderReview.razor in als bestandsnaam.

5. Voeg een foreach lus toe om de pizza's in een bestelling weer te geven.

   @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. Klik in de Verkenner met de rechtermuisknop op Gedeeld en selecteer Nieuw Bestand.

7. Voer AddressEditor.razor in als bestandsnaam.

8. Voeg code toe die gebruikmaakt van een input element voor elk veld in een adres. De Address klasse in de map Model toont u alle velden.

   <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; }
   }
   

De nieuwe betaalpagina testen

1. Druk in Visual Studio Code op F5 of selecteer Uitvoeren>Foutopsporing starten.

   

   Voeg een aantal pizza's toe en selecteer Order > om de nieuwe kassastroom te bekijken.

2. Druk op Shift + F5 om te voorkomen dat de app wordt uitgevoerd.

De bruikbaarheid van het formulier verbeteren

Wanneer de klant naar de betaalpagina wordt gebracht, voert u eerst de naam van de klant in. Met Blazor kunt u de focus instellen op HTML-elementen op een pagina. Laten we onze app beter maken door dit gedrag toe te voegen.

1. Wijzig in AddressEditor.razor de HTML voor het naamelement input dat u wilt toevoegen @ref="startName".

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

   Met de Blazor-instructie @ref="startName" kan het codeblok een ElementReference verwijzing naar het invoerelement maken. Vervolgens kunt u deze elementreferentie gebruiken om aan te roepen FocusAsync nadat een pagina is weergegeven.

2. Voeg code toe om FocusAsync aan te roepen nadat een pagina is geladen, onder de [Parameter] public Address Address { get; set; }-declaratie.

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

   Met deze code wordt de ElementReference gemaakt en wordt vervolgens, nadat een pagina is weergegeven, de focus op het Name veld ingesteld.

3. Druk in Visual Studio Code op F5 of selecteer Uitvoeren>Foutopsporing starten.

   

   Voeg een paar pizza's toe en selecteer Order > om te zien dat op de betaalpagina het formulier Name de focus heeft.

4. Druk op Shift + F5 om te voorkomen dat de app wordt uitgevoerd.