Alıştırma - Blazor uygulamalarında verilere denetim bağlama

Tamamlandı

Blazing Pizza uygulamasının müşteriler pizzaları değiştirip siparişlerine eklediğinde arabirimini güncelleştirmesi gerekiyor. Blazor, değerleri değiştiğinde güncelleştirilecek HTML denetimlerini C# özelliklerine bağlamanıza olanak tanır.

Müşteriler hangi pizzaları sipariş ettiklerini ve seçtikleri boyutun fiyatı nasıl etkilediğini görmelidir.

Bu alıştırmada Blazing Pizza uygulamasını siparişlerin güncelleştirilebileceği ve düzenlenebileceği bir konuma sahip olacaksınız. Denetimleri bir pizzanın özelliklerine bağlamayı ve bu değişiklikler üzerine fiyatları yeniden hesaplamayı öğrenin.

Müşterinin pizza siparişini görüntüleme

Müşterinin siparişine eklediği tüm pizzaları görüntüleyen bir kenar çubuğu ekleyeceksiniz.

1. Hala çalışıyorsa uygulamayı durdurun.

2. Visual Studio Code'da, dosya gezgininde Sayfalar'ı genişletin ve ardından Index.razor'ı seçin.

3. @if ve @code blokları arasına şu kodu ekleyin:

   <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>
   

   Bu HTML sayfaya bir kenar çubuğu ekler. OrderState.Orderiçinde pizza varsa, bunları görüntüler. Sipariş yoksa, müşterilerin sipariş eklemeleri teşvik edilir.

   Bileşen siparişlerin ne olduğunu bilmediğinden bazı hatalar vardır.

4. @codealtındaki List<PizzaSpecial> specials = new(); bloğuna şu kodu ekleyin:

   Order order => OrderState.Order;
   

5. F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlatseçeneğini seçin.

   

   Biraz pizza sipariş etmeyi ve bazılarını iptal etmeyi deneyin. Sepete eklendiklerini ve sipariş toplamının güncellendiğini fark edin.

6. Shift+F5 seçin veya Hata Ayıklamayı Durdurseçin.

Müşterinin siparişinden pizza kaldırma

Yapılandırılmış pizzayı müşterinin alışveriş sepetinden kaldırmanın bir yolu olmadığını fark edebilirsiniz. Şimdi bu işlevi ekleyelim.

İlk adım, pizzaları bir siparişten kaldırma yöntemi sunabilmesi için OrderState hizmetini güncelleştirmektir.

1. Dosya gezgininde Hizmetler/OrderState.cs'ı seçin.

2. sınıfının en altına şu yöntemi ekleyin:

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

3. Dosya gezgininde Sayfalar'ı genişletin ve index.razor öğesini seçin.

4. <div class="cart-item">'da, bir kaldırma düğmesi oluşturmak için kapanış <a>'den önce bir </div> etiketi ekleyin.

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

   Bu etiket, sipariş kenar çubuğundaki her pizzaya bir X ekler. Bunu seçtiğinizde, hizmette RemoveConfiguredPizzaOrderState yöntemini çağırır.

5. F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlatseçeneğini seçin.

   

6. Shift+F5 seçin veya Hata Ayıklamayı Durdurseçin.

Pizza boyutunu dinamik olarak yapılandırma

Boyut kaydırıcısı değiştirildiğinde pizza yapılandırma iletişim kutusu güncelleştirilmez. Bileşenin pizzayı ve boyutunu güncelleştirmenin ve ardından fiyatı yeniden hesaplamanın bir yoluna ihtiyacı vardır.

1. Dosya gezgininde Paylaşılan genişletin ve ardından ConfigurePizzaDialog.razorseçin.

2. HTML denetiminin input değerini pizza boyutuna bağlamak için kod ekleyin:

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

3. F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlatseçeneğini seçin.

   Siparişinize farklı boyutta pizzalar eklemek için güncelleştirilmiş iletişim kutusunu kullanın. Kaydırıcı çubuğunda sürüklemek yerine bir nokta seçin. Kontrolde fare tuşu serbest bırakıldığında pizza boyutunun güncellendiğini gözlemleyin.

   Kaydırıcıyı sürüklerseniz, fareyi serbest bırakana kadar boyut değişmez. Bunu düzeltelim.

4. Shift+F5 seçin veya Hata Ayıklamayı Durdurseçin.

5. Denetimin bağlı olması gereken olayı ekleyin:

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

6. F5'i veya Çalıştır'ı seçin. Ardından Hata Ayıklamayı Başlatseçeneğini seçin.

   

@bind="Pizza.Size" kodu eklemek nasıl bu kadar çok işlevsellik sağladı? ConfigurePizzaDialog.razor kodunun tamamını incelerseniz ekibinizin diğer öğeleri zaten pizzanın özelliklerine bağladığını görürsünüz.

Örneğin, bu kod nedeniyle fiyat güncelleştirilir:

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

Pizza GetFormattedTotalPrice() yöntemi toplam fiyatı hesaplamak için pizza boyutunu kullandığından pizza boyutu değiştikçe fiyat güncelleştirilir.

Blazing Pizza uygulamasında ilerleme kaydettiniz. Geliştirmeye devam etmek istiyorsanız bu öğrenme yolundaki bir sonraki modülü tamamlayın.