Упражнение. Создание списка действий

10 мин

В этом упражнении вы используете все, что вы узнали до сих пор, чтобы добавить базовую страницу списка действий в приложение Blazor.

Создание страницы списка действий

Создайте проект Blazor Web App.
Добавление файла Todo.razor в папку Components/Pages

В Visual Studio и Visual Studio Code можно добавить файл Razor, щелкнув правой кнопкой мыши папку Components/Pages в Обозреватель решений и выбрав соответствующий параметр, чтобы добавить новый файл.

Вы также можете создать файл Razor с помощью интерфейса командной строки .NET с помощью следующей команды:
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
Параметр -n|--name в предыдущей команде задает имя нового компонента Razor. Новый компонент создается в папке Components/Pages проекта с параметром -o|--output.

Внимание

Имена файлов компонентов Razor должны иметь заглавную букву, чтобы их можно было легко отличить от других HTML-элементов.
Todo Откройте компонент и добавьте @page директиву Razor в верхнюю часть файла с относительным URL-адресом /todo, и установите режим отрисовки на InteractiveServer, чтобы компонент мог обрабатывать события пользовательского интерфейса.
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
Примените изменения к приложению и попробуйте перейти на адрес "/todo", чтобы увидеть свою новую страницу.

Новая страница списка задач еще не отображается в меню навигации с другими существующими страницами. Меню навигации определяется в NavMenu компоненте, который является частью макета приложения. Давайте обновим NavMenu компонент, чтобы добавить ссылку на страницу списка действий.

Откройте Components/Layout/NavMenu.razor.
nav Найдите элемент компонента NavMenu и добавьте следующий div элемент под существующим элементом навигации для страницы погоды.
```
<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>
```
Компонент NavLink — это встроенный компонент Blazor, который отображает тег привязки. Если текущий адрес браузера совпадает с href для NavLink, он также отображает этот active CSS класс, который можно использовать для стилизации ссылки.

После применения этого изменения вы увидите страницу todo в меню навигации.

Создание списка элементов для выполнения

Создайте новый TodoItem.cs файл в корне проекта (тот же уровень, что Program.csи) и добавьте в него следующий класс C#.
```
public class TodoItem
{
    public string? Title { get; set; }
    public bool IsDone { get; set; } = false;
}
```
В Todo.razor добавьте поле для списка дел в блоке @code .
```
@code {
    private List<TodoItem> todos = new();
}
```
Создайте неупорядоченный список всех дел с помощью цикла foreach.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>
```
Вы еще не видите ничего отображаемого для списка действий, так как список пуст. Вам нужен способ добавления пунктов списка дел.

Добавить задачи в список дел

Давайте добавим элементы пользовательского интерфейса для добавления задач в наш список.

В Todo.razor добавьте тег input и элемент button под списком без упорядочивания.
```
<input />
<button>Add todo</button>
```
Создайте строковое поле newTodo и привяжите его к input с использованием атрибута директивы @bind.
```
<input @bind="newTodo" />
<button>Add todo</button>

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

Добавьте обработчик в @onclick, который добавляет новый button в список TodoItem на основе значения todos, а затем сбрасывает значение newTodo на пустую строку.

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

Убедитесь, что теперь вы можете добавлять задачи, и они появляются в списке. Значение input также должно сбрасываться после добавления каждого элемента.

Добавить флажки и подсчитать незавершенные задачи

Вам нужен способ пометить элементы как завершенные, изменить существующие элементы для выполнения и подсчитать, сколько элементов нужно сделать.

Обновите содержимое элемента li, чтобы отобразить input типа checkbox, который привязан к todo.IsDone, и текст input , привязанный к todo.Title.
```
<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>    
```
Обновите заголовок <h3>, чтобы отобразить количество не завершенных элементов списка дел (IsDone имеет значение false).
```
<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
```

После добавления кода файл Todo.razor должен выглядеть следующим образом:

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

После применения изменений в приложении попробуйте добавить элементы, изменить элементы и пометить элементы, выполненные для тестирования компонента.

Теперь ваш список дел Blazor завершен ✅.

Обратная связь

Была ли эта страница полезна?