练习 - 数据绑定和事件

已完成

在此练习中,你将在 Blazor 应用中创建一个基本的待办事项列表组件。

创建 Todo 页面

  1. 创建 ToDo 页面:

    借助 Visual Studio Code 和其他文本编辑器,可以使用以下语句在命令行中创建 razor 组件:

    dotnet new razorcomponent -n Todo -o Pages
    

    上述命令中的 -n|--name 指定了新的 Razor 组件的名称。 新组件是在项目具有 -o|--output 选项的 Pages 文件夹中创建的。

    在 Visual Studio 中,可以右键单击“解决方案资源管理器”中的 Pages 文件夹,选择“添加”>“Razor 组件…”,然后对组件 Todo.razor 命名

    重要

    Razor 组件文件名要求首字母大写。 打开 Pages 文件夹,确认 Todo 组件文件名以大写字母 T 开头。 文件名应为 Todo.razor

  2. 打开 Todo 组件,在文件的顶部添加 Razor 指令 @page,其相对 URL 为 /todo

    @page "/todo"
    
    <h3>Todo</h3>
    
    @code {
    
    }
    
  3. 保存 Pages/Todo.razor 文件。

将 Todo 组件添加到导航栏

NavMenu 组件用于应用的布局。 布局是可避免应用中出现重复内容的组件。 当应用加载组件 URL 时,NavLink 组件会在应用的 UI 中提供提示。

在 NavMenu 组件的 <nav>...</nav> 部分中,为 Todo 组件添加以下新的 <div>...</div>NavLink 组件。

Shared/NavMenu.razor中:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">

        ...

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

保存 Shared/NavMenu.razor 文件。 浏览器会自动刷新,现在导航栏上有了 Todo 条目:

已添加 Todo 导航元素。

创建 Todo 项

在项目的根目录(BlazorApp 文件夹)中创建一个名为 TodoItem.cs 的新文件,用于保存表示待办事项的 C# 类。

TodoItem 类使用以下 C# 代码。 通过使用 ?Title 声明为可为空字符串。

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

如果进程未检测到新 TodoItem 文件并重新生成项目,可能需要停止并重启 dotnet watch run 进程。

绑定 TodoItem 列表

现可在 Blazor 中将 TodoItem 对象集合绑定到 HTML。 为此,请在 Pages/Todo.razor 文件中进行以下更改:

  • @code 块中为待办项添加一个字段。 Todo 组件使用此字段来维护待办项列表的状态。
  • 添加无序列表标记和 foreach 循环,以将每个待办项呈现为列表项 (<li>)。
@page "/todo"

<h3>Todo</h3>

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

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

添加窗体元素来创建 Todo

  1. 该应用需要 UI 元素来将待办项添加到列表。 在未排序列表 (<ul>...</ul>) 下方添加一个文本输入 (<input>) 和一个按钮 (<button>):

    @page "/todo"
    
    <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();
    }
    
  2. 选择“Add todo”按钮时没有任何反应,因为没有事件处理程序连接到该按钮。

    Todo 组件添加 AddTodo 方法,并使用 @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. 若要获取新的待办项的标题,请在 @code 块的顶部添加一个 newTodo 字符串:

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

    修改 <input> 元素,将 newTodo@bind 属性进行绑定:

    <input placeholder="Something todo" @bind="newTodo" />
    
  4. 更新 AddTodo 方法,将具有指定标题的 TodoItem 添加到列表。 通过将 newTodo 设置为空字符串来清除文本输入的值:

    @page "/todo"
    
    <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;
            }
        }
    }
    
  5. 保存 Pages/Todo.razor 文件。 该应用会在命令 shell 中自动重新生成。 浏览器重新连接到应用后,页面会在浏览器中重新加载。

  6. 你可以使每个待办项的标题文本可编辑,并且可以添加一个复选框来帮助用户跟踪已完成的项。 为每个 Todo 项添加一个复选框输入,并将它的值绑定到 IsDone 属性。 将 @todo.Title 更改为 <input> 元素,后者通过 @bind 绑定到 todo.Title

    <ul>
        @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>    
    
  7. 更新 <h3> 标头,显示尚未完成的待办项数目(IsDonefalse)。

    <h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>
    
  8. 保存 Pages/Todo.razor 文件。 该应用会在命令 shell 中自动重新生成。 浏览器重新连接到应用后,页面会在浏览器中重新加载。

  9. 添加项、编辑项,并将待办标记为“已完成”来测试组件。

    已完成的 Todo 页面。