練習 - 使用 Blazor 元件建立位址表單

已完成

目前，Blazing Pizza 應用程式會針對按鈕使用 HTML 元素並擷取數據。 Blazor 架構可改善對窗體的支援，讓他們能夠使用可系結至 C# 模型的元件。

小組希望您將目前的 HTML 元素取代為 Blazor 元件。 小組希望您只有在地址和名稱並非空白時，才提交訂單。

在此練習中，您會以 Blazor 元件取代目前的 HTML 字段，並變更客戶提交訂單的方式。 然後，您會看到如何使用該 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; }
   }
   

   FocusAsync 目前僅在 HTML 元素上受支援。

提交表單之前，請先檢查是否有空白欄位

我們將新增一個錯誤訊息，只要客戶未輸入其名稱或地址，就會看到應用程式顯示此訊息。

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 以停止應用程式執行。