ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Tvorba navigace v ASP.NET 2.0 – prvek Menu

28. ledna 2005
•
Radek Jícha

Obsah

  1. Prvek MenuItem
    1. Text
    2. ImageUrl
    3. NavigateUrl
    4. Target
  2. Statické či dynamické zobrazení prvku Menu
  3. Soubor Web.sitemap

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 Menu - s přímým zápisem obsahu

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

Prvek MenuItem - obrázek před textem položky

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

Prvek Menu - s dynamicky generovaným obsahem

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.

Předchozí článek Pay-per-call aneb proč platit za klik myší?
Další článek treking.cz
Štítky: Články
Radek Jícha

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *