Ćwiczenie — tworzenie listy zadań do wykonania

10 min

W tym ćwiczeniu użyjesz wszystkiego, czego nauczyliśmy się do tej pory, aby dodać podstawową stronę listy zadań do wykonania do aplikacji Blazor.

Tworzenie strony listy zadań do wykonania

Utwórz nowy projekt aplikacji internetowej platformy Blazor.
Dodawanie pliku Todo.razor do folderu Components/Pages

W programach Visual Studio i Visual Studio Code można dodać plik Razor, klikając prawym przyciskiem myszy folder Components/Pages w Eksplorator rozwiązań i wybierając odpowiednią opcję, aby dodać nowy plik.

Plik Razor można również utworzyć przy użyciu interfejsu wiersza polecenia platformy .NET za pomocą następującego polecenia:
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
Opcja -n|--name w poprzednim poleceniu określa nazwę nowego składnika Razor. Nowy składnik jest tworzony w folderze projektu Components/Pages z opcją -o|--output .

Ważne

Nazwy plików składników Razor powinny mieć pierwszą literę, aby można było je łatwo odróżnić od innych elementów HTML.
Todo Otwórz składnik i dodaj dyrektywę @page Razor na początku pliku z względnym adresem URL /todo, a następnie ustaw tryb renderowania na , aby InteractiveServer składnik mógł obsługiwać zdarzenia interfejsu użytkownika.
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
Zastosuj zmiany do aplikacji i spróbuj przejrzeć stronę "/todo", aby wyświetlić nową stronę.

Nowa strona listy zadań do wykonania nie jest jeszcze wyświetlana w menu nawigacji z innymi istniejącymi stronami. Menu nawigacji jest definiowane w składniku NavMenu , który jest częścią układu aplikacji. Zaktualizujmy składnik, NavMenu aby dodać link do strony listy zadań do wykonania.

Otwórz plik Components/Layout/NavMenu.razor.
nav Znajdź element w składniku NavMenu i dodaj następujący div element poniżej istniejącego elementu nawigacji dla strony pogody.
```
<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>
```
Składnik NavLink jest wbudowanym składnikiem blazor, który renderuje tag kotwicy. Jeśli bieżący adres przeglądarki jest zgodny href z parametrem NavLink, renderuje również klasę active CSS, której można użyć do stylów linku.

Po zastosowaniu tej zmiany powinna zostać wyświetlona strona Todo w menu nawigacyjnym.

Tworzenie listy elementów do wykonania

Utwórz nowy TodoItem.cs plik w katalogu głównym projektu (na tym samym poziomie co Program.cs) i dodaj do niego następującą klasę C#.
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
W pliku Todo.razor dodaj pole listy elementów do wykonania w @code bloku.
```
@code {
    private List<TodoItem> todos = new();
}
```
Renderuj nieurządkowaną listę wszystkich zadań do wykonania przy użyciu foreach pętli.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
Nie widzisz jeszcze niczego renderowanego dla listy zadań do wykonania, ponieważ lista jest pusta. Potrzebujesz sposobu dodawania niektórych elementów do wykonania.

Dodawanie elementów do wykonania

Dodajmy kilka elementów interfejsu użytkownika do dodawania elementów do wykonania do naszej listy.

W pliku Todo.razor dodaj input tag i pod nieurządkowaną listą button .
```
<input />
<button>Add todo</button>
```

Utwórz pole ciągu i powiąż newTodo je input z atrybutem @bind dyrektywy.

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

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

Dodaj procedurę @onclick obsługi, która button dodaje nowy TodoItem element do todos listy na podstawie wartości , newTodo a następnie resetuje wartość newTodo do pustego ciągu.

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

Sprawdź, czy możesz teraz dodawać elementy do wykonania i wyświetlać je na liście. Wartość input powinna również zostać zresetowana po dodaniu każdego elementu do wykonania.

Dodawanie pól wyboru i liczenie niekompletnych elementów do wykonania

Potrzebujesz sposobu oznaczania elementów do wykonania jako ukończonych, edytowania istniejących elementów do wykonania i liczenia liczby elementów do wykonania.

Zaktualizuj zawartość li elementu w celu renderowania typu input powiązanego checkbox z elementem i tekstu todo.IsDone powiązanego input z todo.Titleelementem .

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

Zaktualizuj nagłówek, <h3> aby wyświetlić liczbę elementów zadań do wykonania, które nie zostały ukończone (IsDone to false).
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```

Po zakończeniu dodawania kodu plik Todo.razor powinien wyglądać podobnie do następującego:

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

Po zastosowaniu zmian w aplikacji spróbuj dodać elementy, edytować elementy i oznaczyć elementy do wykonania w celu przetestowania składnika.

Lista zadań do wykonania platformy Blazor jest teraz zakończona ✅.

Sprzężenie zwrotne

Czy ta strona była pomocna?