Blazor数据绑定和事件

呈现 C# 表达式值

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

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

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

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

如果要向用户显示日期，可能需要使用本地化的数据格式。例如，假设你要专门为中国用户（在写日期时，他们更喜欢先写日）编写一个页面。可以使用 @bind:format 指令指定单个日期格式字符串：

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

添加控制流

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

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

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

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

处理事件

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

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

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

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

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

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

@code {
    string message = "";

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

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

数据绑定

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

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

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

@code {
    string text = "";
}

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

通常，这是你想要的行为。但是，假设你希望在文本框中输入任何字符时 <h1> 元素会立即更新。可以通过绑定到 oninput DOM 事件来实现这一结果。若要绑定到此事件，必须使用 @bind-value 和 @bind-value:event 指令：

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

在此情况下，在文本框中键入任何字符时，标题会立即发生更改。

Razor 指令

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

启用交互性

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

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

@rendermode InteractiveServer

或组件实例：

<Counter @rendermode="InteractiveServer" />

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

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

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