练习 - 创建待办事项列表

100 XP

10 分钟

在本练习中，你将使用到目前为止学习的所有内容向 Blazor 应用程序添加基本的待办事项列表页面。

创建待办事项列表

创建新的 Blazor Web 应用项目。
将 Todo.razor 文件添加到 Components/Pages 文件夹

在 Visual Studio 和 Visual Studio Code 中，可以通过右键单击解决方案资源管理器中的 Components/Pages 文件夹并选择添加新文件的相应选项来添加 Razor 文件。

还可以使用 .NET CLI 通过以下命令创建 Razor 文件：
```
dotnet new razorcomponent -n Todo -o Components/Pages
```
上述命令中的 -n|--name 指定了新的 Razor 组件的名称。新组件是在项目具有 -o|--output 选项的 Components/Pages 文件夹中创建的。

重要

Razor 组件文件名的首字母应大写，以便可以轻松地将它们与其他 HTML 元素区分开来。
打开 Todo 组件，在文件的顶部添加 @page Razor 指令（其相对 URL 为 /todo），并将呈现模式设置为 InteractiveServer，以便组件可以处理 UI 事件。
```
@page "/todo"
@rendermode InteractiveServer

<h3>Todo</h3>

@code {

}
```
将更改应用到应用程序，并尝试浏览到“/todo”以查看新页面。

新的待办事项列表页面尚未与其他现有页面一起出现在导航菜单中。导航菜单在 NavMenu 组件中定义，该组件是应用程序布局的一部分。更新 NavMenu 组件，以添加指向待办事项列表页的链接。

打开 Components/Layout/NavMenu.razor。
查找 NavMenu 组件中的 nav 元素，并在天气页的现有导航项下方添加以下 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 组件，用于呈现定位标记。如果当前浏览器地址与 NavLink 的 href 匹配，它还会呈现一个可用于设置链接样式的 active CSS 类。

应用此更改后，现在应会在导航菜单中显示待办事项页面。

生成待办事项列表

在项目的根目录中创建新的 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>
```
你还不会看到为待办事项列表呈现的任何内容，因为该列表是空的。你需要一种方法来添加一些待办事项。

添加待办事项

添加一些 UI 元素，以便向列表添加待办事项。

在 Todo.razor 中添加一个 input 标记，并在未排序的列表下方添加一个 button 标记。
```
<input />
<button>Add todo</button>
```

创建 newTodo 字符串字段并使用 @bind 指令属性将其添加到 input。

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

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

将 @onclick 处理程序添加到 button，该处理程序根据 newTodo 的值将新的 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 元素的内容以呈现绑定到 todo.IsDone 的类型 checkbox 的 input 和绑定到 todo.Title 的文本 input。

<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 待办事项列表现已完成 ✅。

下一单元: 知识检查

上一篇下一步

需要帮助? 请参阅我们的疑难解答指南或通过报告问题提供具体反馈。