Övning – Skapa en att göra-lista

10 minuter

I den här övningen använder du allt du har lärt dig hittills för att lägga till en grundläggande att göra-lista-sida i din Blazor-app.

Skapa att göra-listsidan

Skapa ett nytt Blazor Web App-projekt.
Lägg till en Todo.razor-fil i mappen Components/Pages

I Visual Studio och Visual Studio Code kan du lägga till Razor-filen genom att högerklicka på mappen Komponenter/sidor i Solution Explorer och välja lämpligt alternativ för att lägga till en ny fil.

Du kan också skapa Razor-filen med hjälp av .NET CLI med det här kommandot:
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
Alternativet -n|--name i föregående kommando anger namnet på den nya Razor-komponenten. Den nya komponenten skapas i projektets Components/Pages mapp med alternativet -o|--output .

Viktigt!

Razor-komponentfilnamn bör ha en stor första bokstav så att de enkelt kan skiljas från andra HTML-element.
Öppna komponenten Todo och lägg till ett @page Razor-direktiv överst i filen med en relativ URL /todo, och ange återgivningsläget till InteractiveServer så att komponenten kan hantera användargränssnittshändelser.
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
Använd ändringarna i appen och försök bläddra till "/todo" för att se din nya sida.

Den nya att göra-listsidan visas ännu inte i navigeringsmenyn med de andra befintliga sidorna. Navigeringsmenyn definieras i komponenten NavMenu , som är en del av appens layout. Nu ska vi uppdatera komponenten NavMenu för att lägga till en länk till att göra-listan.

Öppna Komponenter/Layout/NavMenu.razor.
Leta upp elementet nav i komponenten NavMenu och lägg till följande div element under det befintliga navigeringsobjektet för vädersidan.
```
<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>
```
Komponenten NavLink är en inbyggd Blazor-komponent som renderar en fästpunktstagg. Om den aktuella webbläsaradressen matchar href för NavLink, renderas även en active CSS-klass som du kan använda för att formatera länken.

När du har tillämpat den här ändringen bör du nu se sidan Todo i navigeringsmenyn.

Skapa en lista över att göra-objekt

Skapa en ny TodoItem.cs fil i projektets rot (på samma nivå som Program.cs) och lägg till följande C#-klass i den.
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
I Todo.razor lägger du till ett fält för listan över att göra-objekt i @code blocket.
```
@code {
    private List<TodoItem> todos = new();
}
```
Rendera en osorterad lista över alla att göra-aktiviteter med hjälp av en foreach loop.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
Du ser inget renderat för att göra-listan än, eftersom listan är tom. Du behöver ett sätt att lägga till några att göra-objekt på.

Lägga till att göra-objekt

Nu ska vi lägga till några gränssnittselement för att lägga till att göra-objekt i listan.

I Todo.razor lägger du till en input tagg och en button under den osorterade listan.
```
<input />
<button>Add todo</button>
```

Skapa ett newTodo strängfält och binda det till input med hjälp av direktivattributet @bind .

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

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

Lägg till en @onclick-hanterare som lägger till en ny button i TodoItem-listan baserat på värdet av todos och återställer sedan värdet av newTodo till en tom sträng.

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

Kontrollera att du nu kan lägga till att göra-objekt och att de visas i listan. Värdet input bör också återställas efter att varje att göra-objekt har lagts till.

Lägg till kryssrutor och räkna ofullständiga att göra-objekt

Du behöver ett sätt att markera att göra-objekt som slutförda, redigera befintliga att göra-objekt och räkna hur många att göra-objekt som ännu inte har gjorts.

Uppdatera innehållet i elementet li för att återge en input typ checkbox som är bunden till todo.IsDone och en text input som är bunden till todo.Title.

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

<h3> Uppdatera rubriken för att visa antalet att göra-objekt som inte är slutförda (IsDone är false).
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```

När du har lagt till kod bör todo.razor-filen likna följande:

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

När du har tillämpat ändringarna på appen kan du prova att lägga till objekt, redigera objekt och markera att göra-objekt som gjorts för att testa komponenten.

Din Blazor att-göra-lista är nu klar ✅.

Feedback

Var den här sidan till hjälp?