1. Pendahuluan
Setiap situs web yang terdiri dari beberapa halaman memerlukan semacam antarmuka pengguna navigasi, yang dibuat dalam dua langkah. Pertama, struktur logis situs harus ditentukan; kemudian, elemen antarmuka pengguna ditambahkan untuk memungkinkan pengguna berpindah bolak-balik antara berbagai bagian struktur situs. Sebelum ASP.NET 2.0, pengembang diharuskan untuk menyelesaikan sendiri kedua masalah ini. Namun, pada versi 2.0, ASP.NET menyediakan cara sederhana untuk menentukan struktur situs dan mencakup sejumlah kontrol Web - yang dirancang khusus untuk menampilkan antarmuka pengguna navigasi situs.
Pada artikel sebelumnya, kita menganalisis cara membuat file peta situs XML Web.sitemap melalui navigasi Kontrol web dan cara menampilkan informasi navigasi situs, yang meliputi:
·SiteMapPath, yang menampilkan remah roti (Beranda＞Elektronik＞XBOX)
·TreeView, yang Menampilkan pohon yang ditampilkan secara vertikal dan dapat dilipat, digunakan untuk menampilkan seluruh hierarki peta situs
. Menu, yang menampilkan menu yang disejajarkan secara horizontal atau vertikal.
Artikel sebelumnya hanya menyediakan fungsi dan kemampuan untuk file peta situs dan kontrol Web navigasi . Di bagian ini, kita akan mengalihkan perhatian kita ke pengontrolan informasi peta situs secara terprogram dan memeriksa kontrol Web navigasi SiteMapPath secara mendetail.
2. Peta Situs
Contoh dalam artikel ini menggunakan peta situs yang dibuat di Bagian Satu. Anda dapat melihat sintaks sebenarnya dari file XML peta situs di Bagian 1 atau mengunduhnya di akhir artikel ini. Representasi grafis dari struktur situs yang digunakan dalam contoh ini ditunjukkan di bawah ini:
3. Peta situs yang dikontrol secara terprogram
Peta situs adalah kumpulan node peta situs terkait. Biasanya, setiap node peta situs berisi judul, URL, dan deskripsi. Gambar yang ditunjukkan di atas adalah contoh peta situs, di mana setiap persegi panjang mewakili node peta situs. ASP.NET tidak memerlukan format khusus untuk menentukan peta situs, meskipun ASP.NET menyediakan opsi default untuk menggunakan file berformat XML. (Lihat Bagian 1 untuk rincian tentang file XML.)
ASP.NET menyediakan kelas yang disebut SiteMap - yang menyediakan akses terprogram hanya-baca ke peta situs. Kelas ini digunakan secara internal oleh dua kontrol, yang akan kita analisis nanti di artikel ini:
SiteMapPath - Menghasilkan remah roti berdasarkan lokasi halaman yang dikunjungi dan struktur situsnya. Secara khusus, SiteMapPath dimulai pada node yang dikembalikan oleh properti SiteMap.CurrentNode dan melintasi hierarki hingga ke akar.
· SiteMapDataSource - Kontrol ini membuat sumber data hierarki - memetakan struktur peta situs. Untuk menampilkan informasi peta situs di kontrol Web lain, seperti TreeView atau Menu, kontrol Web tidak menanyakan peta situs secara langsung; melainkan mengikat ke kontrol SiteMapDataSource - yang bertanggung jawab untuk membaca struktur peta situs.
Kelas SiteMap memiliki dua properti: RootNode dan CurrentNode. Kedua properti mengembalikan instance SiteMapNode. Kelas SiteMapNode mewakili node yang ditentukan dalam peta situs dan memiliki properti yang mendeskripsikan node - Judul, Url, dan Deskripsi, serta properti yang mengontrol hierarki secara terprogram - ParentNode, ChildNodes, NextSibling, PreviousSibling, dan seterusnya.
Anda dapat menggunakan kelas SiteMap di halaman ASP.NET Anda sendiri. Misalnya, kita dapat menampilkan link Berikutnya, Sebelumnya, dan Atas di setiap halaman - hanya dengan menambahkan tiga kontrol HyperLink ke halaman utama situs, ditambah sedikit pemrograman untuk memeriksa apakah CurrentNode memiliki NextSibling, PreviousSibling, atau ParentNode. Secara khusus, Anda akan menambahkan markup berikut ke halaman utama Anda:
[<asp:HyperLink ID="lnkPrev" runat="server">Prev</asp:HyperLink>] |
[<asp:HyperLink ID="lnkUp" runat="server">Naik</asp:HyperLink>] |
[<asp:HyperLink ID="lnkNext" runat="server">Next</asp:HyperLink>]
Event handler Page_Load pada halaman utama terlihat sebagai berikut:
If SiteMap.CurrentNode IsNot Nothing Then
'Setel tautan berikutnya/sebelumnya/atasJika SiteMap.CurrentNode.PreviousSibling IsNot Nothing Then
lnkPrev.NavigateUrl = Peta Situs.CurrentNode.PreviousSibling.Url
lnkPrev.Text = "< Sebelumnya (" & SiteMap.CurrentNode.PreviousSibling.Title & ")"
Kalau tidak
lnkPrev.NavigateUrl = String.Kosong
lnkPrev.Teks = "< Sebelumnya"
Akhiri Jika
Jika SiteMap.CurrentNode.ParentNode Bukan Apa-apa, Maka
lnkUp.NavigateUrl = Peta Situs.CurrentNode.ParentNode.Url
lnkUp.Text = "Naik (" & SiteMap.CurrentNode.ParentNode.Title & ")"
Kalau tidak
lnkUp.NavigateUrl = String.Kosong
lnkUp.Text = "Naik"
Akhiri Jika
Jika SiteMap.CurrentNode.NextSibling Bukan Apa-apa, Maka
lnkNext.NavigateUrl = Peta Situs.CurrentNode.NextSibling.Url
lnkNext.Text = "(" & SiteMap.CurrentNode.NextSibling.Title & ") Selanjutnya >"
Kalau tidak
lnkNext.NavigateUrl = String.Kosong
lnkNext.Text = "Berikutnya >"
Akhiri Jika
Akhir Jika
Ini akan menambahkan tiga hyperlink Berikutnya, Atas dan Sebelumnya ke setiap halaman yang mewarisi dari halaman utama, lihat cuplikan di bawah.
4. Gunakan kontrol SiteMapPath untuk menampilkan remah roti.
Kontrol SiteMapPath menampilkan remah roti - digunakan untuk menunjukkan kepada pengguna di mana mereka berada dalam struktur situs. Output dari kontrol SiteMapPath ditentukan oleh tiga faktor berikut:
· struktur situs, seperti yang didefinisikan oleh peta situs,
· halaman yang dikunjungi, dan
· nilai properti dari kontrol SiteMapPath
Ketika halaman dengan Ketika kontrol SiteMapPath diakses, kontrol SiteMapPath mencoba mengonversi URL halaman ke nilai url dari node peta situs yang ditentukan dalam peta situs. Jika kecocokan ditemukan, kontrol akan melintasi struktur hingga ke akar dan menghasilkan output berikut: RootNode>ParentNode>...>ParentNode>CurrentNode. CurrentNode di sini adalah judul node peta situs - digunakan untuk memetakan URL permintaan halaman saat ini; RootNode dan ParentNodes dihasilkan sebagai hyperlink jika node peta situs memiliki nilai URL yang ditentukan dalam peta situs. Kontrol SiteMapPath di halaman "Buku Riwayat" (Buku/History.aspx) akan menghasilkan Beranda>Buku>Sejarah, dan juga menghasilkan Beranda dan Buku dalam bentuk hyperlink, menunjuk kembali ke Default.aspx dan Books/Default.aspx masing-masing . Saat mengakses Buku/Default.aspx, SiteMapPath menghasilkan Beranda>Buku.
Untuk lebih jelasnya, keluaran SiteMapPath bergantung pada peta situs itu sendiri dan laman yang dikunjungi. Output dari SiteMapPath dapat dikustomisasi melalui properti kontrol ini. Ada beberapa properti dalam format kontrol Web standar - BackColor, Font, ForeColor, dan sebagainya - dan ada beberapa pengaturan khusus untuk SiteMapPath, termasuk:
u PathDirection - dapat mengambil salah satu dari dua nilai, RootToCurrent (default) atau CurrentToRoot. Jika nilainya adalah RootToCurrent, runut tautan pada halaman "Buku Sejarah" dihasilkan sebagai Beranda>Buku>Sejarah; jika nilainya adalah CurrentToRoot, outputnya adalah Riwayat>Buku>Beranda.
·PathSeparator - menentukan string yang digunakan untuk memisahkan tiap node dalam breadcrumb; defaultnya adalah >
·RenderCurrentNodeAsLink - atribut Boolean - ini menentukan apakah CurrentNode harus dibuat sebagai link;
·ParentLevelsDisplayed - nilai integer - dapat digunakan untuk membatasi ketinggian struktur pohon yang ditampilkan oleh remah roti. Secara default, nilai atribut ini adalah -1, yang berarti tidak ada batasan; menyetel nilainya ke 1 akan menghasilkan Breadcrumb Books>History pada halaman "History Books". Root tidak disertakan karena kontrol SiteMapPath hanya melintasi hingga satu induk - dari "Riwayat" ke "Buku".
· ShowToolTips - Jika node peta situs memiliki nilai deskripsi, maka deskripsi tersebut ditampilkan sebagai teks tooltip untuk setiap node remah roti jika properti ini disetel ke True (default).
Ada juga properti gaya yang dapat digunakan untuk mengatur BackColor, Font, ForeColor, dll. - untuk berbagai bagian kontrol SiteMapPath. Anda dapat menggunakan properti NodeStyle untuk menyesuaikan tampilan node di runut tautan; Anda dapat menggunakan RootNodeStyle dan CurrentNodeStyle untuk menyesuaikan lebih lanjut node pertama dan terakhir di runut tautan. Secara umum, cara termudah dan paling estetis untuk memformat kontrol SiteMapPath adalah dengan menggunakan wizard "Format Otomatis" - ini dapat diaktifkan melalui tag sensitif kontrol.
5. Sesuaikan keluaran yang dihasilkan dengan templat
SiteMapPath berisi empat templat - templat ini memungkinkan penyesuaian lebih lanjut terhadap keluaran yang dihasilkan. Templat memungkinkan Anda menggabungkan markup HTML statis, kontrol Web, dan sintaksis pengikatan data; jika Anda pernah menggunakan kontrol DataList atau Repeater sebelumnya, Anda sudah familiar dengan templat. Templat di ASP.NET 2.0 pada dasarnya sama dengan ASP.NET 1.x, kecuali ASP.NET 2.0 memperkenalkan beberapa sintaks baru yang lebih ringkas untuk ekspresi pengikatan data. Misalnya, di ASP.NET 1.x, Anda harus menggunakan sintaks <%# DataBinder.Eval(Container.DataItem, PropertyName) %> untuk mendapatkan nilai kolom. Di ASP.NET 2.0, sintaks lama ini masih dapat digunakan, tetapi Anda dapat menggunakan versi yang lebih pendek secara opsional <%# Eval(PropertyName) %>.
Secara default, SiteMapPath menghasilkan node akar dan induk sebagai hyperlink biasa sehingga ketika pengguna mengklik link tersebut, mereka dapat dengan cepat berpindah kembali ke atas pohon hierarki kontrol. Namun, Anda mungkin ingin melakukan pemrosesan di sisi server sebelum mengirim informasi kembali ke pengguna - mungkin Anda ingin mencatat tujuan pengguna atau secara otomatis menyimpan perubahan apa pun yang mereka buat pada halaman. Hal ini dapat dicapai dengan menggunakan template dan menghasilkan node sebagai LinkButton.
Misalnya, jika Anda hanya ingin membuat simpul akar SiteMapPath sebagai LinkButton, Anda dapat menggunakan tag berikut untuk menambahkan <RootNodeTemplate> ke kontrol SiteMapPath:
<asp:SiteMapPath ID="SiteMapPath1" runat="server" ＞
＜Templat RootNode＞
<asp:LinkButton ID="LinkButton1" runat="server"
Teks='＜%# Eval("judul") %＞'
Argumen Perintah='＜%# Eval("url") %＞'
PadaCommand="LinkButton1_Command">
＜/asp:Tombol Tautan＞
＜/RootNodeTemplat＞
</asp:SiteMapPath>
Tag ini menambahkan kontrol LinkButton ke SiteMapPath - properti Teksnya ditugaskan ke properti Judul dari SiteMapNode yang sesuai. Ketika LinkButton diklik, postback terjadi dan event Command kontrol diaktifkan - ini mengaktifkan event handler LinkButton1_Command. Properti Url SiteMapNode diteruskan ke pengendali kejadian ini melalui properti CommandArgument. Dalam pengendali kejadian ini, Anda dapat melakukan pemrosesan sisi server apa pun yang diperlukan, lalu mengarahkan pengguna ke halaman yang mereka minta melalui Response.Redirect(e.CommandArgument).
