ASP.NET 2.0 – navigace

29. září 2005

•

Každá webová aplikace by měla uživateli umožnit přehlednou navigaci mezi jednotlivými stránkami. Obvykle je tato navigace zprostředkována pomocí prvků, jako je menu, mapa stránky a další. V nové verzi obsahuje ASP.NET také několik základních ovládacích prvků, které umí prezentovat strukturu stránek uživateli.

Zmiňované ovládací prvky pracují s obecnou strukturou stránky, takže kdokoli může vytvořit objekt, který bude tato data načítat a předávat ovládacím prvkům. Tvorba navigace pro stránku je tak rozdělena do dvou částí. První část načítá strukturu a druhá je tvořena ovládacími prvky, které strukturu prezentují.

Pokud si chcete při čtení článku procházet zdrojové kódy, nebo se podívat jak aplikace fungují, jsou vám k dispozici.

Struktura stránek

V současné beta verzi obsahuje ASP.NET objekt pro načítání struktury stránky z XML souboru (XmlSiteMapProvider). Pokud použijeme výchozí nastavení, bude se načítat soubor Web.sitemap v kořenovém adresáři aplikace, ve kterém je strukturovaně uložena mapa stránky. U každé stránky se ukládá odkaz, titulek a popis stránky (jediný povinný atribut je adresa stránky). Soubor s nastavením nůže vypadat například takto:

<?xml version=“1.0″ encoding=“utf-8″ ?>
<siteMap>
   <!– Stromová struktura stránek aplikace –>
   <siteMapNode url=“~/default.aspx“ title=“Hlavní stránka“
         description=“Hlavní stránka naší firmy“>
      <!– První „hlavní“ sekce –>
      <siteMapNode url=“~/products.aspx“ title=“Produkty“>
         <siteMapNode url=“~/prod1.aspx“ title=“První produkt“ />
         <siteMapNode url=“~/prod2.aspx“ title=“Druhý produkt“ />
         <siteMapNode url=“~/prod3.aspx“ title=“Třetí produkt“ />
      </siteMapNode>
      <!– Druhá „hlavní“ sekce –>
      <siteMapNode url=“~/support.aspx“ title=“Podpora“
         description=“Zde najdete pomoc při potížích“ />
   </siteMapNode>
</siteMap>

SiteMapProvider

Již jsem psal, že je možné vytvořit vlastní objekt, který bude načítat strukturu stránky z jiného zdroje, než je popsaný XML soubor. K tomu složí abstraktní třída SiteMapProvider, od které stačí vytvořit odvozenou třídu (a pro usnadnění existuje ještě třída StaticSiteMapProvider, ve které jsou obvyklým způsobem implementovány některé metody). Při vytváření stromové struktury se jako prvky používají objekty typu SiteMapNode, které ukládají informace o stránce a seznam jejích podstránek. Pokud vytváříte vlastní SiteMapProvider a nebo chcete použít XmlSiteMapProvider s jiným jménem souboru, než je výchozí Web.sitemap, budete muset upravit konfigurační soubor aplikace následujícím způsobem:

<?xml version=“1.0″ ?>
<configuration><system.web>
   <!– Zde se vybira provider pro mapu stranky –>
   <siteMap defaultProvider=“mujProvider“ enabled=“true“>
   <providers>
      <!– Pridava provider, atribut type urcuje jmeno tridy –>
      <add name=“mujProvider“
         type=“MujSiteMapProvider“ />
   </providers>
   </siteMap>
</system.web></configuration>

Atribut type obvykle obsahuje celé jméno třídy (včetně assembly), ale pokud je provider umístěn ve stejném projektu jako aplikace, můžete uvést jméno i bez jména assembly. Tvorba vlastních providerů pro mapy stránek je mimo rozsah tohoto článku, ale v příkladech ke článku naleznete aplikaci CustomSiteMap, která ukazuje vytvoření vlastního provideru.

Ovládací prvky

Nyní, když máme uloženou strukturu stránek (nebo máme vytvořen objekt, který umí tuto strukturu načítat), zbývá podívat se na ovládací prvky, které tento objekt využívají a zobrazují data uživateli. Při vývoji složitější aplikace založené na ASP.NET 2.0 je velmi vhodné použít tyto navigační ovládací prvky v master page. Tím snadno získáte kostru aplikace i s navigací, dále bude pouze potřeba doplnit obsah jednotlivých stránek.

Nové ovládací prvky v ASP.NET 2.0 – rozbalovací menu a drobečková navigace

SiteMapPath

Ovládací prvek SiteMapPath slouží k zobrazování cesty od hlavní stránky aplikace až k aktuálnímu dokumentu (anglicky se obvykle tyto navigační prvky nazývají breadcrumbs, česky drobečková navigace – jako v pohádce o Jeníčkovi a Mařence). Po pouhém přidání tohoto ovládacího prvku na stránku bude prvek fungovat, protože si všechna potřebná data (včetně aktuální stránky) může získat z mapy stránek. Ovládací prvek je samozřejmě šablonovatelný, takže lze jeho podobu výrazně ovlivnit. Následující ukázka naznačuje, jak lze upravit vypisování odkazů, změnit styl písma jednotlivých položek a také v ní změníme znak, který se zobrazuje mezi jednotlivými odkazy.

<asp:SiteMapPath ID=“breadCrumbs“ Runat=“server“>
   <!– Zmeni znak mezi odkazy na znak » –>
   <PathSeparatorTemplate> » </PathSeparatorTemplate>
   <!– Aktualni dokument se bude vypisovat tucne –>
   <CurrentNodeStyle Font-Bold=“true“ />
   <!– Meni sablonu pro vypis odkazu –>
   <NodeTemplate>
      <a href=“<%# Eval(„Url“) %>“><%# Eval(„Title“) %></a>
   </NodeTemplate>
</asp:SiteMapPath>

V předcházející ukázce stojí ještě za povšimnutí nová syntaxe pro data binding. Zápis je v nové verzi o hodně jednodušší a tak stačí místo složitého kódu <%# DataBinder.Eval (Container.DataItem, "Title") %> psát <%# Eval("Title") %> (podrobněji se tomuto tématu bude věnovat jiný článek). Při data bindingu se šabloně NodeTemplate předá již výše zmiňovaný objekt typu SiteMapNode, takže je možné vypisovat jeho vlastnosti (mezi ty nejdůležitější patří Title, Url a Desciption).

Další ovládací prvek, který je přímo určen pro navigaci na stránkách, je ovládací prvek Menu. Jak je ze jména patrné, tento prvek umožňuje z dat dodaných z mapy stránek generovat menu. Navíc lze Menu použít i samostatně, v takovém případě se struktura píše přímo do kódu stránky (respektive uvnitř tagu Items v samotném ovládacím prvku). Zde se položky menu vkládají pomocí tagu asp:MenuItem, ve kterém lze nastavit text položky, zobrazovanou ikonu a odkaz (pokud není uveden v položce odkaz, provede se po kliknutí na položku menu postback a kliknutí lze zpracovat jako serverovou událost). Následující kód ukazuje, jak vytvořit jednoduché menu s pevně danými položkami.

<!– Menu muze byt horizontalni nebo vertikalni –>
<asp:Menu Runat=“Server“ Orientation=“Horizontal“>
   <!– Polozky menu jsou pevne dany v kodu –>
   <Items>
      <asp:MenuItem NavigateUrl=“~/default.aspx“ Text=“Hlavní“>
         <asp:MenuItem NavigateUrl=“~/products.aspx“ Text=“Produkty“ />
         <asp:MenuItem NavigateUrl=“~/support.aspx“ Text=“Podpora“ />
      </asp:MenuItem>
      <asp:MenuItem Text=“Odeslat email“ />
   </Items>
</asp:Menu>

Pokud chcete vytvořit Menu, které bude zobrazovat data z mapy stránek, budete nejprve muset vložit do stránky ovládací prvek SiteMapDataSource. Tento ovládací prvek se na stránce nezobrazuje a slouží pouze jako zdroj dat pro ostatní prvky (tedy i prvku Menu). Tento prvek je součástí složitějšího konceptu pro přístup k datům, o němž se ještě zmíním dále. Prozatím stačí vědět, že pomocí tohoto prvku definujeme zdroj dat pro samotné menu. Jakmile máme definován zdroj dat, stačí už pouze nastavit u prvku Menu vlastnost DataSourceID na ID zdroje dat a menu bude zobrazovat odkazy na stránky zadané v mapě stránek.

<!– Zdroj dat pro menu –>
<!– Nastavenim ShowStartingNode na false urcime, ze se –>
<!– nema zobrazovat korenovy prvek (Hlavni stranka) –>
<asp:SiteMapDataSource ID=“siteMapSource“
Runat=“server“ ShowStartingNode=“true“ />
<!– Menu s nastavenym ID zdroje dat –>
<asp:Menu ID=“menu“ Runat=“Server“ DataSourceID=“siteMapSource“ />

Jak jste si již mohli všimnout, menu je možné zobrazovat horizontálně (položky jsou vedle sebe) nebo vertikálně. Menu podporuje také dva různé způsoby zobrazení položek, a to statický a dynamický. Statické zobrazení znamená, že jsou položky zobrazeny stále, v dynamickém zobrazení se položky zobrazují při přejetí myší. Výchozí nastavení menu je, že je zobrazena jedna úroveň položek staticky a ostatní se zobrazují dynamicky. Toto chováni lze měnit pomocí vlastnosti StaticDisplayLevels.

Vzhled jednotlivých položek menu lze samozřejmě měnit. Buď použitím Themes, což je další nová vlastnost ASP.NET, o které se ještě zmíním, nebo pomocí šablon, podobně jako u ovládacího prvku SiteMapPath. Vzhled lze měnit dvěma způsoby. Jednak lze pomocí tagů ve tvaru JmenoCastiStyle (kde JmenoCasti je jméno jednotlivého kousku menu – například StaticMenuItem a podobně) nastavit různé vlastnosti vzhledu, jako je například barva a font, druhak je možné pomocí šablony (JmenoCastiTemplate) úplně přepsat generovaný XHTML kód části. Při data bindingu se šabloně předává objekt typu MenuItem, který je shodný s objektem vytvářeným pomocí asp:MenuItem a umožňuje tedy pracovat se stejnými vlastnostmi. V následující ukázce jsou názorně demonstrovány obě popisované techniky úpravy vzhledu menu:

<!– Ovladaci prvek menu s upravenym vzhledem –>
<asp:Menu Runat=“Server“ Orientation=“Horizontal“
         ID=“mainMenu“ DataSourceID=“siteMapSource“>
   <!– Nastaveni vzhledu nekterych casti –>
   <DynamicMenuStyle BorderColor=“#606060″ BorderWidth=“2″ />
   <DynamicMenuItemStyle BackColor=“#f0f0f0″ />
   <DynamicHoverStyle BackColor=“#d0d0d0″ />
   <StaticMenuItemStyle ForeColor=“black“ />
   <StaticHoverStyle ForeColor=“#0000a0″ />
   <!– Prepsani vychozi sablony pro generovani kodu –>
   <StaticItemTemplate>
      <strong><%# Eval(„Text“) %></strong>
   </StaticItemTemplate>
   <DynamicItemTemplate>
      <img src=“icon.gif“ border=“0″ /><%# Eval(„Text“) %>
   </DynamicItemTemplate>
</asp:Menu>

V souvislosti s ovládacími prvky (hlavně s ovládacím prvkem Menu) je ještě potřeba zmínit se o jedné technologii v nové verzi ASP.NET, nazvané adaptive rendering. Ve zkratce tato technologie umožňuje jedním způsobem generovat funkční výstup pro širokou škálu zařízení a webových prohlížečů (od formátů určených pro mobilní zařízení, jako je WML, přes HTML 3.2, až po XHTML 1.1). Pokud je tedy ovládací prvek vytvořen tak, že sám negeneruje XHTML kód, ale používá HtmlTextWriter, pak ASP.NET dokáže pomocí adaptéru vygenerovat různý kód pro různá zařízení. Vzhledem k tomu, že všechny standardní ovládací prvky jsou psány tímto způsobem, funguje také ovládací prvek menu i na jiných zařízeních, než jsou moderní webové prohlížeče, na kterých se vygeneruje rozbalovací javascriptové menu.

Přístup k mapě stránek z kódu

Je jasné, že standardní ovládací prvky nejsou vždy vyhovující, a proto je možné přistupovat k datům z mapy stránek i z kódu. Mapa stránek je uložena jako stromová struktura složená z objektů SiteMapNode. Tento objekt obsahuje kromě výše popsaných vlastností, uložených v XML souboru s mapou, stránku i kolekci obsahující potomky (vnořené stránky), takže vygenerovat celou mapu stánek opravdu není komplikované. Kořenovou stránku lze, stejně jako právě vybranou, získat pomocí statických metod objektu SiteMap, a to RootNode, respektive CurrentNode.

Nové ovládací prvky v ASP.NET 2.0 – kontextová navigace

Následující příklad ukazuje, jak lze v master page generovat odkazy tak, jak jsou vidět na předcházejícím obrázku, tedy při načtení se vytvoří jeden odkaz na vyšší úroveň ve struktuře stránek a odkazy na všechny podřazené stránky. Pro odkaz na vyšší úroveň použijeme prvek asp:HyperLink (odkaz), kterému nastavíme adresu a titulek stránky a na kořenové stránce ho skryjeme. Pro výpis odkazů na podřazené stránky použijeme asp:PlaceHolder (kontejner), do kterého vložíme dynamicky jednotlivé odkazy. Do ovládacího prvku asp:Label ještě v příkladu vypíšeme titulek aktuální stránky, jak je uložen v mapě stránek.

<!– Master page pouzivajici code behind –>
<!– Stranka demnostruje generovani navigacnich odkazu –>
<%@ Master Language=“C#“ AutoEventWireup=“true“
   CodeFile=“Master.master.cs“ Inherits=“Master“ %>
<html>
<head runat=“server“></head>
<body><form runat=“server“>
<!– Label pro titulek aktualni stranky a .. –>
<!– .. odkaz na stranku na vyssi urovni –>
<b>Jste v casti:</b>
<asp:Label ID=“lblPage“ runat=“server“ />
<asp:HyperLink ID=“lnkTop“ runat=“server“ Text=“Nahoru“ />

<!– Zde se vlozi odkazy na podrazene stranky –>
<b>Podsekce:</b>
<asp:PlaceHolder ID=“placeLinks“ runat=“server“>
</asp:PlaceHolder>

<!– … –>
</form></body>
</html>

V code behind třídě vygenerujeme v metodě OnInit odkazy na podřazené stránky a v metodě Page_Load nastavíme vlastnosti ovládacích prvků pro titulek aktuální stránky a odkaz na vyšší úroveň.

using System;
using System.Web;
using System.Web.UI.WebControls;
public partial class Master : System.Web.UI.MasterPage
{
   protected void Page_Load(object sender, EventArgs e)
   {
      // Z aktualni polozky zjistime titulek stranky
      lblPage.Text=SiteMap.CurrentNode.Title;
      // Zjistime rodice aktualni polozky
      SiteMapNode parent=SiteMap.CurrentNode.ParentNode;
      if (parent==null) {
         // pokud neexistuje skryjeme odkaz
         lnkTop.Visible=false;
      } else {
         // pokud existuje nastavime adresu
         lnkTop.NavigateUrl=parent.Url;
      }
   }
   protected override void OnInit(EventArgs e)
   {
      // prochazi vsechny podpolozky aktualni stranky
      foreach (SiteMapNode child in SiteMap.CurrentNode.ChildNodes)
      {
         // vytvori odkaz na stranku
         HyperLink lnk=new HyperLink();
         lnk.Text=child.Title;
         lnk.NavigateUrl=child.Url;
         // a vlozi ho do stranky
         placeLinks.Controls.Add(lnk);
      }
      base.OnInit(e);
   }
}

Co v tomto článku není

V tomto článku jsem úmyslně nezmiňoval ovládací prvek TreeView, pomocí kterého lze mapu stránek také zobrazovat. Tento ovládací prvek je poměrně komplexní a je určen k zobrazování libovolných hierarchických (stromových) dat, proto mu bude věnován samostatný článek.