Crear su primera aplicación web con ASP.NET Core con Blazor

Windows Linux macOS

Modificar un componente

Los parámetros de los componentes se especifican mediante atributos o contenido secundario, que permiten establecer propiedades en el componente secundario. Defina un parámetro en el componente Counter para especificar cuánto se incrementa con cada clic de botón:

  • Agregar una propiedad pública para IncrementAmount con un atributo [Parameter].
  • Cambiar el método IncrementCount para utilizar el IncrementAmount cuando se incrementa el valor de currentCount.

En el código siguiente se muestra cómo lograrlo. Las líneas resaltadas muestran los cambios.

Components/Pages/Counter.razor
@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;
    }
}

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 línea resaltada en el siguiente código:

Components/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Aplique el cambio a la aplicación haciendo clic en el botón de Recarga activa. El componente Home tiene ahora su propio contador que se incrementa de diez en diez cada vez que se selecciona el botón Hacer clic aquí, como se muestra en la siguiente imagen. El componente Counter (Counter.razor) en /counter sigue incrementando de uno en uno.

El componente Home tiene ahora su propio contador que se incrementa de diez en diez cada vez que se selecciona el botón Hacer clic aquí, como se muestra en la siguiente imagen. El componente Counter (Counter.razor) en /counter sigue incrementando de uno en uno.

La página principal contiene ahora un contador que se incrementa en 10 mostrando el contador a 40.