Creare un'app Blazor todo list

Questa esercitazione offre un'esperienza di lavoro di base per la creazione e la modifica di un'app Blazor . Per indicazioni dettagliateBlazor, vedere la documentazione di Blazor riferimento.

Scopri come:

• Creare un progetto di app todo list Blazor
• Modificare i Razor componenti
• Usare la gestione degli eventi e il data binding nei componenti
• Usare il routing in un'app Blazor

Al termine di questa esercitazione si avrà un'app todo list funzionante.

Prerequisiti

Scaricare e installare .NET se non è già installato nel sistema o se il sistema non ha installato la versione più recente.

Creare un'app Blazor

Creare una nuova Blazor app Web denominata TodoList in una shell dei comandi:

dotnet new blazor -o TodoList

L'opzione -o|--output crea una cartella per il progetto. Se è stata creata una cartella per il progetto e la shell dei comandi è aperta in tale cartella, omettere l'opzione -o|--output e il valore per creare il progetto.

Il comando precedente crea una cartella denominata TodoList con l'opzione -o|--output per contenere l'app. La TodoList cartella è la cartella radice del progetto. Passare alla TodoList cartella con il comando seguente:

cd TodoList

Creare un'app todo list Blazor

Aggiungere un nuovo TodoRazor componente all'app usando il comando seguente:

dotnet new razorcomponent -n Todo -o Components/Pages

L'opzione -n|--name nel comando precedente specifica il nome del nuovo Razor componente. Il nuovo componente viene creato nella cartella Components/Pages del progetto con l'opzione -o|--output.

Importante

Razor I nomi dei file dei componenti richiedono una prima lettera maiuscola. Aprire la cartella Pages e verificare che il nome del file del componente Todo inizi con la lettera maiuscola T. Il nome del file deve essere Todo.razor.

Aprire il Todo componente in qualsiasi editor di file e apportare le modifiche seguenti all'inizio del file:

• Aggiungere una @pageRazor direttiva con un URL relativo di /todo.
• Abilitare l'interattività nella pagina in modo che non venga eseguito solo il rendering statico. La modalità di rendering Interactive Server consente al componente di gestire gli eventi dell'interfaccia utente dal server.
• Aggiungere un titolo di pagina con il PageTitle componente , che consente di aggiungere un elemento HTML <title> alla pagina.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Salvare il file Todo.razor.

Aggiungere il componente Todo alla barra di spostamento.

Il componente NavMenu viene usato nel layout dell'app. I layout sono componenti che consentono di evitare la duplicazione del contenuto in un'app. Il componente NavLink specifica un segno nell'interfaccia utente dell'app quando l'URL del componente viene caricato dall'app.

Nel contenuto dell'elemento di spostamento (<nav>) del NavMenu componente aggiungere l'elemento seguente <div> per il Todo componente.

In Components/Layout/NavMenu.razor:

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

Salvare il file NavMenu.razor.

Compilare ed eseguire l'app eseguendo il dotnet watch run comando nella shell dei comandi dalla TodoList cartella . Dopo l'esecuzione dell'app, visitare la nuova pagina Todo selezionando il Todo collegamento nella barra di spostamento dell'app, che carica la pagina in /todo.

Lasciare l'app che esegue la shell dei comandi. Ogni volta che un file viene salvato, l'app viene ricompilata automaticamente e la pagina nel browser viene ricaricata automaticamente.

Aggiungere un TodoItem.cs file alla radice del progetto (la TodoList cartella) per contenere una classe che rappresenta un elemento todo. Utilizzare il codice C# seguente per la classe TodoItem.

TodoItem.cs:

namespace BlazorSample;

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

Nota

Se si usa Visual Studio per creare il file e TodoItem la TodoItem.cs classe, usare uno degli approcci seguenti:

• Rimuovere lo spazio dei nomi generato da Visual Studio per la classe .
• Usare il pulsante Copia nel blocco di codice precedente e sostituire l'intero contenuto del file generato da Visual Studio.

Tornare al Todo componente ed eseguire le attività seguenti:

• 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>).

Components/Pages/Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

Salvare il TodoItem.cs file e il file aggiornato Todo.razor . Nella shell dei comandi l'app viene ricompilata automaticamente quando i file vengono salvati. Il browser ricarica la pagina.

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:

private string? newTodo;

Modificare l'elemento di testo <input> per l'associazione newTodo con l'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"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

<ul>
    @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 Todo.razor. L'app viene ricompilata automaticamente nella shell dei comandi e la pagina viene ricaricata nel browser.

Il testo del titolo per ogni elemento elenco azioni può essere reso modificabile e 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>
      @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). L'espressione Razor nell'intestazione seguente valuta ogni volta che Blazor esegue il rendering del componente.

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

Componente completato Todo :

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

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

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="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 Todo.razor. L'app viene ricompilata automaticamente nella shell dei comandi e la pagina viene ricaricata nel browser.

Per testare il componente, aggiungere elementi, modificare elementi e contrassegnare gli elementi elenco azioni come completati.

Al termine, arrestare l'app nella shell dei comandi. Molte shell dei comandi accettano il comando da tastiera CTRL+C (Windows) o ⌘+C (macOS) per arrestare un'app.

Pubblicare in Azure

Per informazioni sulla distribuzione in Azure, vedere Avvio rapido: Distribuire un'app Web ASP.NET.

Passaggi successivi

Questa esercitazione ha descritto come:

• Creare un progetto di app todo list Blazor
• Modificare i Razor componenti
• Usare la gestione degli eventi e il data binding nei componenti
• Usare il routing in un'app Blazor

Informazioni sugli strumenti per ASP.NET Core Blazor:

ASP.NET Core Blazor