Proyek Blazor Server #4
Memahami perutean dan navigasi URL
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.
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.
Template NotFound
menampilkan pesan bila tidak ada komponen yang ditemukan untuk rute saat ini. Gambar berikut menunjukkannya.
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/addBook
untuk menampilkan halaman penambahan data buku baru.
(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.
(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 komponenEditBook.razor
.
(4) Navigasi menggunakan metode NavigateTo
Kembali ke halaman booklist dari halaman edit buku (EditBook.razor
)
- Ketika pengguna mengklik tombol
Cancel
di halamanEdit Book
, aplikasi memanggil metodeCancel()
di baris 154 dalam fileEditBook.razor
dan menjalankan statement:navigationManager.NavigateTo("/listBook")
- File
EditBook.razor
memerlukan sebuah instance dari kelas NavigationManager melalui injeksi pada baris 5.
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 isbn
adalah 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.
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.
Anda dapat menavigasi ke komponen AddPublisher.razor
melalui salah satu dari dua komponen, EditBook.razor
atau ListPublisher.razor
. Saat Anda mengklik tombol Save
atau Cancel
, aplikasi harus dapat kembali ke komponen sebelumnya, EditBook.razor
atau 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 publisher
tombol 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 Save
atau Cancel
, navigasi kembali ke komponen ListPublisher.razor
.
Pada tulisan berikutnya akan dibahas bagaimana membuat dan menggunakan layout halaman.