Упражнение. Привязка элементов управления к данным в приложениях Blazor

Завершено

Приложение Blazing Pizza должно обновлять интерфейс, когда клиенты изменяют пиццы и добавляют их в свои заказы. Blazor позволяет привязать элементы управления HTML к свойствам C# для обновления при изменении их значений.

Клиенты должны видеть, какие пиццы они заказывают и как размер, который они выбирают, влияет на цену.

В этом упражнении вы получите приложение Blazing Pizza в положении, где заказы можно обновить и изменить. Вы видите, как привязать элементы управления к свойствам пиццы и пересчитывать цены на эти изменения.

Отображение заказа на пиццу клиента

Вы добавите боковую панель, которая отображает все пиццы, которые клиент добавляет в свой заказ.

1. Остановите приложение, если оно по-прежнему запущено.

2. В Visual Studio Code в проводнике разверните Pages и выберите Index.razor.

3. Между блоками @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есть пицца, она отображает их. Если заказов нет, клиентам предлагается добавить некоторые.

   Существуют некоторые ошибки, так как компонент не знает, какие заказы имеются.

4. В блоке @code в List<PizzaSpecial> specials = new();добавьте следующий код:

   Order order => OrderState.Order;
   

5. Выберите F5 или выберите Выполнить. Затем выберите Начать отладку.

   

   Попробуйте заказать некоторые пиццы и отменить некоторые. Обратите внимание, что они добавляются в корзину и общая сумма заказа обновляется.

6. Выберите SHIFT+F5 или нажмите кнопку "Остановить отладку".

Удаление пиццы из заказа клиента

Вы можете заметить, что нет способа удалить настроенную пиццу из корзины покупок клиента. Добавим эту функцию.

Первым шагом является обновление службы OrderState, чтобы он смог предоставить метод удаления пиццы из заказа.

1. В проводнике выберите Services/OrderState.cs.

2. В нижней части класса добавьте следующий метод:

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

3. В файловом проводнике разверните Pages и выберите Index.razor.

4. В <div class="cart-item">добавьте тег <a> перед закрывающим </div>, чтобы создать кнопку "Удалить":

   <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
   

   Этот тег добавляет X к каждой пицце в панели с заказами. Когда вы выбираете RemoveConfiguredPizza, он вызывает метод OrderState в службе.

5. Выберите F5 или выберите Выполнить. Затем выберите Начать отладку.

   

6. Выберите SHIFT+F5 или нажмите кнопку "Остановить отладку".

Динамическое настройка размера пиццы

Диалоговое окно конфигурации пиццы не обновляется, когда изменяется ползунок размера. Компонент нуждается в способе обновления пиццы и её размера, а также для пересчёта цены.

1. В проводнике разверните Общие ресурсы и выберите ConfigurePizzaDialog.razor.

2. Добавьте код для привязки input значения элемента управления HTML к размеру пиццы:

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

3. Выберите F5 или выберите Выполнить. Затем выберите Начать отладку.

   Используйте обновленное диалоговое окно, чтобы добавить в заказ несколько различных размеров пиццы. Выберите точку на ползунке, вместо того чтобы перетаскивать его. Обратите внимание, что размер пиццы обновляется при отпускании кнопки мыши на элементе управления.

   Если перетащить ползунок, размер не изменится, пока не выпустите мышь. Давайте исправим это.

4. Выберите SHIFT+F5 или нажмите кнопку "Остановить отладку".

5. Добавьте событие, к которым должен быть привязан элемент управления:

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

6. Выберите F5 или выберите Выполнить. Затем выберите Начать отладку.

   

Как добавление кода @bind="Pizza.Size" обеспечило такую большую функциональность? Если вы изучите весь код ConfigurePizzaDialog.razor , вы увидите, что ваша команда уже подключила другие элементы к свойствам пиццы.

Например, цены обновляются из-за этого кода:

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

Цена обновляется по мере изменения размера пиццы, так как метод пиццы GetFormattedTotalPrice() использует размер пиццы для вычисления общей цены.

Вы добились прогресса в приложении Blazing Pizza. Если вы хотите продолжить его улучшение, выполните следующий модуль в этом пути обучения.