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 输入。 在下一个练习中,你将看到数据绑定示例。