Crea la tua prima app Web con ASP.NET Core usando Blazor

Windows Linux macOS

Modifica un componente

I parametri del componente vengono specificati usando attributi o contenuto figlio, che consentono di impostare proprietà sul componente figlio. Definire un parametro nel componente Counter per specificare l'incremento a ogni clic del pulsante:

  • Aggiungi una proprietà pubblica per IncrementAmount con un attributo [Parameter].
  • Modificare il metodo IncrementCount per usare IncrementAmount quando si incrementa il valore di currentCount.

Il codice seguente illustra come ottenere questo risultato. Le righe evidenziate mostrano le modifiche.

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

In Home.razor, aggiorna l'elemento <Counter> per aggiungere un attributo IncrementAmount che modifica il valore dell'incremento in dieci, come illustrato dalla riga evidenziata nel codice seguente:

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Applica la modifica all'app cliccando sul pulsante Ricaricamento rapido. Il componente Home ora un proprio contatore che aumenta di dieci unità ogni volta che si seleziona il pulsante Click me, come mostrato nell'immagine seguente. Il componente Counter (Counter.razor) in /counter continua a essere incrementato di uno.

Il componente Home ora un proprio contatore che aumenta di dieci unità ogni volta che si seleziona il pulsante Click me, come mostrato nell'immagine seguente. Il componente Counter (Counter.razor) in /counter continua a essere incrementato di uno.

La Home page ora contiene un contatore che incrementa di 10 mostrando il contatore a 40.

Continua