Alıştırma - Uygulama gezintinizi geliştirmek için yol parametrelerini kullanma

Tamamlandı

Blazor yol parametreleri, bileşenlerin URL'de geçirilen verilere erişmesine izin verir. Rota parametreleri, uygulamamızın kendi tarafından belirli siparişlere erişmesini OrderIdsağlar.

Müşteriler belirli siparişler hakkında daha fazla bilgi görmek istiyor. Bu nedenle, müşterileri doğrudan verilen siparişlerine götürmek için ödeme sayfasını güncelleştirmeye karar verirsiniz. Ardından, şu anda açık olan siparişleri izlemelerine izin vermek için siparişler sayfasını güncelleştirmek istiyorsunuz.

Bu alıştırmada rota parametrelerini kullanan yeni bir sipariş ayrıntı sayfası ekleyebilirsiniz. Ardından, doğru veri türünü denetlemek için parametresine nasıl kısıtlama ekleyebileceğinizi görürsünüz.

Sipariş ayrıntı sayfası oluşturma

1. Visual Studio Code'daki menüdeDosya Yeni Dosya'yı>.

2. Yeni dosyayı OrderDetail.razor olarak adlandırın ve Sayfalar dizinine kaydedin.

3. Yeni dosyada şu kodla bir sipariş ayrıntısı sayfası bileşeni oluşturun:

   @page "/myorders/{orderId}"
   @inject NavigationManager NavigationManager
   @inject HttpClient HttpClient
   
   <div class="top-bar">
       <a class="logo" href="">
           <img src="img/logo.svg" />
       </a>
   
       <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
           <img src="img/pizza-slice.svg" />
           <div>Get Pizza</div>
       </NavLink>
   
       <NavLink href="myorders" class="nav-tab">
           <img src="img/bike.svg" />
           <div>My Orders</div>
       </NavLink>
   
   </div>
   
   <div class="main">
       @if (invalidOrder)
       {
           <h2>Order not found</h2>
           <p>We're sorry but this order no longer exists.</p>
       }
       else if (orderWithStatus == null)
       {
           <div class="track-order">
               <div class="track-order-title">
                   <h2>
                     <text>Loading...</text>
                   </h2>
                   <p class="ml-auto mb-0">
                       ...
                   </p>
               </div>
           </div>
       }
       else
       {
           <div class="track-order">
               <div class="track-order-title">
                   <h2>
                       Order placed @orderWithStatus.Order.CreatedTime.ToLongDateString()
                   </h2>
                   <p class="ml-auto mb-0">
                       Status: <strong>@orderWithStatus.StatusText</strong>
                   </p>
               </div>
               <div class="track-order-body">
                   <div class="track-order-details">
                     @foreach (var pizza in orderWithStatus.Order.Pizzas)
                     {
                         <p>
                             <strong>
                                 @(pizza.Size)"
                                 @pizza.Special.Name
                                 (£@pizza.GetFormattedTotalPrice())
                             </strong>
                         </p>
                     }
                   </div>
               </div>
           </div>
       }
   </div>
   
   @code {
       [Parameter] public int OrderId { get; set; }
   
       OrderWithStatus orderWithStatus;
       bool invalidOrder = false;
   
       protected override async Task OnParametersSetAsync()
       {
         try
         {
             orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>(
                 $"{NavigationManager.BaseUri}orders/{OrderId}");
         }
         catch (Exception ex)
         {
             invalidOrder = true;
             Console.Error.WriteLine(ex);
         }
       }
   }
   
   

   Bu sayfa, MyOrders bileşenine benzer. OrderController'a bir çağrı yapıyoruz, ancak bu kez belirli bir sipariş istiyoruz. ile eşleşeni OrderIdistiyoruz. Şimdi bu isteği işleyen kodu ekleyelim.

4. Ctrlseçerek değişikliklerinizi kaydedin.

5. Dosya gezgininde OrderController.cs'ı seçin.

6. yönteminin PlaceOrder altında, durumlu siparişleri döndürmek için yeni bir yöntem ekleyin.

   [HttpGet("{orderId}")]
   public async Task<ActionResult<OrderWithStatus>> GetOrderWithStatus(int orderId)
   {
       var order = await _db.Orders
           .Where(o => o.OrderId == orderId)
           .Include(o => o.Pizzas).ThenInclude(p => p.Special)
           .Include(o => o.Pizzas).ThenInclude(p => p.Toppings).ThenInclude(t => t.Topping)
           .SingleOrDefaultAsync();
   
       if (order == null)
       {
           return NotFound();
       }
   
       return OrderWithStatus.FromOrder(order);
   }
   

   Bu kod, Sipariş denetleyicisinin URL'de orderId ile bir HTTP isteğine yanıt vermesini etkinleştirdi. Yöntemi daha sonra veritabanını sorgulamak ve bir sipariş bulunursa bir OrderWithStatus nesne döndürmek için bu kimliği kullanır.

   Müşteri kullanıma alırken bu yeni sayfayı kullanalım. Checkout.razor bileşenini güncelleştirmeniz gerekir.

7. Dosya gezgininde Sayfalar'ı genişletin. Ardından Checkout.razor'ı seçin.

8. Yapılan siparişin sipariş kimliğini kullanmak için aramayı aşağıdaki şekilde değiştirin.

   NavigationManager.NavigateTo($"myorders/{newOrderId}");
   

   Mevcut kod, siparişin yerleştirilmesinden gelen yanıt olarak zaten yakalanıyordu newOrderId . Şimdi doğrudan bu siparişe gitmek için kullanabilirsiniz.

Route parametresini doğru veri türüyle kısıtlama

Uygulama yalnızca gibi (http://localhost:5000/myorders/6)sayısal sıra kimliklerine sahip isteklere yanıt vermelidir. Birinin sayısal olmayan siparişleri kullanmaya çalışmasını engelleyen hiçbir şey yoktur. Şimdi bunu değiştirelim.

1. Dosya gezgininde Sayfalar'ı genişletin. Ardından OrderDetail.razor öğesini seçin.

2. Bileşenin yalnızca tamsayıları kabul edebilmesi için yol parametresini değiştirin.

   @page "/myorders/{orderId:int}"
   

3. Artık birisi adresine(http://localhost:5000/myorders/non-number) gitmeye çalışırsa Blazor yönlendirmesi URL için bir eşleşme bulamaz ve sayfa bulunamadı değerini döndürür.

   

4. Visual Studio Code'da F5'i seçin. Veya Çalıştır menüsünde Hata Ayıklamayı Başlat'ı seçin.

   

   Uygulamayı inceleyin, sipariş ve kullanıma alma. Ayrıntılı sipariş ekranına yönlendirilirsiniz ve siparişin durumunu görürsünüz.

5. Yeni bir tarayıcı penceresi açın ve girin (http://localhost:5000/myorders/2). Nonintegers dahil olmak üzere farklı sipariş kimliklerini deneyin. Geçerli bir sipariş olmayan bir tamsayı kullanırsanız, Order not found iletisi alırsınız.

   

   Noninteger sipariş kimliklerini kullanırsanız sayfanın bulunamadığını görürsünüz. Daha da önemlisi, uygulamanın işlenmeyen bir özel durumu yoktur.

6. Uygulamayı durdurmak için Shift

Siparişler sayfasını güncelleştirme

Şu anda Siparişlerim sayfasında daha fazla ayrıntı görüntülemek için bağlantılar bulunur, ancak URL yanlıştır.

1. Dosya gezgininde Sayfalar'ı genişletin. Ardından MyOrders.razor öğesini seçin.

2. <a href="myorders/" class="btn btn-success"> öğesini şu kodla değiştirin:

   <a href="myorders/@item.Order.OrderId" class="btn btn-success">
   

Bu alıştırma için son pizza siparişinizi vererek bu kodun nasıl çalıştığını test edebilirsiniz. Ardından Siparişlerim'i seçin