연습 - Blazor 구성 요소를 사용하여 주소 양식 만들기 - Training

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; }
}
```
FocusAsync는 현재 HTML 요소에서만 지원됩니다.

양식을 제출하기 전에 빈 필드 확인

고객이 이름 또는 주소를 입력하지 않으면 앱에서 표시할 수 있는 오류 메시지를 추가해 보겠습니다.

파일 탐색기에서 페이지를 확장한 다음 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 구성 요소로 바꾸기

양식을 제출하기 전에 빈 필드 확인

피드백