Je jasné, že každá webová aplikace, ať už se jedná o osobní stránky či nějakou mnohastránkovou prezentaci, by měla uživateli nabídnout přehlednou a jednoduchou navigaci mezi jednotlivými stránkami. Takováto navigace má většinou podobu vertikálního nebo horizontálního menu, popřípadě je možno použít i tzv. mapu webu (mapu stránek).

Web.sitemap

V ASP.NET je pro vytvoření navigace k dispozici funkce, která načte strukturu menu např. z XML souboru pomocí XmpSiteMapProvideru. Tato struktura se zapíše do speciálního souboru Web.sitemap, který se umístí do webové aplikace. Tento soubor může vypadat například takto:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap
   xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="Default.aspx" title="Úvod"
                                  description="Úvodní stránka">
  <siteMapNode url="Nabidka.aspx" title="Hlavní nabídka">
   <siteMapNode url="Odkazy.aspx" title="Odkazy" />
   <siteMapNode url="Knihy.aspx" title="Knihy" />
   <siteMapNode url="Videa.aspx" title="Videa" />
  </siteMapNode>
  <siteMapNode url="Uzivatele.aspx" titile="Uživatelé"
                                  description="Uživatelé">
   <siteMapNode url="Prihlasit.aspx" title="Přihlásit se" />
   <siteMapNode url="NovyUz.aspx" title="Registrovat" />
  </siteMapNode>
 </siteMapNode>
</siteMap>

Menu

Nyní, když jsme si vytvořili strukturu stránek v souboru Web.sitemap, přidáme do stránek ovládací prvek Menu. Jak je již z názvu tohoto prvku patrné, tento prvek slouží k vytvoření menu. Jen malé upozornění, ovládací prvek Menu by jste měli vždy umisťovat do MaterPage, usnadníte si tím vývoj webové aplikace a dokážete jí tak snadno spravovat narozdíl od případu, kdyby jste umísťovali menu na každou stránku. Položky do menu můžete umisťovat buď pomocí výše popsaného souboru Web.sitemap nebo ručně. Nejprve si ukážeme, jak vytvořit menu ručně.

<asp:Menu ID="Menu1" runat="Server" Orientation="Horizontal">
 <Items>
  <asp:MenuItem NavigateUrl="Default.aspx" Text="Hlavní stránka">
   <asp:MenuItem NavigateUrl="Knihy.aspx" Text="Knihy" />
   <asp:MenuItem NavigateUrl="Videa.aspx" Text="Videa" />
  </asp:MenuItem>
  <asp:MenuItem NavigateUrl="Login.aspx Text="Přihlásit se" />
 </Items>
</asp:Menu>

Jak je vidět hned z prvního řádku, pomocí parametru Orientation nastavuje menu pomocí hodnoty Horizontal jako vodorovné. Pokud si přejete místo vodorovného menu vertikální, uveďte jako hodnotu tohoto parametru Vertical. Dále nastavujeme pomocí asp:MenuItem v sekci Items jednotlivé položky menu, kde NavigateUrl představuje adresu, na kterou se po kliknutí na tuto položku přejde a Text je text, který se zobrazí jako text odkazu v menu. Pokud NavigateUrl neuvedete, způsobí kliknutí na tuto položku postback a je možno tuto událost zpracovat jako kterékoliv jiné serverové události.

Pokud chcete menu vytvořit například ze souboru Web.sitemap, musíme nejprve vložit do stránky nevizuální ovládací prvek SiteMapDataSource, který poslouží jako zdroj dat pro ovládací prvek Menu.

<asp:SiteMapDataSource ID="DataSource1" runat="server" />

Vložení tohoto prvku je vcelku triviální, důležité je zde ID, pomocí kterého propojíme tento ovládací prvek s ovládacím prvkem Menu a jeho parametru DataSourceID a to následovně:

<asp:Menu ID="Menu2" runat="server" DataSourceID="DataSource1">

Toto je vše, co je potřaba udělat, aby se nám menu načítalo ze souboru Web.sitemap. V tomto stavu menu nevypadá zrovna nejlépe, proto je zde samozřejmě možné vzhled jednotlivých položek menu upravit podle svých představ. Jednotlivé položky můžete nastavovat buď přímým zápisem, např.: <StaticMenuItemStyle ForeColor="#000" />, nebo pomocí témat Themes. O používání témat a o skinování ASP.NET aplikace si budeme povídat v některém z dalších článků.

SiteMapPath

Poslední věc, kterou si dnes predstavíme, je ovládací prvek SiteMapPath, který slouží k zobrazování cesty od hlavní stránky webové aplikace až po aktuální dokument. Někdy je toto nazýváno jako Drobečková navigace. Přidání tohoto prvku je vcelku jednoduché a postačí, pokud tento prvek umístíme do stránky. Prvek je samozřejmě možno také ostylovat k obrazu svému. Například pomocí <PathSeparatorTemplate> &#187; </PathSeparatorTemplate> určíme, jaký znak se má použít jako oddělovač jednotlivých položek, v tomto případě je to znak », popřípadě pomocí <CurrentNodeStyle Font-Bold="true" /> určíme, že aktuální dokument bude vypsán tučným písmem.

<asp:SiteMapPath ID="SiteMapPath1" runat="server">
  <PathSeparatorTemplate>&#187;</PathSeparatorTemplate>
  <CurrentNodeStyle Font-Bold="true" />
</asp:SiteMapPath>

Tímto článkem jsme si představili možnosti, jak do ASP.NET aplikace přidat jednoduše navigaci a tak jednotlivé stránky propojit v jeden celek a umožnit uživateli naší aplikace snadnou orientaci v celé struktuře webu. Je jasné, že jsme neprobrali všechny možnosti, které navigace v ASP.NET nabízí, to by vyšlo na několik článků. V budoucnu se jistě ještě k této problematice vrátíme a představíme si další možnosti, jak navigovat uživatele po naší ASP.NET aplikaci.