Alıştırma - Kodunuzda yinelemeyi azaltmak için Blazor düzeni ekleme

Tamamlandı

Blazing Pizza uygulamasına sayfa eklediğinizde gezinti HTML'sini kopyaladığımız fark edebilirsiniz. Blazor, bu tür bir sayfa iskelesini tek bir yerde oluşturmak için yerleşik desteğe sahiptir. Bunlara Blazor düzenleri denir.

Artık birkaç sayfada çok sayıda yinelenen HTML'miz var. Ardından, gezinti ve şirket bilgilerini tek bir yerde ekleyebilmeniz için uygulamanın tamamı için bir düzen oluşturacaksınız.

Bu alıştırmada bir MainLayout bileşeni oluşturacaksınız. Bu düzeni belirli sayfalar için nasıl kullanabileceğinizi ve ardından uygulamanın tamamı için varsayılan düzen haline nasıl getirebileceğinizi görürsünüz.

MainLayout bileşeni ekleme

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

2. Dosyayı MainLayout.razor olarak adlandırın. Dosyayı Paylaşılan dizinine kaydettiğinizden emin olun.

3. Yeni dosyada bir düzen bileşeni oluşturun ve gezinti HTML'sini herhangi bir sayfadan kopyalayın.

   @inherits LayoutComponentBase
   
   <div id="app">
   
     <header 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>
     </header>
   
     <div class="content">
       @Body
     </div>
   
     <footer>
       &copy; Blazing Pizza @DateTime.UtcNow.Year
     </footer>
   
   </div>
   

   Bu düzen _Host.cshtml dosyasındaki bazı işaretlemeleri kullanır, bu nedenle bunları buradan kaldırmamız gerekir.

4. Ctrl+S'yi seçerek değişikliklerinizi kaydedin.

5. Dosya gezgininde Sayfalar'ı genişletin. Ardından _Host.cshtml dosyasını seçin.

6. Blazor uygulama bileşenini çevreleyen öğeleri şu koddan değiştirin:

   <div id="app">
       <div class="content">
           <component type="typeof(App)" render-mode="ServerPrerendered" />
       </div>
   </div>
   

   Bu koda:

   <component type="typeof(App)" render-mode="ServerPrerendered" />
   

Sayfa bileşeninde Blazor düzeni kullanma

1. Dosya gezgininde Sayfalar'ı genişletin. Ardından Index.razor'ı seçin.

2. top-bar div öğesini silin ve yönergesinin @page altında yeni düzene bir başvuru ekleyin.

   @layout MainLayout
   

3. Şimdi eski <h1>Blazing Pizzas</h1> öğeyi de silelim. Düzende bir üst çubuk olduğundan artık gerekli değildir.

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

   

   Yeni giriş sayfasında bu yıl için otomatik olarak güncelleştirilen bir telif hakkı alt bilgisi bulunur. Bu düzeni kullanmayan bir sayfanın nasıl göründüğünü görmek için Siparişlerim'i seçin. Veya gibi (http://localhost:5000/help)geçersiz bir sayfaya gidin. Şu anda 404 Sayfa Bulunamadı sayfamızı markalamadık.

   

5. Uygulamayı durdurmak için Shift + F5'i seçin.

Tüm sayfaları yeni düzene güncelleştir

Artık yönergesini @layout MainLayout uygulamanızdaki tüm sayfalara ekleyebilirsiniz, ancak Blazor'ın daha iyi bir çözümü vardır. İlk olarak, Index.razor'a yeni eklenen düzen yönergesini silin.

1. Index.razor bileşeninde
2. Dosya gezgininde Sayfalar'ı genişletin. Ardından MyOrders.razor öğesini seçin.
3. top-bar div öğesini silin.
4. Dosya gezgininde Sayfalar'ı genişletin. Ardından OrderDetail.razor öğesini seçin.
5. top-bar div öğesini silin.
6. Dosya gezgininde Sayfalar'ı genişletin. Ardından Checkout.razor'ı seçin.
7. top-bar div öğesini silin.

App.razor bileşeni, sayfaların yönlendirme şeklini değiştirebileceğimiz, aynı zamanda Blazor'a varsayılan düzeni kullanmasını da söyleyebileceğimiz yerdir.

1. Dosya gezgininde App.razor'ı seçin.

2. DefaultLayout="typeof(MainLayout)" bildirimini RouteView öğesine ekleyin.

3. LayoutView'aLayout="typeof(MainLayout)" ekleyin.

4. App.razor artık şu örnek gibi görünmelidir:

   <Router AppAssembly="typeof(Program).Assembly" Context="routeData">
       <Found>
           <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
       </Found>
       <NotFound>
           <LayoutView Layout="typeof(MainLayout)">
               <div class="main">Sorry, there's nothing at this address.</div>
           </LayoutView>
       </NotFound>
   </Router>
   

Yeni düzeni test edin

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

   

   Varsayılan düzeni kullanmanın avantajı, bunu tüm sayfalara uygulayabilmeniz ve bulunmayan sayfalar için düzen görünümü için kullanabilmenizdir.

2. Uygulamayı durdurmak için Shift + F5'i seçin.

Uygulama için yapmanız gereken çalışmalar bu modülde tamamlanmıştır. Formları ve doğrulamayı nasıl işleyeceklerini görmek istiyorsanız, bu öğrenme yolundaki bir sonraki modülü tamamlayın.