Esercizio - Creare un elenco attività

10 minuti

In questo esercizio si usano tutti gli elementi appresi finora per aggiungere una pagina di elenco attività di base all'app Blazor.

Creare la pagina elenco attività

Creare un nuovo progetto di app Web Blazor.
Aggiungere un file Todo.razor alla cartella Components/Pages

In Visual Studio e Visual Studio Code è possibile aggiungere il file Razor facendo clic con il pulsante destro del mouse sulla cartella Components/Pages in Esplora soluzioni e selezionando l'opzione appropriata per aggiungere un nuovo file.

È anche possibile creare il file Razor usando l'interfaccia della riga di comando di .NET con il seguente comando:
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
L'opzione -n|--name nel comando precedente specifica il nome del nuovo componente Razor. Il nuovo componente viene creato nella cartella Components/Pages del progetto con l'opzione -o|--output.

Importante

I nomi file dei componenti Razor devono avere una prima lettera maiuscola, in modo che possano essere facilmente distinti da altri elementi HTML.
Aprire il componente Todo e aggiungere una direttiva Razor @page all'inizio del file con un URL relativo di /todo e impostare la modalità di rendering su InteractiveServer in modo che il componente possa gestire gli eventi dell'interfaccia utente.
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
Applicare le modifiche all'app e provare a passare a "/todo" per visualizzare la nuova pagina.

La nuova pagina elenco attività non viene ancora visualizzata nel menu di spostamento con le altre pagine esistenti. Il menu di spostamento è definito nel componente NavMenu, che fa parte del layout dell'app. Deve essere aggiornato il componente NavMenu per aggiungere un collegamento alla pagina dell'elenco attività.

Aprire Components/Layout/NavMenu.razor.
Trovare l'elemento nav nel componente NavMenu e aggiungere l'elemento seguente div sotto l'elemento di spostamento esistente per la pagina meteo.
```
<div class="nav-item px-3">
    <NavLink class="nav-link" href="todo">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Todo
    </NavLink>
</div>
```
Il componente NavLink è un componente Blazor predefinito che esegue il rendering di un tag di ancoraggio. Se l'indirizzo del browser corrente corrisponde a href per NavLink, esegue anche il rendering di una classe CSS active che può essere usato per applicare lo stile al collegamento.

Dopo aver applicato questa modifica, verrà visualizzata la pagina Attività nel menu di spostamento.

Creare un elenco di elementi attività

Creare un nuovo file TodoItem.cs alla radice del progetto (lo stesso livello di Program.cs) e aggiungervi la classe C# seguente.
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
In Todo.razor aggiungere un campo per l'elenco di elementi attività nel blocco @code.
```
@code {
    private List<TodoItem> todos = new();
}
```
Eseguire il rendering di un elenco non ordinato di tutte le attività usando un ciclo foreach.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
Non verrà visualizzato alcun elemento con rendering eseguito per l'elenco attività, perché l'elenco è vuoto. Si deve trovare un modo per aggiungere alcuni elementi attività.

Aggiunta di elementi di attività

Vengono aggiunti alcuni elementi dell'interfaccia utente per includere elementi attività all'elenco.

In Todo.razor aggiungere un tag input e button sotto l'elenco non ordinato.
```
<input />
<button>Add todo</button>
```

Crearer un campo stringa newTodo e associarlo a input usando l'attributo direttiva @bind.

<input @bind="newTodo" />
<button>Add todo</button>

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

Aggiungere un gestore @onclick a button che aggiunge un nuovo TodoItem a todos in base al valore di newTodo e quindi reimpostare il valore di newTodo in una stringa vuota.

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

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

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

Verificare che sia ora possibile aggiungere elementi attività e che vengano visualizzati nell'elenco. Il valore input deve essere reimpostato anche dopo l'aggiunta di ogni elemento attività.

Aggiungere caselle di controllo e contare gli elementi attività incompleti

Si deve trovare un modo per contrassegnare gli elementi attività come completati, per modificare gli elementi attività esistenti e per contare quanti elementi attività devono ancora essere eseguiti.

Aggiornare il contenuto dell'elemento li per eseguire il rendering di un input di tipo checkbox associato a todo.IsDone e di un testo input associato a todo.Title.

<ul>
    @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>
```

Al termine dell'aggiunta del codice, il file Todo.razor dovrebbe essere simile al seguente:

@page "/todo"
@rendermode InteractiveServer

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

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

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

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

Dopo aver applicato le modifiche all'app, provare ad aggiungere e modificare gli elementi attività e contrassegnarli come eseguiti per testare il componente.

L'elenco attività Blazor è ora completato ✅.

Commenti e suggerimenti

Questa pagina è stata utile?