Blazor教程01 - 技术栈

若要构建交互式用户界面，你需要能够处理来自浏览器的 UI 事件并相应地更新 UI。

Blazor 组件可以使用 C# 处理不同类型的 UI 事件，然后使用 Razor 语法根据事件呈现更新。
Blazor 提供了多个模式来定义事件回调，包括同步回调和异步回调。
Blazor 还可以轻松地在 UI 元素的值和你的代码之间创建双向数据绑定。

让我们了解如何定义组件呈现逻辑并处理 UI 事件。

呈现 C# 表达式值

若要在 Razor 中呈现 C# 表达式的值，可以使用前导 @ 字符。例如，Counter 组件可以呈现其 currentCount 字段的值，如下所示：

razor

ini 复制代码

<p role="status">Current count: @currentCount</p>

Razor 通常可以判断出 C# 表达式何时结束，以及何时转换回编写 HTML。但是，也可以使用 parens 来明确表达式的开始和结束。

razor

ini 复制代码

<p role="status">Current count: @(currentCount)</p>

添加控制流

可以使用普通的 C# 语句将控制流添加到组件呈现逻辑。例如，可以使用 C# if 语句有条件地呈现某些内容，如下所示：

razor

css 复制代码

@if (currentCount > 3)
{
    <p>You win!</p>
}

还可以使用 C# 循环访问数据并呈现项列表：

razor

css 复制代码

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

处理事件

Blazor 组件通常处理 UI 事件。若要从 UI 元素为事件指定事件回调，可以使用以 @on 开头且以事件名称结尾的属性。例如，可以使用 @onclick 属性将 IncrementCount 方法指定为按钮单击事件的处理程序，如下所示：

razor

ini 复制代码

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

还可以为其他 HTML 事件指定 C# 事件处理程序，例如 @onchange、@oninput 等。事件处理方法可以是同步的，也可以是异步的。还可以使用 C# Lambda 表达式内联定义事件处理程序：

razor

ini 复制代码

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

事件处理程序方法可以选择采用包含事件相关信息的事件参数。例如，可以访问已更改的输入元素的值，如下所示：

razor

ini 复制代码

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

运行事件处理程序后，Blazor 将自动呈现具有新状态的组件，以便在输入更改后会显示该消息。

数据绑定

通常，需要将 UI 元素的值绑定到代码中的特定值。当 UI 元素的值更改时，代码值应更改，当代码值更改时，UI 元素应显示新值。 Blazor 的数据绑定支持可以轻松设置这种双向数据绑定。

可以使用 @bind 属性将 UI 元素绑定到代码中的特定值。例如：

razor

ini 复制代码

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

更改输入的值时，text 字段将更新为新值。单击"清除"按钮更改 text 字段的值时，输入的值也会被清除。

Razor 指令

Razor 指令是 Razor 语法中的保留关键字，会影响 Razor 文件的编译方式。 Razor 指令始终以 @ 字符开头。某些 Razor 指令出现在新行的开头，例如 @page 和 @code，而其他指令则是可以作为属性应用于元素的属性，例如 @bind。可以在 Razor 语法参考中找到 Razor 指令的完整列表。

启用交互性

若要处理来自组件的 UI 事件并使用数据绑定，该组件必须是交互式的**。默认情况下，Blazor 组件从服务器静态呈现，这意味着它们生成 HTML 以响应请求，否则无法处理 UI 事件。可以通过使用 @rendermode 指令应用交互式呈现模式，使组件具有交互性。

可以将 @rendermode 指令应用于组件定义：

razor

css 复制代码

@rendermode InteractiveServer

或组件实例：

razor

ini 复制代码

<Counter @rendermode="InteractiveServer" />

Counter 组件是目前应用中唯一的交互式组件，它使用交互式服务器呈现。交互式服务器呈现通过与浏览器的 WebSocket 连接处理来自服务器的 UI 事件。 Blazor 通过此连接将 UI 事件发送到服务器，以便应用组件可以处理这些事件。然后，Blazor 会使用呈现的更新来更新浏览器 DOM。

或者，Blazor 组件可以使用 InteractiveWebAssembly 呈现模式以交互方式从客户端呈现。在此模式下，组件代码将下载到浏览器并使用基于 WebAssembly 的 .NET 运行时运行客户端。

选择使用哪种交互式呈现模式取决于应用的要求。目前，Blazor 项目仅针对基于服务器的呈现进行设置，因此在本模块中，我们将坚持使用静态和交互式服务器呈现。