Oefening: een onderdeel toevoegen

In deze oefening voegt u een Razor-onderdeel toe aan de startpagina van uw app.

Het onderdeel Teller toevoegen aan de startpagina

1. Open het bestand Components/Pages/Home.razor.

2. Voeg een Counter onderdeel toe aan de pagina door een <Counter /> element toe te voegen aan het einde van het Home.razor-bestand.

   @page "/"
   
   <PageTitle>Home</PageTitle>
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter />
   

3. Pas de wijziging toe door de app opnieuw te starten of door hot reload te gebruiken. Het Counter onderdeel wordt weergegeven op de startpagina.

   

Een onderdeel wijzigen

Definieer een parameter op het Counter-component om op te geven hoeveel het toeneemt bij elke keer dat op de knop wordt gedrukt.

1. Voeg een openbare eigenschap toe aan IncrementAmount met een [Parameter]-attribuut.

2. Wijzig de IncrementCount methode om de IncrementAmount-waarde te gebruiken bij het verhogen van de waarde van currentCount.

   De bijgewerkte code in Counter.razor- moet er als volgt uitzien:

   @page "/counter"
   @rendermode InteractiveServer
   
   <PageTitle>Counter</PageTitle>
   
   <h1>Counter</h1>
   
   <p role="status">Current count: @currentCount</p>
   
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       [Parameter]
       public int IncrementAmount { get; set; } = 1;
   
       private void IncrementCount()
       {
           currentCount += IncrementAmount;
       }
   }
   

3. Werk in Home.razorhet <Counter />-element bij om een IncrementAmount kenmerk toe te voegen waarmee het incrementele bedrag wordt gewijzigd in 10, zoals wordt weergegeven op de laatste regel in de volgende code:

   @page "/"
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <Counter IncrementAmount="10" />
   

4. Pas de wijzigingen toe op de actieve app.

   Het Home-onderdeel heeft nu een eigen teller die steeds met 10 wordt verhoogd wanneer de knop Klik op mij is geselecteerd, zoals wordt weergegeven in de volgende afbeelding.

   

   Het Counter-onderdeel bij /counter blijft met één toenemen.