练习 - 数据绑定和事件

  • 10 分钟

在此练习中，要在 Blazor 应用中创建一个基本的“待办事项”列表组件。

创建“待办事项”页面

  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 文件

将 Todo 组件添加到导航栏

应用的布局使用 NavMenu 组件。 布局是可避免应用中出现重复内容的组件。 当应用 URL 与链接匹配时，NavLink 组件会呈现一个 HTML 定位点标记，该标记可以设置为在应用 UI 中提供提示。

展开“解决方案资源管理器”中的 Components/Layout 文件夹，然后打开 NavMenu.razor 文件。 在 NavMenu 组件的 <nav>...</nav> 部分中，为 Todo 组件添加以下新的 <div>...</div> 和 NavLink 组件。

在 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 条目：

刚添加的待办事项导航元素的屏幕截图

创建 Todo 项

在解决方案资源管理器中，右键单击项目，然后选择“添加”>“新文件夹”。 将新文件夹命名为“Data”。

在“解决方案资源管理器”中，右键单击 Data 文件夹，然后选择“添加”>“类”。 将新类命名为 TodoItem.cs，然后选择“添加”。 此新类将保存表示待办事项的 C# 类。

将第 7 行中的代码替换为 TodoItem 类的以下 C# 代码。 通过使用 ? 将 Title 声明为可为空字符串。 保存文件。

namespace BlazorHybridApp.Data;

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

绑定 TodoItem 列表

现可在 Blazor 中将 TodoItem 对象集合绑定到 HTML。 我们将通过对 Components/Pages/Todo.razor 文件进行以下更改来实现此目的：

  • 使用 @using BlazorHybridApp.Data 为 TodoItem 添加 using 声明。
  • 在 @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. 该应用需要 UI 元素来将待办项添加到列表。 在未排序列表 (<ul>...</ul>) 下方添加一个文本输入 (<input>) 和一个按钮 (<button>)：

    @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”按钮时没有任何反应，因为没有事件处理程序连接到该按钮。

    向 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;

    // 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. 可以编辑每个待办事项的标题文本，复选框可帮助用户跟踪已完成的项。 为每个 Todo 项添加一个复选框输入，并将它的值绑定到 IsDone 属性。 将 @todo.Title 更改为使用 @bind 绑定到 todo.Title 的 <input> 元素：

    <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. 添加项、编辑项并将项标记为“已完成”以测试组件。

    已完成的待办事项页的屏幕截图