Programmeren in ASP.NET/Navigatie

Website-navigatie

Binnen een website moet een gebruiker constant de mogelijkheid hebben zijn weg terug te vinden en snel naar een ander onderdeel van de site te navigeren.

In ASP.NET 2.0 kan je alle navigatiegegevens in een XML-bestand bewaren. Deze gegevens kan je dan opvragen als een verzameling SiteMapNode-objecten.

Verder zijn er in ASP.NET 2.0 een aantal nieuwe navigatiecontrols, zoals de Menu-, TreeView-, SiteMapPath- en SiteMapDataSource-controls. Deze controls kunnen volledig zelfstandig de navigatiegegevens verwerken.

Opmerking
Deze controls zet je best op een master-pagina, zodat ze automatisch op elke pagina terugkomen.

Sitemap van een applicatie

Om te kunnen navigeren moet je eerst een logische structuur van je website opmaken. Standaard gebeurt dit in een XML-bestand met de naam web.sitemap. Een logische structuur kan aangemaakt worden in 2 eenvoudige stappen:

1. Maak een XML-bestand met de naam web.sitemap. In Visual Web Developer Express en Visual Studio kan je de optie "Site Map" kiezen als je "Add New Item" selecteert in het "Website"-menu. Het sitemap-bestand moet één hoofdelement bevatten: <siteMap>. Daaronder kan je een aantal <siteMapNode>-elementen bevatten, en elk daarvan kan op zijn beurt opnieuw dergelijke elementen bevatten. Op die manier kan je een boomstructuur opbouwen die overeen komt met de structuur van je site. Elke <siteMapNode> kan drie attributen hebben: title, url en description. Bijvoorbeeld:

web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
	<siteMapNode title="Home" url="Default.aspx">
		<siteMapNode title="Bedrijf" url="Bedrijf.aspx" />
		<siteMapNode title="Producten" url="Producten.aspx" >
			<siteMapNode title="Software" url="Software.aspx" />
			<siteMapNode title="Hardware" url="Hardware.aspx" />
		</siteMapNode>
		<siteMapNode title="Contact" url="Contact.aspx" />
	</siteMapNode>
</siteMap>

2. Maak een nieuwe master-pagina met de naam navigatie.master, en sleep er een SiteMapDataSource-control op vanaf de Toolbox. Deze control zal automatisch verbonden worden met het web.sitemap-bestand (indien je meerdere sitemaps wil gebruiken, dan kan je dit instellen via de property "SiteMapProvider" en web.config, anders laat je die property leeg, en wordt web.sitemap gebruikt).

Je kan nu gemakkelijk de SiteMapDataSource-control koppelen aan andere controls zoals de TreeView-control of de Menu-control.

Sleep bijvoorbeeld een TreeView-control op de pagina, en stel de property DataSourceID in op SiteMapDataSource1.

navigatie.master

<%@ Master Language="VB" %>
<html>
<head>
    <title>Navigatie</title>
</head>
<body>
   <form id="form1" runat="server">

      <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />    
      <asp:TreeView DataSourceID="SiteMapDataSource1" ID="TreeView1" 
           runat="server"/>

    <asp:contentplaceholder id="Body" runat="server" />
   </form>
</body>
</html>

Maak nu een pagina navigatie.aspx, op basis van navigatie.master.

Dit is het resultaat:

Het gebruik van de Menu-control is gelijkaardig.

Enkele belangrijke property's die je kan gebruiken om deze controls in te stellen zijn:

Menu-control:

DataSourceID
StaticDisplayLevels (aantal niveaus dat standaard getoond wordt)
Orientation (verticaal of horizontaal)
StaticMenuItemStyle (lay-out van het vaste deel van het menu)
DynamicMenuItemStyle (lay-out van het uitklappende deel van het menu)

TreeView-control:

DataSourceID
ImageSet (afbeeldingen gebruikt voor de verschillende niveaus)
NodeIndent (aantal pixels insprong)
ShowLines (toon lijnen tussen de nodes)
Alle NodeStyles (lay-out van de verschillende nodes)

SiteMapPath

De nieuwe SiteMapPath-control kan gebruikt worden om een zogenaamde broodkruimelnavigatie toe te voegen aan een site.

De SiteMapPath-control toont een lijst met links die een hiërarchisch pad toont van de root van de website tot aan de huidige pagina.

De SiteMapPath-control heeft een SiteMap-provider nodig om te weten wat er moet getoond worden. In tegenstelling tot de Menu- of Treeview-control gebruikt de SiteMapPath-control geen SiteMapDataSource-control.

De control gebruikt normaal de standaard SiteMap-provider. Deze staat ingesteld in het web.config-bestand. De SiteMapPath-control werkt alleen op een pagina die in de lijst van de SiteMapPath-provider voorkomt. Anders toont hij gewoon niks. Je kan een provider toevoegen aan web.config met de volgende code:

web.config

...
<system.web>
    <siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
        <providers>
            <add name="XmlSiteMapProvider"
                description="SiteMap provider die .sitemap XML bestanden gebruikt."
                type="System.Web.XmlSiteMapProvider"
                siteMapFile="web.sitemap"
                securityTrimmingEnabled="true"/>
        </providers>
    </siteMap>
</system.web>
...

Maak nu een pagina met een SiteMapPath-control:

hardware.aspx

<%@ Page Language="VB" %>
<html>
<head runat="server">
    <title>Hardware</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapPath ID="SiteMapPath1" runat="server"/>
    </div>
    </form>
</body>
</html>

Deze pagina stond al in het web.sitemap-bestand, en daarom werkt het onmiddellijk.

Dit is het resultaat:

Opmerkingen

In dit voorbeeld gebruikte je hetzelfde web.sitemap-bestand voor zowel de SiteMapPath-controls als de Menu- en de TreeView-control. Dikwijls is het beter om hiervoor aparte bestanden te gebruiken, omdat je menu dikwijls minder uitgebreid is dan wat je in de SiteMapPath wil tonen.
De SiteMapPath-control heeft een aantal extra eigenschappen die je kan instellen:
- ShowToolTips=false verbergt de description-tekst van de SiteMap-Provider
- ParentLevelsDisplayed (default=-1) stel het aantal niveaus in die getoond worden.
- RenderCurrentNodeAsLink=true toont de huidige pagina ook als een link.
- PathDirection=CurrentToRoot draait de volgorde van de links om.
- PathSeparator stelt het scheidingsteken in (default >).

URL-mapping

Nog een nieuwigheid in ASP.NET 2.0 is URL-mapping. Websites hebben dikwijls lange en ingewikkelde url's. Vroeger kon je wel speciale code schrijven om lange url's te verbergen, maar in ASP.NET 2.0 kan je dit gewoon configureren in web.config. Je geeft daarbij twee url's op: de echte, en degene die je wil tonen aan de gebruiker:

web.config
... <system.web> <urlMappings enabled="true"> <add url="~/Home.aspx" mappedUrl="~/Default.aspx?tabid=0" /> </urlMappings> ... </system.web> ...

Alle aanvragen voor Home.aspx worden vanaf nu doorgestuurd naar Default.aspx?tabid=0. Gebruikers kunnen de korte link toevoegen aan hun favorieten of bookmarks, en de korte link wordt getoond in de adresbalk.

← Master-pagina's

Programmeren in ASP.NET

Gegevenstoegang →