Programmeren in ASP.NET/Navigatie

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

Programmeren in ASP.NET

  1. Wat is ASP.NET?
  2. Wat heb ik nodig voor ASP.NET?
  3. Een ASP.NET-server installeren
  4. Je eerste ASP.NET-pagina
  5. HTML-controls
  6. Foutzoeken
  7. Web-server-controls
  8. Webformulieren
  9. Veelgebruikte objecten
  10. Validering
  11. Master-pagina's
  12. Navigatie
  13. Gegevenstoegang
  14. Werken met databanken
  15. Databankgegevens wijzigen
  16. Werken met datacontrols
  17. GridView
  18. FormView en DetailsView
  19. User-controls
  20. Custom controls
  21. AJAX
  22. Viewstate
  23. Configuratiebestanden
  24. Webservices
  25. Beveiliging
  26. Personalisatie en profielen
  27. Thema's en skins
  28. WebParts
  29. Globalisering
  30. Caching
  31. Mail vanuit ASP.NET
  32. Reguliere expressies
  33. Server-side afbeeldingen
  34. Mobiele toepassingen
  35. Meer informatie
  36. Appendix: foutmeldingen

Website-navigatie[bewerken]

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[bewerken]

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: Sitemap TreeView-control.gif

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[bewerken]

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: Sitemappath.gif

Opmerkingen

  1. 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.
  2. 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[bewerken]

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.

Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.