Esercizio - Data binding ed eventi

10 minuti

In questo esercizio si crea un componente elenco Todo di base all'interno dell'app Blazor.

Creare la pagina Attività

Creare la pagina ToDo:

In Visual Studio fare clic con il pulsante destro del mouse sulla cartella Pages in Esplora soluzioni e scegliere Aggiungi>Componente Razor. Denominare il componente Todo.razor.

In Visual Studio Code fare clic con il pulsante destro del mouse sulla Pages cartella in Esplora soluzioni e scegliere Aggiungi nuovo file.>Componente Razor. Denominare il componente Todo.razor. Il file deve essere creato all'interno della Pages cartella

Importante

I nomi dei file dei componenti Razor devono iniziare con la lettera maiuscola. Espandere la cartella Pages e verificare che il Todonome del file del componente inizi con la lettera maiuscola T. Il nome del file deve essere Todo.razor.
Aprire il componente Todo e aggiungere una direttiva Razor @page all'inizio del file con l'URL relativo /todo.
```
@page "/todo"

<h3>Todo</h3>

@code {

}
```
Salvare il file Pages/Todo.razor.

Il layout dell'app usa il componente NavMenu. I layout sono componenti che consentono di evitare la duplicazione del contenuto in un'app. Il componente NavLink esegue il rendering di un tag di ancoraggio HTML che può essere personalizzato per fornire un'indicazione nell'interfaccia utente dell'app quando l'URL dell'app corrisponde al collegamento.

Espandere la cartella Condivisa in Esplora soluzioni e aprire il file NavMenu.razor. Nella sezione <nav>...</nav> del componente NavMenu aggiungere i seguenti nuovi componenti <div>...</div> e NavLink per il componente Todo.

In Shared/NavMenu.razor:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">

        <!-- ... -->

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
        </div>
    </nav>
</div>

Salvare il file Shared/NavMenu.razor. Il browser dovrebbe essere aggiornato automaticamente e ora è disponibile la voce "Todo" sulla barra di spostamento:

Creare un elemento elenco azioni

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Dati e quindi scegliere Aggiungi>Classe. Assegnare alla nuova classe il nome TodoItem.cs e quindi selezionare Aggiungi. Questa nuova classe conterrà una classe C# che rappresenta un elemento di attività.

Sostituire il codice dalla riga 7 verso il basso con il codice C# seguente per la classe TodoItem. Dichiarare Title come stringa che ammette i valori Null utilizzando ?. Salva il file.

namespace BlazorHybridApp.Data;

public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}

Associare un elenco di elementi elenco azioni

A questo punto è possibile associare una raccolta di oggetti TodoItem al codice HTML in Blazor. A tale scopo, apportare le modifiche seguenti nel file Pages/Todo.razor:

Aggiungere la dichiarazione using per TodoItem con @using BlazorHybridApp.Data.
Aggiungere un campo per le voci dell'elenco azioni in un blocco @code. Il componente Todo usa questo campo per mantenere lo stato dell'elenco azioni.
Aggiungere un markup elenco non ordinato e un ciclo foreach per eseguire il rendering di ogni elemento elenco azioni come elemento elenco (<li>).

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

@code {
    private List<TodoItem> todos = new();
}

Aggiungere elementi modulo per creare elenchi azioni

L'app richiede elementi dell'interfaccia utente per l'aggiunta di elementi elenco azioni all'elenco. Aggiungere un input di testo (<input>) e un pulsante (<button>) sotto l'elenco non ordinato (<ul>...</ul>):

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" />
<button>Add todo</button>

@code {
    private List<TodoItem> todos = new();
}

Quando viene selezionato il pulsante Add todo, non accade nulla perché al pulsante non è collegato un gestore eventi.

Aggiungere un metodo AddTodo al componente Todo e registrare il metodo per il pulsante con l'attributo @onclick. Il metodo C# AddTodo viene chiamato quando il pulsante è selezionato:
```
<input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}
```
Per recuperare il titolo del nuovo elemento elenco azioni, aggiungere un campo di stringa newTodo nella parte superiore del blocco @code:
```
@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    // Omitted for brevity...
}
```
Modificare l'elemento <input> per associare newTodo all'attributo @bind:
```
<input placeholder="Something todo" @bind="newTodo" />
```

Aggiornare il metodo AddTodo per aggiungere TodoItem con il titolo specificato all'elenco. Cancellare il valore dell'input di testo impostando newTodo su una stringa vuota:

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Salvare il file Pages/Todo.razor. Ricompilare ed eseguire l'app.
È possibile rendere modificabile il testo del titolo di ogni attività; inoltre, una casella di controllo può consentire all'utente di tenere traccia degli elementi completati. Aggiungere un input casella di controllo per ogni elemento elenco azioni e associarne il valore alla proprietà IsDone. Modificare @todo.Title in un elemento <input> associato a todo.Title con @bind:
```
<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>    
```
Aggiornare l'intestazione <h3> per visualizzare un conteggio del numero di elementi elenco azioni non completati (IsDone è false).
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```
Salvare il file Pages/Todo.razor ed eseguire di nuovo l'app.
Per testare il componente, aggiungere, modificare e contrassegnare gli elementi completati.

Continua

Esercizio - Data binding ed eventi

Creare la pagina Attività

Aggiungere il componente dell'elenco azioni alla barra di spostamento

Creare un elemento elenco azioni

Associare un elenco di elementi elenco azioni

Aggiungere elementi modulo per creare elenchi azioni

Commenti e suggerimenti