Click here to Skip to main content
12,350,653 members (24,822 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

12K views
2 bookmarked
Posted

Using XSLT to display an ASP.net sitemap without using tables

, 27 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
The quick and easy way of displaying an ASP.net site map (web.sitemap) in an ASP.net page is to use a TreeView control bound to a SiteMapDataSource component as shown in the following example:Which results in a mass of nested tables, in-line styles, and generally messy mark-up.With just a little mor

The quick and easy way of displaying an ASP.net site map (web.sitemap) in an ASP.net page is to use a TreeView control bound to a SiteMapDataSource component as shown in the following example:

<asp:SiteMapDataSource runat="server" ID="siteMapDataSource" EnableViewState="False"   ShowStartingNode="False" />
<asp:TreeView runat="server" ID="siteMapTreeView" DataSourceID="siteMapDataSource"  EnableClientScript="False" EnableViewState="False" ShowExpandCollapse="False"></asp:TreeView>

Which results in a mass of nested tables, in-line styles, and generally messy mark-up.

With just a little more effort however, you can display the sitemap using a XSLT transform, resulting in slim, clean and configurable mark-up - and not a table to be seen.

This approach can be used with both Web Forms and MVC.

This article assumes you already have a pre-made ASP.net sitemap file.

Defining the XSLT

Add a new XSLT File to your project. In this case, it's named sitemap.xslt.

Next, paste in the mark-up below.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:map="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" exclude-result-prefixes="map">
  <xsl:output method="xml" encoding="utf-8" indent="yes"/>

  <xsl:template name="mapNode" match="map:siteMap">
    <ul>
      <xsl:apply-templates/>
    </ul>
  </xsl:template>

  <xsl:template match="map:siteMapNode">
    <li>
      <a href="http://cyotek.com{substring(@url, 2)}" title="{@description}">
        <xsl:value-of select="@title"/>
      </a>

      <xsl:if test="map:siteMapNode">
        <xsl:call-template name="mapNode"/>
      </xsl:if>

    </li>
  </xsl:template>
  
</xsl:stylesheet>

Note: As generally all URL's in ASP.net site maps start with ~/, the href tag in the above example has been customized to include the domain http://cyotek.com at the start, then use the XSLT substring function to strip the ~/ from the start of the URL. Don't forget to modify the URL to point to your own domain!

Declaratively transforming the document

If you are using Web forms controls, then this may be the more convenient approach for you.

Just add the XML component to your page, and set the DocumentSource property to the name of the sitemap, and the TransformSource property to the name of your XSLT file.

<asp:Xml runat="server" ID="xmlSiteMapViewer" DocumentSource="~/web.sitemap" TransformSource="~/sitemap.xslt" />

Programmatically transforming the document

The ASP.net XML control doesn't need to be inside a server side form tag, so you can use the exact same code above in your MVC views.

However, if you want to do this programmatically, the following code works too.

var xmlFileName = Server.MapPath("~/web.sitemap");
var xslFileName=Server.MapPath("~/sitemap.xslt");
var result =new System.IO.StringWriter();
var transform = new System.Xml.Xsl.XslCompiledTransform();

transform.Load(xslFileName);
transform.Transform(xmlFileName, null, result);

Response.Write(result.ToString());

The result

The output of the transform will be simple series of nested unordered lists, clean and ready to be styled with CSS. And for little more effort than it took to do the original tree view solution.

With a bit more tweaking you can probably expand this to show only a single branch, useful for navigation within a section of a website, or creating breadcrumb trails.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Richard James Moss
Software Developer (Senior)
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

 
BugFault basic the breadcrumb Pin
Luiz Baggio6-Nov-13 14:10
memberLuiz Baggio6-Nov-13 14:10 
GeneralRe: Fault basic the breadcrumb Pin
Richard James Moss7-Nov-13 2:38
memberRichard James Moss7-Nov-13 2:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160621.1 | Last Updated 27 Jan 2012
Article Copyright 2012 by Richard James Moss
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid