Blazor Hybrid 中的数据绑定和事件

已完成

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

组件中的 C# 内联

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

什么是 Razor 指令?

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

代码指令

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

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

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

Razor 数据绑定

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

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

使用 @bind 标记将 C# 变量绑定到 HTML 输入。 在下一个练习中,你将看到数据绑定示例。