연습 - Blazor 애플리케이션의 컨트롤을 데이터에 바인딩 - Training

5분

Blazing Pizza 앱은 고객이 피자를 수정하고 주문에 추가할 때 인터페이스를 업데이트해야 합니다. Blazor를 사용하면 HTML 컨트롤을 C# 속성에 바인딩하여 값이 변경되면 업데이트할 수 있습니다.

고객은 주문하는 피자와 선택하는 사이즈가 지불하는 가격에 어떤 영향을 미치는지 확인해야 합니다.

이 연습에서는 주문을 업데이트하고 편집할 수 있는 위치에 Blazing Pizza 앱을 제공합니다. 피자의 속성에 컨트롤을 바인딩하고 그 변경 내용에 따라 가격을 다시 계산하는 방법을 확인할 수 있습니다.

고객의 피자 주문 표시

고객이 주문에 추가한 모든 피자를 표시하는 사이드바를 추가하려고 합니다.

앱이 계속 실행되고 있으면 중지합니다.
Visual Studio Code의 파일 탐색기에서 페이지를 확장한 다음, Index.razor를 선택합니다.

@if 및 @code 블록 간에 다음 코드를 추가합니다.

<div class="sidebar">
    @if (order.Pizzas.Any())
    {
        <div class="order-contents">
            <h2>Your order</h2>

            @foreach (var configuredPizza in order.Pizzas)
            {
              <div class="cart-item">
                  <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                  <div class="item-price">
                      @configuredPizza.GetFormattedTotalPrice()
                  </div>
              </div>
            }
        </div>
    }
    else
    {
        <div class="empty-cart">Choose a pizza<br>to get started</div>
    }

    <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
        Total:
        <span class="total-price">@order.GetFormattedTotalPrice()</span>
        <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
            Order >
        </a>
    </div>
</div>

이 HTML은 페이지에 사이드바를 추가합니다. OrderState.Order에 피자가 있으면 이를 표시합니다. 주문이 없으면 고객에게 주문을 추가하라는 메시지가 표시됩니다.

구성 요소가 주문이 무엇인지 모르기 때문에 몇 가지 오류가 표시됩니다.

@code 블록에서 List<PizzaSpecial> specials = new(); 아래에 다음 코드를 추가합니다.
```
Order order => OrderState.Order;
```
F5를 선택하거나 실행을 선택합니다. 그런 다음, 디버깅 시작을 선택합니다.

몇몇 피자를 주문하고 일부를 취소해 보세요. 피자가 장바구니에 추가되고 주문 총액이 업데이트되는 것을 볼 수 있습니다.
Shift+F5를 누르거나 디버깅 중지를 선택합니다.

고객의 주문에서 피자 제거

고객의 장바구니에서 구성된 피자를 제거할 방법이 없다는 것을 알 수 있습니다. 이 기능을 추가해 보겠습니다.

첫 번째 단계는 주문에서 피자를 제거하는 방법을 제공할 수 있도록 OrderState 서비스를 업데이트하는 것입니다.

파일 탐색기에서 Services/OrderState.cs를 선택합니다.

클래스의 맨 아래에 다음 메서드를 추가합니다.

public void RemoveConfiguredPizza(Pizza pizza)
{
    Order.Pizzas.Remove(pizza);
}

파일 탐색기에서 페이지를 확장한 다음, index.razor를 선택합니다.
<div class="cart-item">에서 닫는 </div> 앞에 <a> 태그를 추가하여 제거 단추를 만듭니다.
```
<a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
```
이 태그는 주문 사이드바의 각 피자에 X를 추가합니다. 선택하면 OrderState 서비스에서 RemoveConfiguredPizza 메서드를 호출합니다.
F5를 선택하거나 실행을 선택합니다. 그런 다음, 디버깅 시작을 선택합니다.
Shift+F5를 누르거나 디버깅 중지를 선택합니다.

동적으로 피자 사이즈 구성

사이즈 슬라이더가 변경될 때 피자 구성 대화 상자가 업데이트되지 않습니다. 구성 요소에는 피자, 사이즈를 업데이트한 다음, 가격을 다시 계산하는 방법이 필요합니다.

파일 탐색기에서 공유를 확장한 다음, ConfigurePizzaDialog.razor를 선택합니다.

input HTML 컨트롤에 코드를 추가하여 해당 값을 피자 사이즈에 바인딩합니다.

<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>

F5를 선택하거나 실행을 선택합니다. 그런 다음, 디버깅 시작을 선택합니다.

업데이트된 대화 상자를 사용하여 주문에 다른 사이즈의 피자를 추가합니다. 끌기 대신 슬라이더 막대를 클릭합니다. 컨트롤에서의 마우스 위로 이벤트로 피자 사이즈가 업데이트되는 것을 관찰합니다.

슬라이더를 끌면 마우스를 놓을 때까지 사이즈가 변경되지 않습니다. 문제를 해결해 보겠습니다.
Shift+F5를 누르거나 디버깅 중지를 선택합니다.

컨트롤을 바인딩해야 하는 이벤트를 추가합니다.

<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />

F5를 선택하거나 실행을 선택합니다. 그런 다음, 디버깅 시작을 선택합니다.

@bind="Pizza.Size" 코드를 추가한 것이 어떻게 그 많은 기능을 제공했나요? ConfigurePizzaDialog.razor 코드 전체를 살펴보면 팀에서 이미 다른 요소를 피자의 속성에 연결한 것을 확인할 수 있습니다.

예를 들어 이 코드로 인해 가격이 업데이트됩니다.

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

피자에 대한 메서드 GetFormattedTotalPrice()는 피자 사이즈를 사용하여 총 가격을 계산하기 때문에 피자 사이즈 변경에 따라 가격이 업데이트됩니다.

Blazing Pizza 앱이 개선되었습니다. 계속 개선하려면 이 학습 경로의 다음 모듈을 완료하세요.

계속

연습 - Blazor 애플리케이션의 컨트롤을 데이터에 바인딩

고객의 피자 주문 표시

고객의 주문에서 피자 제거

동적으로 피자 사이즈 구성

피드백