练习 - 使用 Blazor 组件创建地址表单
目前,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 停止正在运行的应用。