Создание приложения Blazor со списком дел

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

Вы узнаете, как выполнять следующие задачи:

• создавать проект приложения Blazor со списком задач;
• изменять компоненты Razor;
• использовать обработку событий и привязку данных в компонентах;
• Использование маршрутизации в приложении Blazor

Когда вы выполните задачи из этого руководства, у вас будет работающее приложение списка задач.

Необходимые компоненты

Скачайте и установите .NET , если он еще не установлен в системе или если у системы нет последней версии.

Создание приложения Blazor

Создайте новое Blazor веб-приложение с именем TodoList в командной оболочке:

dotnet new blazor -o TodoList

Параметр -o|--output создает папку для проекта. Если вы создали папку для проекта и она открыта в оболочке командной строки, не указывайте параметр -o|--output и значение для создания проекта.

Предыдущая команда создает папку с именем TodoList и параметром -o|--output для хранения приложения. Папка TodoList находится в корневой папке проекта. Перейдите в папку TodoList с помощью следующей команды:

cd TodoList

Создание приложения Blazor со списком дел

Добавьте в приложение новый компонент TodoRazor с помощью приведенной ниже команды.

dotnet new razorcomponent -n Todo -o Components/Pages

Параметр -n|--name в предыдущей команде задает имя нового компонента Razor. Новый компонент создается в папке Components/Pages проекта с параметром -o|--output.

Внимание

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

Todo Откройте компонент в любом редакторе файлов и внесите следующие изменения в верхней части файла:

• Добавьте директиву @pageRazor с относительным URL-адресом /todo.
• Включите интерактивность на странице, чтобы она не только отображалась статически. Режим отрисовки интерактивного сервера позволяет компоненту обрабатывать события пользовательского интерфейса с сервера.
• Добавьте заголовок страницы с PageTitle компонентом, который позволяет добавить элемент HTML <title> на страницу.

Todo.razor:

@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h3>Todo</h3>

@code {

}

Сохраните файл Todo.razor.

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

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

В содержимом элемента навигации (<nav>) компонента NavMenu добавьте следующий элемент <div> для компонента Todo.

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

Сохраните файл NavMenu.razor.

Скомпилируйте и запустите приложение, выполнив команду dotnet watch run в командной оболочке из папки TodoList. После запуска приложения перейдите на страницу списка дел, щелкнув ссылку Todo на панели навигации приложения. В результате будет загружена страница по адресу /todo.

Оставьте приложение выполняться в командной оболочке. При каждом сохранении файла приложение автоматически перестраивается, а страница в браузере автоматически перезагружается.

Добавьте в корень проекта (папка TodoList) файл TodoItem.cs, который будет содержать класс для элемента списка дел. Используйте следующий код C# для класса TodoItem.

TodoItem.cs:

namespace BlazorSample;

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

Примечание.

При использовании Visual Studio для создания файла и TodoItem класса используйте любой из следующих подходов:TodoItem.cs

• Удалите пространство имен, создаваемое Visual Studio для класса.
• Воспользуйтесь кнопкой Копировать в предыдущем блоке кода и замените все содержимое файла, создаваемого Visual Studio.

Вернитесь к компоненту Todo и выполните указанные ниже задачи.

• Добавьте поле для элементов списка дел в блоке @code. Компонент Todo использует это поле для сохранения состояния списка дел.
• Добавьте разметку неупорядоченного списка и цикл foreach, чтобы отобразить каждый элемент списка дел как элемент списка (<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();
}

Приложению требуются элементы пользовательского интерфейса для добавления элементов списка дел. Добавьте следующие входные данные (<input>) и кнопку (<button>) под неупорядоченным списком (<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();
}

Сохраните файл TodoItem.cs и обновленный файл Todo.razor. При сохранении файлов в командной оболочке будет автоматически выполнена повторная сборка приложения. Браузер перезагружает страницу.

При нажатии кнопки 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
    }
}

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

private string? newTodo;

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

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

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

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

Сохраните файл Todo.razor. Приложение в командной оболочке будет автоматически перестроено, а страница в браузере будет перезагружена.

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

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

Обновите заголовок <h3>, чтобы отобразить количество не завершенных элементов списка дел (IsDone имеет значение false). Выражение Razor в следующем заголовке вычисляется каждый раз, когда Blazor отрисовывает компонент.

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

Завершенный 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;
        }
    }
}

Сохраните файл Todo.razor. Приложение в командной оболочке будет автоматически перестроено, а страница в браузере будет перезагружена.

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

По окончании завершите работу приложения в командной оболочке. Многие командные оболочки принимают команду клавиатуры CTRL+C (Windows) или ⌘+C (macOS) для остановки приложения.

Публикация в Azure

Сведения о развертывании в Azure см. в разделе Краткое руководство. Развертывание веб-приложения ASP.NET.

Следующие шаги

Из этого руководства вы узнали, как:

• создавать проект приложения Blazor со списком задач;
• изменять компоненты Razor;
• использовать обработку событий и привязку данных в компонентах;
• Использование маршрутизации в приложении Blazor

Подробные сведения об инструментах для ASP.NET Core Blazor:

ASP.NET Core Blazor