练习 - 为 onclick 事件创建 Blazor 事件处理程序

5 分钟

借助 Blazor，可将 C# 代码连接到 HTML DOM 事件。你将使用此功能来改进现有应用。

作为致力于增强 Blazing Pizza 应用的开发团队中的一员，公司要求你完成结帐流程以获取客户地址。你将添加一些文本字段并改进结帐流程。

在本练习中，你将克隆现有应用并创建一个新的地址组件来获取地址详细信息。添加字段后，你将焦点设置到表单上的第一个字段。

克隆团队的现有应用

备注

本模块使用 .NET CLI（命令行接口）和 Visual Studio Code 进行本地开发。完成本模块后，你可以使用 Visual Studio (Windows)、Visual Studio for Mac (macOS) 来应用概念，或使用 Visual Studio Code（Windows、Linux 和 macOS）进行持续开发。

此模块使用 .NET 6.0 SDK。通过在首选终端中运行以下命令，确保你已安装 .NET 6.0：

dotnet --list-sdks

将显示类似于下面的输出：

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

确保列出了以 6 开头的版本。如果未列出任何版本或未找到命令，请安装最新的 .NET 6.0 SDK。

如果之前尚未创建 Blazor 应用，请按照 Blazor 设置说明安装正确版本的 .NET，并检查计算机是否设置正确。停止“创建应用”步骤。

打开 Visual Studio Code。
通过从主菜单中依次选择“视图”和“终端”，从 Visual Studio Code 打开集成终端。
在终端中，导航到要创建项目的位置。

从 GitHub 克隆应用。

git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza

选择“文件”，然后选择“打开文件夹...”。
在打开的对话框中，导航到 BlazingPizza 文件夹，然后选择“选择文件夹”。

Visual Studio Code 可能会提示你关于未解析的依赖项。选择“还原”。
运行应用以检查一切是否正常。
在 Visual Studio Code 中，按 F5 或选择“运行”>“开始调试”。

尝试对一些披萨进行搭配并将其添加到订单中。在页面底部选择“订购”。你将看到当前的结帐页面。
按 Shift + F5 停止正在运行的应用。

重构结账页面

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

目前，结帐页面仅显示已搭配好的比萨列表。你被要求重构该页面以包含地址部分。

将现有的 <div class="main"> HTML 块替换为两列数据。

<div class="main">
    <div class="checkout-cols">
        <div class="checkout-order-details">
            <h4>Review order</h4>
            <OrderReview Order="Order" />
        </div>

        <div class="checkout-delivery-address">
            <h4>Deliver to...</h4>
            <AddressEditor Address="Order.DeliveryAddress" />
        </div>
    </div>

    <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
        Place order
    </button>
</div>

前面的代码将按钮元素的 HTML onclick 事件连接到 @code 块中的 PlaceOrder Blazor 方法。

重构引用了两个新的 Blazor 控件：OrderReview 和 AddressEditor。你将用于列出比萨的旧的结账代码移至 OrderReview 组件。

在文件资源管理器中，右键单击“共享”，然后选择“新建文件”。
输入 OrderReview.razor 作为文件名。

添加 foreach 循环，以按顺序显示比萨。

@foreach (var pizza in Order.Pizzas)
{
    <p>
        <strong>
            @(pizza.Size)"
            @pizza.Special.Name
            (£@pizza.GetFormattedTotalPrice())
        </strong>
    </p>
}

<p>
    <strong>
        Total price:
        £@Order.GetFormattedTotalPrice()
    </strong>
</p>

@code {
    [Parameter] public Order Order { get; set; }
}

在文件资源管理器中，右键单击“共享”，然后选择“新建文件”。
输入 AddressEditor.razor 作为文件名。

添加对地址中的每个字段都使用 input 元素的代码。 Model 文件夹中的 Address 类将显示所有字段。

<div class="form-field">
    <label>Name:</label>
    <div>
        <input @bind="Address.Name" />
    </div>
</div>

<div class="form-field">
    <label>Line 1:</label>
    <div>
        <input @bind="Address.Line1" />
    </div>
</div>

<div class="form-field">
    <label>Line 2:</label>
    <div>
        <input @bind="Address.Line2" />
    </div>
</div>

<div class="form-field">
    <label>City:</label>
    <div>
        <input @bind="Address.City" />
    </div>
</div>

<div class="form-field">
    <label>Region:</label>
    <div>
        <input @bind="Address.Region" />
    </div>
</div>

<div class="form-field">
    <label>Postal code:</label>
    <div>
        <input @bind="Address.PostalCode" />
    </div>
</div>

@code {
    [Parameter] public Address Address { get; set; }
}

测试新的结帐页面

在 Visual Studio Code 中，按 F5 或选择“运行”>“开始调试”。

添加一些比萨，然后选择“订购>”，查看新的结帐流程。
按 Shift + F5 停止正在运行的应用。

提高表单的可用性

当客户转到结账页面时，他们首先要做的就是输入他们的名字。 Blazor 可让你将焦点设置在页面上的 HTML 元素上。通过添加该表单来改进应用。

在“AddressEditor.razor”中，更改名称 input 元素的 HTML，以添加 @ref="startName"。
```
<input @ref="startName" @bind="Address.Name" />
```
Blazor 指令 @ref="startName" 允许代码块创建一个 ElementReference 来引用输入元素。然后，可在呈现页面后使用此元素引用来调用 FocusAsync。
在 [Parameter] public Address Address { get; set; } 声明下方添加页面加载后要调用 FocusAsync 的代码。
```
private ElementReference startName;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) {
        await startName.FocusAsync();
    }
}    
```
此代码创建 ElementReference，然后在呈现页面后将焦点设置到 Name 字段。
在 Visual Studio Code 中，按 F5 或选择“运行”>“开始调试”。

添加一些比萨，然后选择“订购 >”以查看结帐页面上的“名称”表单域是否具有焦点。
按 Shift + F5 停止正在运行的应用。

练习 - 为 onclick 事件创建 Blazor 事件处理程序

克隆团队的现有应用

重构结账页面

测试新的结帐页面

提高表单的可用性

反馈