你已为 Web 应用定义了 UI。 现在探索如何向应用程序添加逻辑。 在 Blazor 应用中，可在单独的 .cs 文件中添加 C# 代码，也可在 Razor 组件中添加内联。

单独文件中的 C# 代码隐藏

在 Blazor 中，可以将 C# 文件直接添加到应用项目，就像其他 .NET 项目一样。 此方法通常称为“代码隐藏”，它使用单独的代码文件来存储应用逻辑。 当业务逻辑较复杂、较长或有多个类时，单独的文件是一个非常好的策略。

对于简单的逻辑，并不总是需要新建 .cs 文件。

组件中的 C# 内联

常见做法是在一个 Razor 组件文件中混用 HTML 和 C#。 对于具有较轻代码要求的简单组件，此方法非常有效。 可使用指令将代码添加到 Razor 文件。

什么是 Razor 指令？

Razor 指令是用于使用 HTML 添加 C# 内联的组件标记。 使用指令，开发人员可以定义单个语句、方法或更大的代码块。

代码指令

在 MVC 或 Pages 中使用过 Razor 的开发人员应该对代码指令非常熟悉。

可使用 @expression() 来添加一个与 HTML 内联的 C# 语句。 如果需要更多代码，请使用 @code 指令添加多个语句（用括号括起来）。

还可将 @functions 部分添加到方法和属性的模板。 它们将添加到生成的类顶部，文档可在其中引用它们。

Page 指令

@Page 指令是用于将组件标识为页面的特殊标记。 可使用此指令指定路由。 该路由映射到 Blazor 引擎识别的属性路由，以注册和访问页面。

Razor 数据绑定

在 Razor 组件中，可以将 HTML 元素数据绑定到 C# 字段、属性和 Razor 表达式值。 数据绑定支持在 HTML 和 Microsoft .NET 之间进行双向同步。

呈现组件时，数据从 HTML 推送到 .NET。 组件在事件处理程序代码执行后呈现自身。 因此在触发事件处理程序后，属性更新会立即反映在 UI 中。

使用 @bind 标记将 C# 变量绑定到 HTML 对象。 按名称将 C# 变量定义为 HTML 中的字符串。 在下面的练习中，你将看到数据绑定示例。

练习 - 数据绑定和事件

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

创建 Todo 页面

Visual Studio Code

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

dotnet new razorcomponent -n Todo -o Pages

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

重要

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

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

@page "/todo"

<h3>Todo</h3>

@code {

}

保存 Pages/Todo.razor 文件

Visual Studio

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

重要

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

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

@page "/todo"

<h3>Todo</h3>

@code {

}

保存 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 项

在项目的根目录（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

该应用需要 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();
}

选择“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
    }
}

若要获取新的待办项的标题，请在 @code 块的顶部添加一个 newTodo 字符串：

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

    // ... code continues ...
    }

修改 <input> 元素，将 newTodo 与 @bind 属性进行绑定：

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

更新 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;
        }
    }
}

保存 Pages/Todo.razor 文件。 应用程序会在命令行界面中自动重新生成。 浏览器重新连接到应用后，页面会在浏览器中重新加载。

每个 Todo 项的标题文本都可编辑，复选框可帮助用户跟踪已完成的项。 为每个 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>

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

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

保存 Pages/Todo.razor 文件。 应用程序会在命令行界面中自动重新生成。 浏览器重新连接到应用后，页面会在浏览器中重新加载。

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