数据绑定和事件

已完成

你已为 Web 应用定义了 UI。 现在探索如何向应用程序添加逻辑。 在 Blazor WebAssembly 应用中,可以在单独的 .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 中的字符串。 在下面的练习中,你将看到数据绑定示例。