Tvorba navigace v ASP.NET 2.0 – prvek Menu
Obsah
Související
Navigace na webových stránkách patří k základním elementům. ASP.NET 2.0 přináší několik zajímavých prvků, které nám s tvorbou navigace pomohou. V tomto článku se podíváme na zoubek prvku Menu.
Jak již název napovídá, prvek Menu bude zajisté použitelný při tvorbě nějakých menu na vašich stránkách. Aby byl ale Menu control užitečný, mělo by vám jeho použití přinést něco navíc. To „něco navíc“ bude v tomto případě ušetřená práce. Vytvořit kompletní a inteligentní navigaci pro vaši aplikaci bude s použitím tohoto prvku otázka několika minut.
Při použití prvku Menu máte tři základní možnosti, jak tomuto prvku sdělit, co má v navigaci zobrazit. Buďto můžete všechny položky do tohoto prvku vypsat „natvrdo“, nebo můžete použít nějaký obecný zdroj dat a nebo můžete sáhnout po speciálním souboru – Web.sitemap, který je v ASP.NET novinkou.
Abychom si nejdříve ukázali nějaký jednoduchý způsob, jak rychle vytvořit menu a trochu si pohrát s jeho vzhledem, použijeme v první ukázce primitivnější postup – uvnitř prvku Menu pevně nadefinujeme jednotlivé položky:
<%@ Page Language=“C#“ %>
<script runat=“server“>
</script>
<html>
<head>
</head>
<body>
<form id=“form1″ runat=“server“>
<asp:Menu ID=“menu1″ Runat=“Server“>
<Items>
<asp:MenuItem Text=“Skupina 1″>
<asp:MenuItem Text=“Polozka 1″ />
<asp:MenuItem Text=“Skupina“>
<asp:MenuItem Text=“Polozka 1″ />
<asp:MenuItem Text=“Polozka 2″ />
</asp:MenuItem>
<asp:MenuItem Text=“Polozka 3″ />
</asp:MenuItem>
<asp:MenuItem Text=“Skupina 2″>
<asp:MenuItem Text=“Polozka 1″ />
<asp:MenuItem Text=“Polozka 2″ />
<asp:MenuItem Text=“Polozka 3″ />
</asp:MenuItem>
<asp:MenuItem Text=“Prikaz 1″ />
<asp:MenuItem Text=“Prikaz 2″ />
</Items>
</asp:Menu>
</form>
</body>
</html>
Jak je vidět na první pohled, tvorba menu s pomocí tohoto prvku je velmi intuitivní. Všechny položky jsou definovány uvnitř elementu <Items />. Jak jsou v sobě jednotlivé elementy <asp:MenuItem /> vnořovány, tak budou také hierarchicky zobrazeny. Následující screenshot je výstupem naší ukázky:
Prvek MenuItem
Položka <asp:MenuItem /> vystavuje devět veřejných vlastností. Pojďme si popsat ty nejužitečnější.
Text
Účelem této vlastnosti není nic jiného, než nastavení textu položky.
ImageUrl
Obrázek definovaný uvnitř této vlastnosti se zobrazí před textem položky.
<asp:MenuItem Text=“Members“ ImageUrl=“~/klice.gif“ />
NavigateUrl
Standardně se po klepnutí na položku vyvolá postback a zavolá se obslužná metoda pro událost OnMenuItemClick. Pomocí vlastnosti NavigateUrl můžete standardní scénář změnit a umístit do této vlastnosti adresu stránky, kam se má vykonávání přesměrovat. Reagovat na MenuItemClick můžete různými způsoby, například takto:
<asp:Menu ID=“menu2″ Runat=“Server“ OnMenuItemClick=“HandleSelection“>
<Items>
<asp:MenuItem Text=“Úvod“>
<asp:MenuItem Text=“Profil“ Value=“profile“ />
<asp:MenuItem Text=“Kontakt“ Value=“contact“ />
<asp:MenuItem Text=“Members“ Value=“members“ />
</asp:MenuItem>
</Items>
</asp:Menu>
<asp:Label ID=“lblBody“ Runat=“server“ />
void HandleSelection(object sender, MenuEventArgs e)
{
switch (e.Item.Value)
{
case „profile“:
lblBody.Text = „profil společnosti“;
break;
case „contact“:
lblBody.Text = „Adresa: Kdesi cosi 223, Praha 1234“;
break;
}
}
V tomto případě se vyvolá postback a zavolá metoda HandleSelection. Jako argumenty události musíte použít třídu MenuEventArgs, která zpřístupňuje přes vlastnost Item „odkaz“ na aktivovanou položku. Pomocí tohoto odkazu snadno zjistíte všechny důležité informace – v našem příkladu jsme větvili vykonávání programu v závislosti na vlastnosti Value.
Jako další možnost se nabízí použití vlastnosti NavigateUrl. Klepne-li uživatel na některou z položek v menu, bude vždy přesměrován na adresu v této vlastnosti uvedenou. Opět uvedu kratičký příklad:
<asp:Menu ID=“menu3″ Runat=“Server“ OnMenuItemClick=“HandleSelection“>
<Items>
<asp:MenuItem Text=“Úvod“>
<asp:MenuItem Text=“Profil“ NavigateUrl=“profile.aspx“ />
<asp:MenuItem Text=“Kontakt“ NavigateUrl=“contact.aspx“ />
<asp:MenuItem Text=“Members“ NavigateUrl=“members/default.aspx“ />
</asp:MenuItem>
</Items>
</asp:Menu>
Target
Pomocí atributu Target můžete určit, do jakého okna či rámu se má cíl definovaný v atributu NavigateUrl zobrazit.
Statické či dynamické zobrazení prvku Menu
Prvek Menu umožňuje dva základní způsoby zobrazení – static a dynamic. Použijete-li statické zobrazení, všechny položky budou rovnou viditelné. Naopak dynamické menu zobrazí jen nejvyšší úroveň a ostatní zpřístupní až po přejetí myši nad rodičovským uzlem.
Co se týče kontroly vzhledu, máte opravdu dostatek možností, jak pomocí vlastností vytvořit menu přesně podle vašich představ. Rozhodně nemá smysl všechny tady uvádět a popisovat. Vše potřebné je uvedeno v dokumentaci k ASP.NET 2.0. Používáte-li Visual WebDeveloper, IntelliSense vám s prozkoumáváním vlastností pomůže. Abyste ale měli alespoň představu, uvedu maličkou ukázku:
<asp:Menu ID=“menu1″ Runat=“Server“
BackColor=“PowderBlue“ BorderStyle=“solid“ BorderColor=“Black“
BorderWidth=“1″ DisappearAfter=“1200″
DynamicHoverStyle-BackColor=“Peachpuff“
StaticHoverStyle-BackColor=“Peachpuff“
DynamicSelectedStyle-BackColor=“PaleGoldenrod“
DynamicMenuStyle-BackColor=“#cccccc“
DynamicItemStyle-BorderColor=“Black“
DynamicMenuStyle-BorderWidth=“1″
Font-Names=“Verdana, sans-serif“ Font-Size=“11px“>
<items>
…
</items>
</asp:Menu>
Soubor Web.sitemap
Tento soubor slouží k definování struktury webového sídla ve formátu XML. Jednoduchá mapa webu může vypadat například takto:
<?xml version=“1.0″ encoding=“utf-8″ ?>
<siteMap>
<siteMapNode url=““ title=“Home“ description=““ roles=““>
< siteMapNode url=““ title=“Polozka 1″ description=““ roles=““ />
<siteMapNode url=““ title=“Skupina 1″ description=““ roles=““>
<siteMapNode url=““ title=“Polozka 1″ description=““ roles=““ />
<siteMapNode url=““ title=“Polozka 2″ description=““ roles=““ />
</siteMapNode>
<siteMapNode url=““ title=“Polozka 2″ description=““ roles=““ />
</siteMapNode>
</siteMap>
Ve Web.sitemap můžete kromě základních informací, jako je URL nebo název položky ,definovat i atribut roles, který určuje role, jimž je odkaz určen. Vykonat nějakou akci v závislosti na klepnutí na položku můžete opět buď pomocí atributu ERL definovaného v tomto souboru, nebo přes ovladač události MenuItemClick. Abyste však mohli navázat Web.sitemap k prvku Menu, musíte ještě trošku poupravit kód do zhruba této podoby:
<asp:Menu ID=“Menu2″ Runat=“server“
DataSourceID=“SiteMapDataSource1″
OnMenuItemClick=“HandleSelection“>
</asp:Menu>
<asp:SiteMapDataSource ID=“SiteMapDataSource1″ Runat=“server“ />
Ještě se zmíním o vlastnosti StaticDisplayLevels. Ta určuje, kolik úrovní menu bude zobrazeno staticky. Kdybychom v našem případě nepoužili tento atribut (jako v ukázce), zobrazí se jen uzel Home. Podle mne by bylo žádoucí, aby byla rovnou viditelná ještě jedna úroveň – nastavíme tedy StaticDisplayLevels="2".
Takto vytvořené menu by bylo dobré umístit někam na Master Page, abyste s ním neměli již více starostí. Pro úplnost dodám, že ASP.NET 2.0 poskytuje v kategorii tvorby navigace ještě dva další prvky – TreeView a SiteMapPath, těm se však budeme věnovat v jiném článku.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
