Indietro

Prossima

Esercizio - Aggiungere un componente

Completato

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

Aggiungere il componente Contatore alla home page

1. Espandere le cartelle in Esplora soluzioni di Visual Studio. Se Esplora soluzioni non è visualizzato, selezionare File>Esplora soluzioni.

2. Selezionare Pagine per visualizzare le pagine Razor esistenti.

3. Selezionare il file Index.razor per aprirlo.

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

   @page "/"
   
   <h1>Hello, world!</h1>
   
   Welcome to your new app.
   
   <SurveyPrompt Title="How is Blazor working for you?" />
   
   <Counter />
   

Se l'app è ancora in esecuzione salvare il file e selezionare il comando Ricaricamento rapido (ALT+F10) in modo che il componente Counter venga visualizzato nella home page. Nell'app in esecuzione verificare che il contatore venga visualizzato selezionando un'altra scheda, quindi selezionando la scheda Home per tornare alla home page. Se il debug è stato arrestato in precedenza, avviare nuovamente l'app selezionando Debug>Avvia debug.

Per arrestare l'esecuzione, tornare a Visual Studio e premere MAIUSC+F5 per arrestare l'app.

Se l'app è ancora in esecuzione, tornare a Visual Studio Code e premere MAIUSC+F5 per arrestare l'app. Salvare il file e avviare di nuovo l'app selezionando Esegui avvia>debug

Quando si è pronti per arrestare, tornare a Visual Studio Code e premere MAIUSC+F5 per arrestare l'app.

Modificare un componente

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

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

Aggiornare il codice nel file Counter.razor come indicato di seguito:

@page "/counter"

<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 Index.razor aggiornare <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.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter IncrementAmount="10" />

Avviare di nuovo l'app

Il componente Index 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 (Counter.razor) in /counter continua a essere incrementato di un'unità.

Continua