GENERATING WEBSITE NAVIGATION MENUS
Umbraco ships with a whole list of templates for generating lists of nodes for navigation, breadcrumbs, and other usage. This section provides some additional examples of how to work with XSLT and Razor to generate menus from your content structure. Razor is a view engine and is new in .NET 4.0. Razor allows you to access dynamic objects and display their associated data structures and values in the view (WebForm or other standard ASP.NET template). A common occurrence in websites is to have a multi-level top navigation with second level pages listed in dropdown menus. Listing 9-2 shows you how to do this.
Because Umbraco renders exactly what you tell it to render, the output from Listing 9-2 can easily be styled using CSS and JavaScript to create an engaging and functional menu.
LISTING 9-2: TwoTierTopNav.xslt
<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp “ ”>
]>
<xsl:stylesheet
version=“1.0”
xmlns:xsl=“http://www.w3.org/1999/XSL/Transform”
xmlns:msxml=“urn:schemas-microsoft-com:xslt”
xmlns:umbraco.library=“urn:umbraco.library”
xmlns:Exslt.ExsltCommon=“urn:Exslt.ExsltCommon”
xmlns:Exslt.ExsltDatesAndTimes=“urn:Exslt.ExsltDatesAndTimes”
xmlns:Exslt.ExsltMath=“urn:Exslt.ExsltMath”
xmlns:Exslt.ExsltRegularExpressions=“urn:Exslt.ExsltRegularExpressions”
xmlns:Exslt.ExsltStrings=“urn:Exslt.ExsltStrings”
xmlns:Exslt.ExsltSets=“urn:Exslt.ExsltSets”
xmlns:umbusersguide.library=“urn:umbusersguide.library”
exclude-result-prefixes=“msxml umbraco.library Exslt.ExsltCommon
Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions
Exslt.ExsltStrings Exslt.ExsltSets umbusersguide.library “>
<xsl:output method=“xml” omit-xml-declaration=“yes” />
<xsl:param name=“currentPage”/>
<xsl:template match=“/”>
<!-- Top level with an ID allowing you to style
the navigation.
-->
<ul id=“Navigation”>
<xsl:apply-templates select=“$currentPage/*
[@isDoc and string(umbracoNaviHide) != ‘1’]”/>
</ul>
</xsl:template>
<xsl:template match=“*”>
<li>
<a href=“{umbraco.library:NiceUrl(@id)}”>
<xsl:value-of select=“@nodeName”/>
</a>
<!-- check to see if the current page in the loop
has any direct children. If so, build the next
level here.
-->
<xsl:if test=“./*
[@isDoc and string(umbracoNaviHide) != ‘1’]”>
<ul>
<xsl:apply-templates select=“./*
[@isDoc and string(umbracoNaviHide) != ‘1’]”/>
</ul>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
If your XSLT macro runs into an error and displays Error reading XSLT file: xslt[filename.xslt], you can append the debug URL parameter—?umbDebugShowTrace=1—to get a look at the stack trace and associated error message.
For a more descriptive error, try saving your XSLT file in the backoffice XSLT editor in the Developer section of Umbraco. When saving the file, you will see the error appear in red, as shown in Figure 9-1.
Umbraco 4.6, the latest stable version at the time of this writing, has added Razor (CSHTML) support. This means that you can now leverage a third dynamic language runtime language for macro functionality (covered in Chapter 5). Listing 9-3 contains a sample Razor-driven macro. Razor provides you with access to the equivalent of currentPage in XSLT (covered in Chapter 11), something called the Model. Model contains all the properties that you have saved for any given document type.
LISTING 9-3: SecondLevelNav.razor
<ul>
@foreach(var page in Model.Children) {
<li><a href=“@page.Url”>@page.Name</li>
}
</ul>
The preceding is a very simple example of Razor. It can certainly get more complex, and for some people Razor will become a replacement for the use of XSLT as a rendering engine.