Упражнение. Привязка данных и событий

  • 10 мин

В этом упражнении вы создадите базовый компонент списка todo в приложении Blazor.

Создание страницы todo

  1. Создайте страницу со списком дел:

    В Visual Studio щелкните правой кнопкой мыши папку Components/Pages в Обозреватель решений и выберите "Добавить>компонент Razor". Присвойте компоненту Todo.razorимя.

    В Visual Studio Code щелкните правой кнопкой мыши папку Pages в "Проводнике решений" и выберите "Добавить новый файл" >компонент Razor. Присвойте компоненту Todo.razorимя. Файл должен быть создан внутри Pages папки

    Внимание

    Имена файлов компонентов Razor должны начинаться с прописной буквы. Разверните папку Pages и убедитесь, что Todo имя файла компонента начинается с прописной буквы T. Имя файла должно быть Todo.razor.

  2. Откройте компонент Todo и добавьте директиву Razor @page в начало файла с относительным URL-адресом /todo.

    @page "/todo"

<h3>Todo</h3>

@code {

}

  3. Сохраните файл Components/Pages/Todo.razor.

Добавьте компонент списка дел на панель навигации.

Макет приложения использует NavMenu компонент. Макеты — это компоненты, которые позволяют избежать дублирования содержимого в приложении. Компонент NavLink преобразовывает для просмотра тег привязки HTML, который может быть стилизован для предоставления подсказки в пользовательском интерфейсе приложения, когда URL-адрес приложения соответствует ссылке.

Разверните папку Components/Layout в Обозреватель решений и откройте файл NavMenu.razor. В разделе <nav>...</nav> компонента NavMenu добавьте указанный ниже элемент <div>...</div> и компонент NavLink для компонента Todo.

В Components/Layout/NavMenu.razor:

<!-- .. -->

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        
        <!-- ... -->

        <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>
    </nav>
</div>

Сохраните файл Components/Layout//NavMenu.razor. Страница в браузере должна обновиться автоматически, и на панели навигации должен появиться элемент для списка дел:

Снимок экрана: только что добавленный элемент навигации todo

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

В Обозреватель решений щелкните проект правой кнопкой мыши и выберите команду "Добавить>новую папку". Назовите новую папку Data.

В Обозреватель решений щелкните правой кнопкой мыши папку "Данные", а затем выберите "Добавить>класс". Назовите новый класс TodoItem.cs, а затем нажмите кнопку "Добавить". Этот новый класс будет содержать класс C#, представляющий элемент todo.

Замените код из строки 7 вниз следующим кодом C# для TodoItem класса. Объявите Title в качестве строки, допускающей значение NULL, с помощью ?. Сохраните файл.

namespace BlazorHybridApp.Data;

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

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

Теперь вы можете выполнить привязку коллекции объектов TodoItem к коду HTML в Blazor. Для этого выполните следующие изменения в Components/Pages/Todo.razor файле:

  • Добавьте объявление using для TodoItem с @using BlazorHybridApp.Data.
  • Добавьте поле для элементов списка дел в блоке @code. Компонент Todo использует это поле для сохранения состояния списка дел.
  • Добавьте разметку неупорядоченного списка и цикл foreach, чтобы отобразить каждый элемент списка дел как элемент списка (<li>).
@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

  1. Приложению требуются элементы пользовательского интерфейса для добавления элементов списка дел. Добавьте следующие входные данные (<input>) и кнопку (<button>) под неупорядоченным списком (<ul>...</ul>):

    @page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

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

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

  2. При нажатии кнопки Add todo ничего не происходит, так как к кнопке не подключен обработчик событий.

    Добавьте метод AddTodo в компонент Todo и зарегистрируйте метод для кнопки с помощью атрибута @onclick. Метод AddTodo C# вызывается при нажатии кнопки:

    <input placeholder="Something todo" />
<button @onclick="AddTodo">Add todo</button>

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

    private void AddTodo()
    {
        // Todo: Add the todo
    }
}

  3. Чтобы получить заголовок нового элемента списка дел, добавьте строковое поле newTodo в верхней части блока @code:

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

    // Omitted for brevity...
}

    Измените элемент <input>, чтобы привязать newTodo с помощью атрибута @bind:

    <input placeholder="Something todo" @bind="newTodo" />

  4. Обновите метод AddTodo, чтобы добавить TodoItem с указанным заголовком в список. Очистите значение текстового ввода, указав для newTodo пустую строку:

    @page "/todo"
@using BlazorHybridApp.Data

<h3>Todo</h3>

<ul class="list-unstyled">
    @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;
        }
    }
}

  5. Сохраните файл Components/Pages/Todo.razor. Выполните повторную сборку приложения и перезапустите его.

  6. Вы можете сделать текст заголовка для каждого из них редактируемым, а флажок может помочь пользователю отслеживать завершенные элементы. Добавьте флажок для каждого элемента списка дел и привяжите его значение к свойству IsDone. Измените элемент, привязанный @todo.Title<input> к todo.Title@bind:

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

  7. Обновите заголовок <h3>, чтобы отобразить количество не завершенных элементов списка дел (IsDone имеет значение false).

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

  8. Сохраните файл Components/Pages/Todo.razor и запустите приложение еще раз.

  9. Добавление элементов, изменение элементов и пометка элементов, выполненных для тестирования компонента.

    Снимок экрана: заполненная страница списка дел