The quick and easy way of displaying an ASP.net site map
web.sitemap) in an ASP.net page is to use a
control bound to a
SiteMapDataSource component as shown in the
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
Next, paste in the mark-up below.
Note: As generally all URLs in ASP.net site maps start with
href tag in the above example has been customized to
include the domain http://cyotek.com at the start, then use
substring function to strip the
~/ from the start
of the URL. Don't forget to modify the URL to point to your own
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.
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
However, if you want to do this programmatically, the following code works too.
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.
- 2010-02-06 - First published
- 2020-11-21 - Updated formatting
Like what you're reading? Perhaps you like to buy us a coffee?