在 Blazor 应用程序中将控件绑定到数据

7 分钟

Blazor 使你能够将 HTML 控件绑定到属性，以便在用户界面 (UI) 中自动显示变化的值。

假设你正在开发一个页面，该页面从客户那里收集有关其披萨偏好的信息。你想要从数据库加载该信息并使客户能够进行更改，例如记录他们最喜欢的配料。当用户执行更改或数据库进行更新时，你希望尽快在 UI 中显示新值。

在本单元中，你将了解如何在 Blazor 中使用数据绑定将 UI 元素与数据值、属性或表达式相关联。

什么是数据绑定？

如果希望 HTML 元素显示值，可以编写代码来更改显示内容。如果值发生更改，则需要编写额外的代码以更新显示内容。在 Blazor 中，可以使用数据绑定将 HTML 元素连接到字段、属性或表达式。这样，当值发生更改时，HTML 元素便会自动更新。更新通常在更改后迅速发生，并且你无需编写任何更新代码。

若要绑定控件，可以使用 @bind 指令：

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

在上述页面中，每当 customerEmail 变量更改其值时，<input> 值都会更新。

备注

控件（如 <input>）仅在组件呈现时才会更新其显示内容，而在字段值发生更改时，它不会更新。由于 Blazor 组件在执行任何事件处理程序代码后呈现，因此实际上通常会快速显示更新。

将元素绑定到特定事件

@bind 指令非常智能，并且了解它所使用的控件。例如，在将值绑定到文本框 <input> 时，它将绑定 value 属性。 HTML 复选框 <input> 具有 checked 属性，而不是 value 属性。 @bind 属性将自动改用此 checked 属性。默认情况下，该控件绑定到 DOM onchange 事件。例如，请考虑以下页面：

@page "/"

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

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

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

呈现该页时，默认值 Margherita 将同时显示在 <h1> 元素和文本框中。在文本框中输入最喜欢的新披萨时，除非离开文本框或选择 Enter 键，否则 <h1> 元素不会发生更改，因为那时才会触发 onchange DOM 事件。

通常，这是你想要的行为。但是，假设你希望在文本框中输入任何字符时 <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"
}

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

设置绑定值的格式

如果要向用户显示日期，可能需要使用本地化的数据格式。例如，假设你要专门为英国用户（在写日期时，他们更喜欢先写日）编写一个页面。可以使用 @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);
}

备注

编写时，仅支持日期值格式字符串。将来可能会添加货币格式、数字格式以及其他格式。若要查看有关绑定格式的最新信息，请参阅 Blazor 文档中的格式字符串。

可以编写 C# 代码来设置绑定值的格式，作为使用 @bind:format 指令的一种替代方法。在成员定义中使用 get 和 set 访问器，如以下示例所示：

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

在下一个单元中，你将应用所学知识。

继续

在 Blazor 应用程序中将控件绑定到数据

什么是数据绑定？

将元素绑定到特定事件

设置绑定值的格式

反馈