SlidingDoors
1.0.0
Tujuan dari artikel ini adalah untuk membuat menu yang terlihat licin dan mudah digunakan untuk situs web yang diaktifkan ASP.NET. Untuk mencapai ini, kami akan menggunakan fungsionalitas standar kontrol web ASP.NET dan meningkatkan tampilan murni dengan menggunakan Cascading Style Sheets (CSS).
Bagi Anda yang akrab dengan CSS judul artikel ini pasti akan membunyikan bel. CSS yang digunakan untuk meningkatkan tampilan dan nuansa kontrol menu ASP.NET dikurangi dalam artikel yang diketahui secara luas pada daftar terpisah, berjudul "Pintu Geser CSS".
CSS yang digunakan untuk meningkatkan tampilan dan nuansa menu dijelaskan secara menyeluruh dalam artikel pada daftar terpisah. Kredit saat kredit jatuh tempo. Terima kasih Douglas Bowman karena telah memasok kami dengan CSS. Pastikan untuk membaca artikelnya terlebih dahulu jika Anda tidak terbiasa dengannya.
Fokus artikel ini adalah cara mensimulasikan menu seperti itu di lingkungan ASP.NET. Mari kita mulai ...
Mari kita nyalakan Visual Studio 2008 dan buat proyek baru menggunakan Template Proyek Aplikasi Web ASP.NET. Template ini akan secara otomatis menambahkan formulir web default dengan tepat bernama "default.aspx". Buka di editor dan tambahkan kontrol menu dari kotak alat yang dapat Anda temukan di bawah tab Navigasi. Jika Anda menjalankan situs web sekarang Anda akan berakhir menatap halaman kosong. Agar menu dapat menampilkan apa pun, pertama -tama harus terikat pada beberapa data.
Cara termudah untuk mendefinisikan data agar kontrol menu dapat digunakan dan memungkinkan pengunjung menavigasi melalui situs web adalah dengan mengikatnya ke peta situs. Tambahkan item peta situs baru ke proyek menggunakan nama yang diusulkan dari "Web.Sitemap". Peta situs adalah file XML yang mengatur halaman situs secara hierarkis. Keuntungan tambahan adalah bahwa secara otomatis dirujuk oleh kontrol SitemapDataSource.
Selanjutnya tambahkan beberapa halaman ke sitemap seperti yang ditampilkan dalam daftar di bawah ini.
Listing 1 - Web.sitemap
<? xml version = " 1.0 " encoding = " utf-8 " ?>
< siteMap xmlns = " http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 " >
< siteMapNode url = " " title = " " description = " " >
< siteMapNode url = " Default.aspx " title = " Home " description = " Take me back to the dasboard " />
< siteMapNode url = " Products.aspx " title = " Products " description = " Browse our catalog " />
< siteMapNode url = " Download.aspx " title = " Download " description = " Download neat stuff " />
< siteMapNode url = " Forum.aspx " title = " Forum " description = " Ask questions on our forum " />
< siteMapNode url = " Contact.aspx " title = " Contact " description = " Contact us " />
</ siteMapNode >
</ siteMap >Sekarang tambahkan kontrol SitemapDataSource ke halaman dan atur properti DataSourceID dari kontrol menu ke ID sumber data. Juga atur properti orientasi dari kontrol menu ke horizontal karena default ke vertikal. Terakhir, atur properti showstartNode dari sitemapDataSource menjadi false. Jika Anda tidak melakukan ini hanya, node root akan ditampilkan dan kami tidak ingin menyertakan node dasar ini di menu. Kode Anda sekarang harus menyerupai kode yang ditampilkan di Listing 2.
Listing 2 - Default.aspx
< asp:Menu
ID =" Menu1 "
runat =" server "
DataSourceID =" SitemapDataSource1 "
Orientation =" Horizontal "
> </ asp:Menu >
< asp:SiteMapDataSource
ID =" SiteMapDataSource1 "
runat =" server "
ShowStartingNode =" False "
/>Jika Anda melihat halaman di browser sekarang Anda akan melihat menu fungsional, namun membosankan.
Gambar 1 - Menu horizontal polos
Sebelum kita dapat mulai menerapkan CSS ke menu, ada masalah lain yang perlu ditangani terlebih dahulu. Jika Anda melihat kode HTML yang dihasilkan yang dihasilkan ketika Anda meminta halaman default.aspx, Anda akan melihat bahwa kontrol menu tidak menghasilkan kode HTML yang paling fleksibel. Secara default itu membungkus setiap item menu dalam tabel. Ini tidak meminjamkan dirinya untuk dengan mudah menerapkan CSS. Akan lebih baik jika kontrol menu menghasilkan daftar unordererd yang berisi semua item menu.
Untungnya HTML yang dihasilkan dapat disesuaikan dengan menggunakan adaptor kontrol. Kontrol adaptor memungkinkan Anda untuk membuat HTML yang Anda sukai. Untungnya adaptor kontrol tersebut sudah tersedia di Codeplex. Kit Adapter Kontrol CSS Friendly menyediakan adaptor kontrol yang sudah dibangun, termasuk satu untuk kontrol menu ASP.NET.
Untuk menggunakan adaptor kontrol ramah CSS mengikuti langkah -langkah ini:
Penting untuk menggunakan kode sumber dan menyusun perakitan CSSFriendly.dll sendiri karena kita perlu mengubah beberapa CSS yang digunakan oleh adaptor di kemudian hari dalam artikel ini.
Saat menambahkan proyek CSSFriendly ke solusi Anda, Wisaya Konversi Visual Studio akan muncul. Jalankan saja konversi, semuanya harus berjalan dengan lancar. Ketika konversi telah menyelesaikan semua yang tersisa adalah menambahkan referensi ke proyek CSSFriendly dari proyek situs web ASP.NET.
Cukup jalankan situs web dan lihat kode HTML yang dihasilkan sekarang.
Listing 3 - Kode HTML CSS Friendly
< div class =" AspNet-Menu-Horizontal " id =" Menu1 " >
< ul class =" AspNet-Menu " >
< li class =" AspNet-Menu-Leaf AspNet-Menu-Selected " >
< a
href =" /Default.aspx "
class =" AspNet-Menu-Link AspNet-Menu-Selected "
title =" Take me back to the dasboard "
> Home </ a
>
</ li >
< li class =" AspNet-Menu-Leaf " >
< a
href =" /Products.aspx "
class =" AspNet-Menu-Link "
title =" Browse our catalog "
> Products </ a
>
</ li >
< li class =" AspNet-Menu-Leaf " >
< a
href =" /Download.aspx "
class =" AspNet-Menu-Link "
title =" Download neat stuff "
> Download </ a
>
</ li >
< li class =" AspNet-Menu-Leaf " >
< a
href =" /Forum.aspx "
class =" AspNet-Menu-Link "
title =" Ask questions on our forum "
> Forum </ a
>
</ li >
< li class =" AspNet-Menu-Leaf " >
< a href =" /Contact.aspx " class =" AspNet-Menu-Link " title =" Contact us "
> Contact </ a
>
</ li >
</ ul >
</ div >Segalanya mencari sekarang.
Komentar : File CSSFriendlyAdapters.Browser memungkinkan Anda untuk menentukan adaptor kontrol ramah CSS mana yang harus digunakan. Saya membuat habbit mengomentari semua adaptor kecuali yang ingin saya gunakan. Dengan cara ini tidak ada kontrol lain yang "diadaptasi" dan mereka akan terus menghasilkan HTML default.
Seperti yang dapat Anda lihat dari kode yang ditampilkan dalam daftar di atas adaptor untuk kontrol menu secara otomatis menyuntikkan kelas CSS yang diperlukan untuk tag <ul> , <li> dan <a> . Ini menghemat masalah kita dari keharusan mendefinisikan ini.
Juga cukup umum bagi satu halaman untuk berisi lebih dari satu kontrol adaptor tunggal seperti menu. Jika Anda ingin tampilan dan nuansa yang berbeda untuk setiap kontrol, atur CSSSelectorClass untuk kontrol yang diadaptasi. Misalnya, Anda dapat menetapkan nilai properti CSSSelectorClass sebagai berikut:
Listing 4 - Properti CSSSelectorClass
< asp:Menu
ID =" Menu1 "
runat =" server "
DataSourceID =" SitemapDataSource1 "
Orientation =" Horizontal "
CssSelectorClass =" PrettyMenu "
> </ asp:Menu > Hasilnya adalah bahwa kode HTML yang dihasilkan oleh kontrol yang diadaptasi akan terkandung dalam lapisan baru ( <div> ).
Listing 5 - Membungkus kode HTML yang dihasilkan
< div class =" PrettyMenu " id =" Menu1 " >
<!-- Other HTML code -->
</ div >Perhatikan bahwa properti ini khusus untuk adaptor ramah CSS. Ini adalah atribut khusus (Expando) yang dapat Anda tetapkan untuk kontrol yang didukung oleh perpustakaan ini. Anda memerlukan lebih banyak informasi tentang cara kerja adaptor yang ramah, lalu berkonsultasi dengan tautan berikut:
Dengan CSSSelectorClass yang menghasilkan lapisan terpisah ( <div> ) di sekitar menu dan kelas CSS yang disuntikkan secara otomatis di tempat kami akhirnya siap untuk memulai menata menu.
CSS yang digunakan adalah simular untuk artikel A Daftar APART. Seperti yang disebutkan sebelum fokus artikel ini bukan pada struktur CSS tetapi lebih pada cara menerapkannya pada kontrol menu ASP.NET untuk mendapatkan menu tabel yang tampak rapi. Hasil jadi dapat dilihat pada Gambar 2.
Gambar 2 - Hasil jadi
Pada halaman unduhan Anda dapat menemukan kode sumber untuk artikel ini. Ini berisi lembar gaya dan gambar yang diperlukan. Cukup lakukan langkah -langkah berikut untuk menciptakan kembali hasil yang sudah jadi:
<Pages> ke default. (Lihat Listing 6)Listing 6 - Web.config Kutipan
< system .web>
<!-- ... -->
< pages theme = " Default " >
<!-- ... -->
</ pages >
<!-- ... -->
</ system .web>CSS yang digunakan dalam solusi saya simular untuk artikel pada daftar terpisah, tetapi ada beberapa perubahan. Terutama perubahan yang berkorelasi dengan struktur CSS yang diterapkan oleh adaptor ramah CSS.
Untuk menerapkan CSS, struktur yang benar perlu digunakan. Saat menata kontrol yang HTML disesuaikan dengan adaptor yang ramah saya merasa berguna untuk menggunakan diagram yang disebutkan dalam kertas putih. Diagram ini jelas menunjukkan kepada Anda bagaimana CSS disusun.
Anda dapat menemukan diagram untuk kontrol menu di sini.
Satu pertanyaan yang sering saya lakukan di banyak forum adalah bagaimana menerapkan menu sub horizontal yang berubah ketika pengguna memilih tab yang berbeda dari menu tingkat atas. Untuk membuat ini, pertama -tama kita harus menyesuaikan peta situs kami.
Listing 7 menunjukkan peta situs yang disesuaikan.
Listing 7 - Web.sitemap dengan "Sub Menu Items"
<? xml version = " 1.0 " encoding = " utf-8 " ?>
< siteMap xmlns = " http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 " >
< siteMapNode url = " " title = " " description = " " >
< siteMapNode url = " Default.aspx " title = " Home " description = " Take me back to the dasboard " >
< siteMapNode url = " About.aspx " title = " About us " description = " " />
< siteMapNode url = " Foo.aspx " title = " Foo " description = " " />
< siteMapNode url = " Bar.aspx " title = " Bar " description = " " />
</ siteMapNode >
<!-- ... -->
</ siteMap >Demi Sake Sake 7 hanya menampilkan item sub menu (node) untuk node home. Lihatlah Web.sitemap di kode sumber untuk versi lengkap. Sekarang ketika Anda menelusuri situs web menggunakan peta situs ini, Anda akan melihat efek yang ditunjukkan pada Gambar 3.
Gambar 3 - Item sub menu
Untuk menonaktifkan efek ini, atur properti MaximumDynamicDisplayLevels dari kontrol menu menjadi nol seperti yang ditunjukkan pada Listing 8.
Listing 8 - properti MaximumynamicDisplayLevels
< asp:Menu
ID =" Menu1 "
runat =" server "
DataSourceID =" SitemapDataSource1 "
Orientation =" Horizontal "
CssSelectorClass =" PrettyMenu "
MaximumDynamicDisplayLevels =" 0 "
> </ asp:Menu >Selanjutnya tambahkan menu kedua dan kontrol SitemapDataSource dan atur propertinya seperti yang ditunjukkan pada Listing 9.
Listing 9 - Sub Menu Control
< asp:Menu
ID =" Menu1 "
runat =" server "
DataSourceID =" SitemapDataSource1 "
Orientation =" Horizontal "
CssSelectorClass =" PrettyMenu "
MaximumDynamicDisplayLevels =" 0 "
>
</ asp:Menu >
< asp:Menu
ID =" Menu2 "
runat =" server "
DataSourceID =" SitemapDataSource2 "
Orientation =" Horizontal "
CssSelectorClass =" PrettySubMenu "
>
</ asp:Menu >
< asp:SiteMapDataSource
ID =" SiteMapDataSource1 "
runat =" server "
ShowStartingNode =" False "
/>
< asp:SiteMapDataSource
ID =" SiteMapDataSource2 "
runat =" server "
StartingNodeOffset =" 1 "
ShowStartingNode =" False "
/>Kami pada dasarnya memberi tahu menu kedua bahwa itu harus menampilkan tingkat kedua dari node yang ditemukan di peta situs dan tidak boleh menampilkan node awal yang sesuai dengan tab yang dipilih dari menu pertama.
Juga CSSSelectorClass untuk menu kedua diatur ke Prettysubmenu. CSS untuk menu ini simular ke menu pertama. Unduh kode sumber jika Anda ingin memeriksanya. Menjalankan situs web sekarang akan memberi Anda hasil yang nyaman ini.
Gambar 4 - Item sub menu bergaya
Satu masalah terakhir perlu diselesaikan. Untuk mengilustrasikan masalah ini, proyek perlu direorganisasi.
Pertama mari kita tambahkan halaman master ke proyek yang disebut Site.master. Pindahkan kode, menu dan sumber data, dari halaman default.aspx ke halaman master dan letakkan tepat sebelum pemegang tempat konten pertama di dalam tubuh. Setelah itu Anda dapat menghapus halaman default.aspx dengan aman.
Sekarang mari kita tambahkan beberapa item formulir konten web ke proyek. Tambahkan formulir konten web yang sesuai dengan item dari simpul pertama peta situs dan sub node, yaitu:
Pastikan untuk memilih situs.master sebagai halaman master untuk masing -masing formulir konten web ini. Halaman -halaman lain yang disebutkan di web. Sitemap murni ada untuk tujuan ilustrasi.
Luncurkan situs lagi, dan arahkan ke halaman Foo. Ini akan mengungkapkan masalah ini.
Gambar 5 - Masalah Seleksi
Karena kami telah menavigasi ke level bawah di peta situs, menu level atas tidak tahu item menu mana yang harus ditandai seperti yang dipilih. Kita perlu melakukan beberapa pengkodean dalam kode halaman master di belakang untuk menyelesaikannya.
Listing 10 menunjukkan kepada Anda potongan kode yang diperlukan.
Listing 10 - Memilih item menu tingkat atas yang benar
namespace MenuWebApplication
{
public partial class Site : System . Web . UI . MasterPage
{
private static string ExtractBaseUrl ( string url )
{
return url . Contains ( "?" ) ? url . Remove ( url . IndexOf ( '?' ) ) : url ;
}
protected void Page_Load ( object sender , EventArgs e )
{
Menu1 . DataBind ( ) ;
// Which node in the site map is currently selected?
SiteMapNode currentNode = SiteMap . CurrentNode ;
if ( currentNode != null )
{
// Obtain the Url of the currently selected node's parent node.
string parentUrl = String . Empty ;
SiteMapNode parentNode = currentNode . ParentNode ;
if ( parentNode != null )
{
parentUrl = ExtractBaseUrl ( parentNode . Url ) ;
}
// Obtain the Url of the currently selected node.
string currentUrl = ExtractBaseUrl ( currentNode . Url ) ;
// Iterate the top level menu tier.
foreach ( MenuItem menuItem in Menu1 . Items )
{
// Compare the menu item's Url against the currently
// selected node's Url or the Url of its parent.
string menuItemUrl = ExtractBaseUrl ( menuItem . NavigateUrl ) ;
if ( ( currentUrl == menuItemUrl ) || ( parentUrl == menuItemUrl ) )
{
// If either matches then mark the top level menu item as selected.
Menu1 . Items [ Menu1 . Items . IndexOf ( menuItem ) ] . Selected = true ;
break ;
}
}
}
}
}
}Sekarang Anda bebas memilih salah satu item sub menu. Item menu tingkat atas yang sesuai akan tetap dipilih untuk memberi pengunjung petunjuk visual tentang di mana ia saat ini berada di dalam situs web.
Gambar 6 - masalah seleksi diperbaiki
Cukup banyak pekerjaan untuk membuat menu tabular mewah dengan menu sub horizontal yang sensitif terhadap konteks tetapi pada akhirnya Anda berakhir dengan menu yang terlihat licin dan ramah pengguna.
Saya menyarankan agar Anda menerapkan menu seperti itu dalam kontrol pengguna dan memasukkan kontrol pengguna itu di halaman induk situs web Anda. Dalam kebanyakan kasus, salah satu menu tersebut akan digunakan di seluruh situs web.
