Proyek Blazor Server #4

Memahami perutean dan navigasi URL

Published in

Telematika

5 min readNov 25, 2020

Blazor Server dan Blazor WebAssembly mendukung perutean URL sehingga pengguna dapat menavigasi untuk memilih komponen yang akan ditampilkan di layar. Perutean URL memungkinkan Anda mengonfigurasi aplikasi untuk menerima permintaan URL yang tidak memetakan ke file fisik tetapi menggunakan rute yang bermakna secara semantik.

URL itu apa? URL adalah singkatan dari Uniform Resource Locator. URL tidak lebih dari alamat sumber daya unik yang diberikan di Web. Secara teori, setiap URL yang valid mengarah ke sumber daya unik. Sumber daya tersebut dapat berupa halaman HTML, dokumen CSS, gambar, dll. (Terjemahan dari Https://developer.mozilla.org/en-US/docs/Learn /Common_questions /What_is_a_URL)

Artikel ini membahas bagaimana:
• mendefinisikan rute
• menavigasi berbagai komponen
• menggunakan parameter dalam rute
• membuat navigasi dinamis

Semua ulasan berikut berdasarkan pada aplikasi yang dibangun di artikel sebelumnya, Proyek Server Blazor #3. Silakan unduh kode sumbernya di sini.

Proyek Blazor Server #3

Implementasi checkbox list pada operasi CRUD melibatkan M:N relationship menggunakan Dapper

medium.com

Template Rute

Saat Anda membuat proyek Blazor Server, router secara otomatis terinstal. Komponen Router, yaitu file App.razor, memiliki dua template.

App.razor

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

Kedua template menggunakan elemen @Body dalam komponen MainLayout.razor.

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>

Di dalam template Found, komponen RouteView bertanggung jawab untuk menampilkan komponen yang cocok dengan rute saat ini. Misalnya, rute saat ini, /editPublisher, cocok dengan komponen editPublisher.razor. Komponen RouteView dalam template Found menggunakan elemen @Body dalam komponen MainLayout.razor untuk menentukan lokasi di dalam layout (tata letak) di mana konten akan ditampilkan. Lihat gambar berikut.

**Gambar 1** Contoh penggunaan template `Found`

Template NotFound menampilkan pesan bila tidak ada komponen yang ditemukan untuk rute saat ini. Gambar berikut menunjukkannya.

**Gambar 2** Contoh penggunaan template `NotFound`

Komponen NavMenu

Buka solution explorer BookApp. KomponenNavMenu.razor ada di dalam folder Shared, berisi tautan untuk menavigasi komponen.

Mendefinisikan Rute

Setiap komponen halaman harus memiliki setidaknya satu rute, sehingga pengguna dapat menavigasi untuk memilih komponen yang akan ditampilkan di layar. Gunakan directive @page untuk mendefinisikannya. Berikut adalah contoh pendefinisian /listPublisher sebagai rute untuk komponen ListPublisher.razor.

Rute Komponen Default

Buka aplikasi BookApp.
Aplikasi menampilkan komponen Index.razor sebagai homepage yang rutenya adalah /.

Rute / adalah titik awal aplikasi Blazor apa pun. Segera setelah aplikasi dimulai, komponen halaman dengan rute / ditampilkan sebagai homepage.

Navigasi Komponen

Ada empat pilihan untuk menavigasi komponen.
(1) menggunakan teks URL
(2) menggunakan komponen NavLink
(3) menggunakan elemen anchor baku
(4) menggunakan metode NavigateTo.

(1) Navigasi menggunakan teks URL

Buka aplikasi BookApp .
Ketikkan teks URL di bilah alamat, misalnya, localhost:44333/addBookuntuk menampilkan halaman penambahan data buku baru.

**Gambar 7** Contoh navigasi menggunakan teks URL

(2) Navigasi menggunakan komponen NavLink

Alih-alih mengetik URL, lebih mudah menggunakan komponen NavLink di dalam NavMenu.razor.

Menampilkan Daftar Buku

Klik menu Books untuk menampilkan daftar buku.
Gambar di bawah menunjukkan navigasi menggunakan komponen NavLink dan rutenya.

**Gambar 8** Contoh navigasi menggunakan komponen NavLink

(3) Navigasi menggunakan anchor

Menampilkan halaman untuk mengedit data buku

Di halaman daftar buku, klik tombol Edit.
Gambar berikut menunjukkan navigasi menggunakan anchor,
href='/editBook/@book.ISBN'yang merender komponen EditBook.razor.

**Gambar 9** Contoh navigasi menggunakan anchor dan rute berparameter

(4) Navigasi menggunakan metode NavigateTo

Kembali ke halaman booklist dari halaman edit buku (EditBook.razor)

Ketika pengguna mengklik tombol Cancel di halaman Edit Book, aplikasi memanggil metode Cancel()di baris 154 dalam file EditBook.razor dan menjalankan statement:
navigationManager.NavigateTo("/listBook")
File EditBook.razor memerlukan sebuah instance dari kelas NavigationManager melalui injeksi pada baris 5.

**Gambar 10** Contoh navigasi menggunakan metode `NavigateTo`

Rute Berparameter

Anda bisa meneruskan parameter dalam rute untuk menampilkan komponen halaman dengan data berbeda secara dinamis. Misalnya, pengguna perlu mengedit data buku. Pertanyaannya adalah, buku yang mana? Dalam hal ini harus berdasarkan pada nilai kunci utama ISBN. Anda harus mendefinisikan rute dengan parameter isbn di baris pertama dalam file komponen EditBook.razor.

@page "/ editBook / {isbn: long}"

Itu isbnadalah parameter formal, tipenya long. Selanjutnya, buat properti di bagian @code dengan pernyataan berikut.

[Parameter] public long isbn {get; set; }

Isi file EditBook.razor adalah sebagai berikut.

**Gambar 11** Contoh navigasi menggunakan rute berparameter

Perhatikan bagian @code. Semua metode menggunakan parameter isbn, kecuali Cancel().

Lihat Gambar 9. Ketika pengguna mengklik tombol Edit pada daftar buku, anchor href = '/editBook/@book.ISBN' di baris 103 di ListBook.razor menavigasi ke komponen EditBook.razor. Nilai parameter aktual @book.ISBN adalah nilai ISBN dari buku terpilih, yaitu 9780134802749. Jadi rutenya adalah /editBook/9780134802749.

Tipe Data Parameter

Tipe data default sebuah parameter adalah string. Jika Anda menggunakan yang lain, Anda harus menulis tipe datanya secara eksplisit. Lihat tabel berikut.

Tipe Data          Contoh
bool               {isActive:bool}}
datetime           {dob:datetime}
decimal            {gpa:decimal}
double             {height:double}
float              {weight:float}
guid               {id:guid}
int                {id:int}
long               {isbn:long}

Navigasi Dinamis

Mari kita lihat gambar di bawah ini.

Gambar 12 Contoh mengubah rute secara dinamis

Anda dapat menavigasi ke komponen AddPublisher.razormelalui salah satu dari dua komponen, EditBook.razoratau ListPublisher.razor. Saat Anda mengklik tombol Save atau Cancel, aplikasi harus dapat kembali ke komponen sebelumnya, EditBook.razoratau ListPublisher.razor.

Rute komponen AddPublisher.razor adalah /addPublisher/{isbnDummy:long}. Komponen membutuhkan parameter {isbnDummy:long} untuk menangani kedua kondisi tersebut.

if (isbnDummy > 0)
   navigationManager.NavigateTo("/editBook/" + isbnDummy);
else
   navigationManager.NavigateTo("/listPublisher");

Ketika pengguna mengklik tombol Add publisher pada komponen EditBook.razor, jangkar berikut

href='/addPublisher/@book.ISBN'

pada baris 92 menavigasi ke komponen AddPublisher.razor dengan nilai @book.ISBN> 0. Jadi, ketika pengguna mengklik tombol Save atau Cancel, navigasi kembali ke komponen EditBook.razor.

Saat pengguna mengklik Add new publishertombol pada komponen ListPublisher.razor, jangkar berikut:

href='/addPublisher/0

pada baris 26 menavigasi ke komponen AddPublisher.razor dengan nilai parameter nol. Jadi, ketika pengguna mengklik tombol Saveatau Cancel, navigasi kembali ke komponen ListPublisher.razor.

Pada tulisan berikutnya akan dibahas bagaimana membuat dan menggunakan layout halaman.

Proyek Blazor Server #5

Membuat dan menggunakan layout halaman