Esercizio - Aggiungere un componente

Completato

In questo esercizio si aggiunge un componente Razor alla home page dell'app.

Aggiungere il componente Contatore alla home page

1. Aprire il file Components/Pages/Home.razor.

2. Aggiungere un componente Counter alla pagina aggiungendo un elemento <Counter /> alla fine del file Home.razor.

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

3. Applicare la modifica riavviando l'app o usando il ricaricamento rapido. Il componente Counter viene visualizzato nella home page.

   

Modificare un componente

Definire un parametro nel componente Counter per specificare l'incremento di ogni clic sul pulsante.

1. Aggiungere una proprietà pubblica per IncrementAmount con un attributo [Parameter].

2. Modificare il metodo IncrementCount per usare il valore IncrementAmount quando si incrementa il valore di currentCount.

   Il codice aggiornato in Counter.razor sarà simile al seguente:

   @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. In Home.razor, aggiornare l'elemento <Counter /> per aggiungere un attributo IncrementAmount che modifica l'incremento in 10, come illustrato nell'ultima riga del codice seguente:

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

4. Applicare le modifiche all'app in esecuzione.

   Il componente Home ha ora un proprio contatore che viene incrementato di dieci unità ogni volta che viene selezionato il pulsante Fare clic qui, come illustrato nell'immagine seguente.

   

   Il componente Counter in /counter continua a essere incrementato di uno.