Blazor Hybrid 中的数据绑定和事件
已为 Web 应用定义 UI。 现在,让我们了解如何向应用添加逻辑。 在 Blazor 应用中,可以在单独的 .cs 文件中添加 C# 代码,也可以在 Razor 组件中内联添加 C# 代码。
组件中的 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 输入。 在下一个练习中,你将看到数据绑定的示例。