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

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

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

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

添加 Blazor EditForm 组件

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

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

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

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

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

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

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

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

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

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

将 HTML 元素替换为 Blazor 组件

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

2. 选择“编辑”菜单，然后选择“替换”。

3. 在“查找”字段中输入<input，在“替换”字段中输入<InputText，然后选择“全部替换”。

   

4. 选择“编辑”菜单，然后选择“替换”。

5. 在“查找”字段中，在@bind=”字段中输入@bind-Value=，然后选择“全部替换”。

6. 删除“名称”字段上的 @ref="startName" 代码。

7. 删除 @code 块中参数声明下方的所有代码。 该块现在应如下所示。

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

   目前仅 HTML 元素支持 FocusAsync。

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

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

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

2. 在 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>
   

3. 在 @code 块中，为 isError 布尔值添加一个声明。

   bool isError = false;
   

4. 改进 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;
   }
   

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

   尝试在不输入任何信息的情况下订购一些比萨。 你应会看到错误消息。

   

6. 按 Shift + F5 停止应用运行。