上一篇

下一步

练习 - 创建待办事项列表

已完成

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

创建待办事项列表

1. 创建新的 Blazor Web 应用项目。

2. 将 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 元素区分开来。

3. 打开 Todo 组件，在文件的顶部添加 @page Razor 指令（其相对 URL 为 /todo），并将呈现模式设置为 InteractiveServer，以便组件可以处理 UI 事件。

   @page "/todo"
   @rendermode InteractiveServer
   
   <h3>Todo</h3>
   
   @code {
   
   }
   

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

将待办事项页面添加到导航菜单

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

1. 打开 Components/Layout/NavMenu.razor。

2. 查找 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 类。

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

   

生成待办事项列表

1. 在项目的根目录中创建新的 TodoItem.cs 文件（与 Program.cs 同级），并向其添加以下 C# 类。

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

2. 在 Todo.razor 为 @code 块中的待办事项列表添加字段。

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

3. 使用 foreach 循环呈现所有待办事项的未排序列表。

   <ul>
       @foreach (var todo in todos)
       {
           <li>@todo.Title</li>
       }
   </ul>
   

   你还不会看到为待办事项列表呈现的任何内容，因为该列表是空的。 你需要一种方法来添加一些待办事项。

添加待办事项

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

1. 在 Todo.razor 中添加一个 input 标记，并在未排序的列表下方添加一个 button 标记。

   <input />
   <button>Add todo</button>
   

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

   <input @bind="newTodo" />
   <button>Add todo</button>
   
   @code {
       private List<TodoItem> todos = new();
       string newTodo = "";
   }
   

3. 将 @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;
           }
       }
   }
   

4. 检查现在是否可以添加待办事项并且它们是否显示在列表中。 添加每个待办事项后，input 值也应重置。

添加复选框并计算未完成的待办事项

你需要一种方法将待办事项标记为已完成，编辑现有的待办事项以及计算尚未完成的待办事项数量。

1. 更新 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>    
   

2. 更新 <h3> 标头，显示尚未完成的待办项数目（IsDone 是 false）。

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

3. 将更改应用到应用程序后，请尝试添加项、编辑项以及标记已完成的待办事项以测试组件。

   

你的 Blazor 待办事项列表现已完成 ✅。

继续