Ejercicio: Adición de un componente

Completado

En este ejercicio, se agrega un componente de Razor a la página principal de la aplicación.

Adición del componente de contador a la página de inicio

1. Abra el archivo Components/Pages/Home.razor.

2. Agregue un componente Counter a la página; para ello, agregue un elemento <Counter /> al final del archivo Home.razor.

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

3. Aplique el cambio reiniciando la aplicación o usando la recarga frecuente. El componente Counter se muestra en la página principal.

   

Modificación de un componente

Defina un parámetro en el componente Counter para especificar en cuánto se incrementa con cada clic de botón.

1. Agregue una propiedad pública para IncrementAmount con un atributo [Parameter].

2. Cambie el método IncrementCount para usar el valor IncrementAmount al aumentar el valor de currentCount.

   El código actualizado en Counter.razor debe tener este aspecto:

   @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. En Home.razor, actualice el elemento <Counter /> para agregar un atributo IncrementAmount que cambie la cantidad de incremento a diez, como se muestra en la última línea del código siguiente:

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

4. Aplique los cambios a la aplicación en ejecución.

   Ahora el componente Home tiene su propio contador que se incrementa en diez cada vez que se selecciona el botón Click me (Hacer clic aquí), como se muestra en la imagen siguiente.

   

   El componente Counter en /counter continúa incrementándose en uno.