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

5분

타오르는 피자 앱은 고객이 피자를 수정하고 주문에 추가 할 때 인터페이스를 업데이트해야합니다. 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에 피자가 있으면 이를 표시합니다. 주문이 없으면 고객에게 일부를 추가하라는 메시지가 표시됩니다.

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

아래 List<PizzaSpecial> specials = new();블록에서 @code 다음 코드를 추가합니다.
```
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를 선택하거나 디버깅 중지를 선택합니다.

동적으로 피자 크기 구성

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

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

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

<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 애플리케이션의 데이터에 컨트롤 바인딩

고객의 피자 주문 표시

고객의 주문에서 피자 제거

동적으로 피자 크기 구성

피드백