练习 - 使用 Blazor 组件创建地址表单

4 分钟

目前，Blazing Pizza 应用使用 HTML 元素来捕获数据和按钮。 Blazor 框架改进了对表单的支持，从而允许表单使用可绑定到 C# 模型的组件。

团队希望你使用 Blazor 组件替换当前的 HTML 元素。团队希望你仅在地址和姓名不为空的情况下提交订单。

在本练习中，你会将当前的 HTML 字段替换为 Blazor 组件并更改客户提交订单的方式。你将了解如何使用 EditContext 为表单编写手动验证。

添加 Blazor EditForm 组件

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

在 <div class="main"> 块下，添加一个新的 EditForm 组件。

<div class="main">
    <EditForm Model=Order.DeliveryAddress OnSubmit=CheckSubmission>

在 </button> 元素下，关闭 EditForm 组件。

        </button>
    </EditForm>
</div>

删除 </button> 上的 @onclick 事件。

<button class="checkout-button btn btn-warning" disabled=@isSubmitting>

在 @code 块中，在现有 PlaceOrder 方法上方添加用于处理表单提交的代码。

private async Task CheckSubmission()
{
    isSubmitting = true;
    await PlaceOrder();
    isSubmitting = false;
}

从 PlaceOrder() 方法中删除 isSubmitting = true; 代码行。

将 HTML 元素替换为 Blazor 组件

在文件资源管理器中，展开“共享”，然后选择“AddressEditor.razor”。
选择“编辑”菜单，然后选择“替换”。
在第一个字段中，输入 <input，并在替换字段中输入 <InputText，然后选择“全部替换”。
选择“编辑”菜单，然后选择“替换”。
在第一个字段中，输入 @bind=，并在替换字段中输入 @bind-Value=，然后选择“全部替换”。
删除“名称”字段上的 @ref="startName" 代码。
删除 @code 块中参数声明下方的所有代码。该块现在应如下所示。
```
@code {
    [Parameter] public Address Address { get; set; }
}
```
目前仅 HTML 元素支持 FocusAsync。

提交表单前检查是否存在空字段

让我们添加一条错误消息，应用将在客户未输入他们的姓名或地址时向其显示该消息。

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

在 h4>Deliver to...</h4> 元素下方添加错误消息。

<div class="checkout-delivery-address">
  <h4>Deliver to...</h4>
  @if (isError) {
    <div class="alert alert-danger">Please enter a name and address.</div>
  }
  <AddressEditor Address="Order.DeliveryAddress" />
</div>

在 @code 块中，为 isError 布尔值添加一个声明。
```
bool isError = false;
```

改进 CheckSubmission() 方法，使只有在姓名和邮政编码字段中填充有数据的情况才能下单。

private async Task CheckSubmission(EditContext editContext)
{
    isSubmitting = true;
    var model = editContext.Model as Address;
    isError = string.IsNullOrWhiteSpace(model?.Name)
        || string.IsNullOrWhiteSpace(model?.Line1)
        || string.IsNullOrWhiteSpace(model?.PostalCode);
    if (!isError)
    {
        await PlaceOrder();
    }
    isSubmitting = false;
}

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

尝试在不输入任何信息的情况下订购一些比萨。你应会看到错误消息。
按 Shift + F5 停止正在运行的应用。

继续

练习 - 使用 Blazor 组件创建地址表单

添加 Blazor EditForm 组件

将 HTML 元素替换为 Blazor 组件

提交表单前检查是否存在空字段

反馈