【使用Blazor构建web应用程序 .NET 6篇 下】

这篇下是机翻，就是单纯为了把两年前的坑添上！没有任何其他不良动机！😃
在 Blazor 应用程序中将控件绑定到数据

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 = "john.doe@contoso.com"
}

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

备注

控件（如 ）仅在组件呈现时才会更新其显示内容，而在字段值发生更改时，它不会更新。 由于 Blazor 组件在执行任何事件处理程序代码后呈现，因此实际上通常会快速显示更新。
将元素绑定到特定事件
@bind 指令非常智能，并且了解它所使用的控件。 例如，在将值绑定到文本框 时，它将绑定 value 属性。 HTML 复选框 具有 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 应用程序中将控件绑定到数据

当客户修改披萨并将其添加到订单时，Blazing Pizza 应用需要更新界面。 Blazor 使你能够将 HTML 控件绑定到 C# 属性，以便在其值发生更改时进行更新。

客户应看到他们所订购的披萨，以及他们所选的尺寸对他们将支付的价格有什么影响。

在此练习中，你将获得可在其中更新和编辑订单的 Blazing Pizza 应用。 你将了解如何将控件绑定到披萨的属性，并根据这些更改重新计算价格。
显示客户的披萨订单
你将添加一个边栏，用于显示客户已添加到订单的所有披萨。

1.如果应用仍在运行，请停止它。

2.在 Visual Studio Code 的文件资源管理器中，展开“页”，然后选择“Index.razor”。

3.在 @if 和 @code 块之间，添加以下代码：

<div class="sidebar">
    @if (order.Pizzas.Any())
    {
        <div class="order-contents">
            <h2>Your order</h2>

            @foreach (var configuredPizza in order.Pizzas)
            {
              <div class="cart-item">
                  <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                  <div class="item-price">
                      @configuredPizza.GetFormattedTotalPrice()
                  </div>
              </div>
            }
        </div>
    }
    else
    {
        <div class="empty-cart">Choose a pizza<br>to get started</div>
    }

    <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
        Total:
        <span class="total-price">@order.GetFormattedTotalPrice()</span>
        <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
            Order >
        </a>
    </div>
</div>

此 HTML 会将边栏添加到页面。 如果 OrderState.Order 中有任何披萨，会显示出来。 如果没有订单，则会提示客户添加一些订单。

你将看到一些错误，因为组件不知道有哪些订单。

4.在 @code 块的 List specials = new(); 下，添加以下代码：

Order order => OrderState.Order;

5.选择 F5 或“运行”。 然后选择“开始调试”。

尝试订购一些披萨，并取消一些订购。 你将看到它们已被添加到购物车，并且订单总计也进行了更新。

6.按 Shift+F5，或选择“停止调试”。
从客户订单中删除披萨
你可能已经注意到，无法从客户的购物车中删除已配置的披萨。 让我们添加此功能。

第一步是更新 OrderState 服务，以便它能够提供从订单中删除披萨的方法。

1.在文件资源管理器中，选择“Services/OrderState.cs”。

2.在类的底部，添加以下方法：

public void RemoveConfiguredPizza(Pizza pizza)
{
    Order.Pizzas.Remove(pizza);
}

3.在文件资源管理器中，展开“页面”，然后选择“Index.razor”。

4.在

中，在结束

之前添加 标记以创建移除按钮：

<a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>

此标记会向订单边栏中的每个披萨添加一个 X。 如果选择此选项，它将在 OrderState 服务中调用 RemoveConfiguredPizza 方法。
5.选择 F5 或“运行”。 然后选择“开始调试”。

动态配置披萨大小
更改大小滑块时，披萨配置对话框不会更新。 该组件需要一种方法来更新披萨及其尺寸，并重新计算价格。

1.在文件资源管理器中，展开“共享”，然后选择“ConfigurePizzaDialog.razor”。

2.向 input HTML 控件添加代码以将其值绑定到披萨尺寸：

<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>

3.选择 F5 或“运行”。 然后选择“开始调试”。

使用更新的对话框向订单中添加一些不同大小的披萨。 单击滚动条，而不是拖动它。 注意松开控件上的鼠标时披萨大小会更新。

如果拖动滑块，则在释放鼠标之前，尺寸不会发生更改。 现在来解决此问题。

4.按 Shift+F5，或选择“停止调试”。

5.添加控件应绑定到的事件：

<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />

6.选择 F5 或“运行”。 然后选择“开始调试”。

添加 @bind=“Pizza.Size” 代码是如何提供如此多的功能的？ 如果检查整个 ConfigurePizzaDialog.razor 代码，你将看到团队已将其他元素连接到披萨的属性。

例如，以下代码会导致价格更新：

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

由于披萨 GetFormattedTotalPrice() 上的方法使用披萨大小计算总价，因此价格会随着披萨大小的更改而更新。

你在 Blazing Pizza 应用上的工作取得了进展。 如果想要继续改进，请完成此学习路径中的下一个模块。

摘要

你就职于一家披萨派送公司，该公司需要一个新网站，而你的团队在 C# 方面拥有多年的经验。 通过选择 Blazor，你可以使用 C# 编写客户端代码和服务器端代码，并最大程度地减少使用 JavaScript 代码。

在使用 Blazor 之前，你必须就 JavaScript 和其他 Web 技术对开发人员进行培训。 使用 Blazor 就不需要这类培训。 Blazor 可以帮助加速 Web 应用程序开发项目。

学习完本模块后，你已了解如何：

通过创建 Blazor 组件来汇编 Web 应用的用户界面。
访问要在 Web 应用中显示的数据。
在多个 Blazor 组件之间共享 Web 应用中的数据。
将 HTML 元素绑定到 Blazor 组件中的变量。