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

Компания пиццы решила, что они хотели бы продать специальную семейную пиццу, которая доступна только в одном 24-дюймовом размере. Текущее приложение пиццы имеет ползунок размера, который не поддерживает одноразмерную пиццу. Вам будет предложено добавить новую пиццу размера семьи и отключить параметр размера для этой пиццы.

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

Создание новой семейной пиццы

Во-первых, вы добавите новую FixedSize возможность в модель пиццы и создадите новую пиццу размера семьи в базе данных пиццы.

1. В обозревателе Visual Studio Code разверните "Модели" и выберите PizzaSpecial.cs.

2. В файле PizzaSpecial.csновое свойство:

   public int? FixedSize { get; set; }
   

3. Откройте файл Pizza.cs и замените GetBasePrice метод следующим кодом:

   public decimal GetBasePrice() =>
       Special is { FixedSize: not null }
           ? Special.BasePrice
           : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
   

   Код теперь учитывает специальный объект, имеющий FixedSize значение при возврате BasePrice.

4. Разверните данные и выберите SeedData.cs.

5. В файле SeedData.cs добавьте следующий код для новой пиццы размера семьи в конец specials объявления массива в методеInitializeAsync.

   new()
   {
       Id = 9,
       Name = "Margherita Family Size",
       Description = "24\" of pure tomatoes and basil",
       BasePrice = 14.99m,
       ImageUrl = "img/pizzas/margherita.jpg",
       FixedSize = 24
   }
   

6. Класс SeedData предварительно заполняет базу данных пиццы специальными пиццами. Чтобы создать новую PizzaSpecial , необходимо удалить существующую базу данных. В обозревателе выберите и удалите pizza.db, pizza.db-shm и pizza.db-wal-файлы .

7. В Visual Studio Code нажмите клавишу F5или нажмите кнопку "Запустить отладку>".

8. В приложении выберите новую пиццу Margherita Family Size .

   

9. В форме заказа обратите внимание, что размер пиццы по-прежнему можно изменить.

10. Нажмите клавиши SHIFT+F5 или нажмите >, чтобы остановить приложение.

Удаление ползунка размера

Компонент ConfigurePizzaDialog использует ЭЛЕМЕНТ HTML range , чтобы разрешить клиенту выбрать размер пиццы. Одним из способов отключения входных данных пользователей является условное опущение отрисовки элемента управления пользователем размера.

1. В обозревателе Visual Studio Code разверните узел "Общий", а затем выберите ConfigurePizzaDialog.razor.

2. В директиве @code после существующих свойств добавьте следующие элементы:

   bool supportSizing = true;
   
   protected override void OnInitialized()
   {
       if (Pizza is { Special.FixedSize: not null })
       {
           Pizza.Size = Pizza.Special.FixedSize.Value;
           supportSizing = false;
       }
   }
   

   Поле supportSizing по умолчанию trueимеет фиксированный размер, но если пицца имеет фиксированный размер, для поля задано falseзначение . Метод OnInitialized жизненного цикла переопределяет размер пиццы фиксированному размеру и отключает поддержку изменения размера.

   Примечание.

   Если код использовался для взаимодействия JavaScript, использование OnInitialized метода не будет работать. Вместо этого необходимо использовать OnAfterRenderAsync метод для обеспечения доступности взаимодействия JavaScript.

3. В верхней части файла замените <form class="dialog-body">существующие label и input строки следующим кодом:

   @if (supportSizing)
   {
       <label>Size:</label>
       <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
           step="1" @bind="Pizza.Size" @bind:event="oninput" />
   }
   

4. Нажмите клавишу F5 или выберите "Запустить отладку>".

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

   

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

7. Нажмите клавиши SHIFT+F5 или нажмите >, чтобы остановить приложение.