Proyek Blazor Server #5

Membuat dan menggunakan layout halaman

Blazor Server dan Blazor WebAssembly mendukung layout halaman. Layout telah disinggung sekilas pada artikel sebelumnya, Proyek Blazor Server #4, yang membahas rute.

Proyek Blazor Server #4

Layout adalah template dengan satu atau lebih placeholder elemen seperti header, footer, menu, dll. Setiap halaman dapat menggunakan layout yang sama dan atau layout yang berbeda. Seperti pada komponen halaman, Anda dapat melakukan hal yang sama pada komponen layout seperti dependency injection, data binding, dan menyarangkan komponen lain. Perbedaannya adalah layout memperoleh warisan dari kelas LayoutComponentBase.

Ada tiga cara untuk menerapkan layout halaman.
(1) Menentukan layout secara eksplisit untuk setiap halaman.
(2) Menentukan layout default untuk semua halaman dalam aplikasi.
(3) Menentukan layout untuk semua komponen dalam suatu folder dan subfolder.

Semua bahasan berikut berdasarkan proyek pada artikel sebelumnya, Blazor Server Project #3 . Silakan unduh kode sumbernya di sini.

Proyek Blazor Server #3

Menentukan layout secara eksplisit untuk suatu halaman

Sebagai contoh, kita akan membuat layout sederhana dan menerapkannya ke sebuah halaman.

Membuat layout sederhana

• Buka proyek BookApp menggunakan Visual Studio 2019.
• Pada panel Solution Explorer di sisi kanan layar, pilih
  Pages|Add|Razor Component...
• Ketik SimpleLayout.razorsebagai nama file, klik Add.
• Silakan salin kode berikut, tempelkan ke panel SimpleLayout.razor di sisi kiri layar.

SimpleLayout.razor

@inherits LayoutComponentBase 
@Body

SimpleLayout.razor di atas hanya memiliki satu elemen yang menggunakan sintaks Razor @Bodyuntuk menentukan lokasi tempat konten dirender.

Menerapkan tata letak secara eksplisit ke sebuah halaman

Setiap halaman dapat memilih tata letak yang akan digunakan dengan menyebutkan nama tata letak menggunakan direktif @layout. Misalnya, tambahkan direktif @layout SimpleLayout ke halaman Index.razor.

Index.razor

@layout SimpleLayout
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.

Saat dijalankan, tampilkan homepage berikut.

Menentukan layout default untuk semua halaman aplikasi

Komponen MainLayout

Saat Anda membuat aplikasi Blazor menggunakan salah satu template proyek Blazor, komponen MainLayout.razor secara otomatis diinstal ke dalam folder Shared.

MainLayout.razor

@inherits LayoutComponentBase
<div class="sidebar">
   <NavMenu />
</div>
<div class="main">
   <div class="top-row px-4">
      <a href="https://docs.microsoft.com/aspnet/"
         target="_blank">About</a>
   </div>
   <div class="content px-4">
      @Body
   </div>
</div>

App.razor

Komponen Router dalam file App.razor menetapkan komponen MainLayout sebagai layout default.

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

Setiap halaman yang tidak ditentukan ke layout apa pun akan menerapkan layout default. Kita akan menerapkannya ke Index.razorsebagai contoh.

• Buka file Index.razor. Direktif @layout SimpleLayout menunjukkan Index.razormasih mengacu ke SimpleLayout.razor.
• Hapus kode baris pertama — direktif @layout SimpleLayout — secara otomatis Index.razormengacu ke layout default (MainLayout.razor).
• Pada waktu dijalankan, komponen Index.razor menerapkan layout default dan menampilkan homepage berikut.

• Hapus file SimpleLayout.razor karena proyek tidak membutuhkannya lagi.

Menentukan layout untuk semua komponen dalam suatu folder dan subfolder

Anda dapat membuat file template dengan nama _Imports.razordalam suatu folder jika semua komponen dalam folder dan secara rekursif di semua subfoldernya menggunakan layout yang sama. Misalnya, semua komponen dalam folder yang diberi nama Superuserdan secara rekursif di semua subfoldernya menggunakan tata letak yang sama bernama SpecialLayout.razor.

• Buat file bernama _Imports.razordi Superuserfolder.
• Tambahkan direktif @layout SpecialLayout ke dalam file.

Tidak perlu menambahkan @layout SpecialLayoutberulang kali ke semua file .razor di dalam folder dan subfolder, begitu juga direktif @using.

Memodifikasi MainLayout.razor

Elemen About tidak diperlukan, diganti dengan hari dan tanggal saat ini. Berikut adalah MainLayout.razor yang dimodifikasi.

MainLayout.razor

@inherits LayoutComponentBase
<div class="sidebar">
   <NavMenu />
</div>
<div class="main">
   <div class="top-row px-4">
      <a>@today.ToString("dddd, dd MMMM yyyy")</a>
   </div>
<div class="content px-4">
      @Body
   </div>
</div>
@code {
   DateTime today = DateTime.Today;
}

Layout Bersarang

Komponen layout juga dapat disarangkan. Komponen halaman dapat mengacu ke suatu layout, yang pada gilirannya layout tersebut mengacu layout lain. Misalnya, komponen Index.razor mengacu ke layout Greeting.razor yang mengacu ke layout MainLayout.razor. Layout Greeting.razor menampilkan salam di bagian atas konten halaman, di dalam layout MainLayout.razor. Berikut langkah-langkahnya.

• Buat file layout bernama Greeting.razordi folder Shared.
• Copy kode berikut, lalu paste ke file Greeting.razor.

Greeting.razor

@layout MainLayout               @* references MainLayout.razor *@
@inherits LayoutComponentBase
<h5>Good @time!</h5>
<br />
@Body
@code {
   private string time;
   protected override void OnInitialized()
   {
      int hour = DateTime.Now.Hour;
      if (hour < 5 && hour > 17)
         time = "Evening";
      else if (hour < 12)
         time = "Morning";
      else
         time = "Afternoon";
   }
}

• Tambahkan kode berikut ke dalam file Index.razor sehingga isinya sebagai berikut.

@page "/"
@layout GreetingLayout        @* references GreetingLayout.razor *@
<h1>Hello, world!</h1>
Welcome to your new app.

• Saat dijalankan, komponen Index.razor menerapkan layout bersarang dan menampilkan homepage berikut.

Layout — seperti komponen lain — dapat menggunakan data binding, dependency injection, dan menyarangkan komponen lain. Kedua layout di atas, MainLayout.razor yang dimodifikasi dan Greeting.razor, menggunakan data binding satu arah.

Data Binding Satu Arah dan Event Binding pada ASP NET Core Blazor

Referensi

ASP.NET Core Blazor layouts