MVC Sitemap Provider tutorial and examples

10th Feb 2011

The ASP.net MVC sitemap provider is a solution aiming to provide your website with a fully functioning set of sitemap tools, such as breadcrumbs and node navigation.

When delving into using this solution, I made the huge mistake of first not reading up about ASP.net sitemaps in general. If you do not have any previous experience in using sitemaps on an ASP.net website, I would strongly recommend reading this MSDN article on ASP.net sitemaps. Many of the principles used in the ASP.net MVC framework are the same and reading this article will give you some fundamental basic principles.

Once you get the ASP.net MVC sitemap provider downloaded and registered, you should see that a sitemap file (Mvc.sitemap) has been created in your MVC solution's root:

Next, you need to go about editing your MVC.sitemap file so that it actually reflects the pages on your web site that are available to the user. This is the important bit - if you don't get this right, the sitemap provider will not work as expected. All nodes in your file must:

Be wrapped in an overall parent node representing the home page of your website. After all, the homepage is always the first point of call into any web application
Point to REAL controllers and REAL actions. If you fill up your MVC.sitemap file with dummy nodes pointing to non existent controllers and actions, asp.net MVC site provider will not return these nodes in any rendering of the sitemap. You will not get an error message, but will just not see your nodes.
Not point to a controller and an action that is already pointed to by a previous node. Again, the asp.net MVC sitemap provider will just remove any duplicate instances at runtime. You will not get an error message, but will just not see your nodes.

Here is an example of an MVC.sitemap file that is in a good format and is readable to the ASP.net MVC sitemap provider (apologies if the spacing has not worked correctly):

<?xml version="1.0" encoding="utf-8" ?> 
  <mvcSiteMap xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0" enableLocalization="false"> 
    <mvcSiteMapNode title="Home" controller="Home" action="Index" changeFrequency="Always" updatePriority="Normal"> 
      <mvcSiteMapNode title="Home" controller="Home" action="Test" description="Home"> 
        <mvcSiteMapNode title="Dashboard" controller="Home" action="Dashboard"/> 
        <mvcSiteMapNode title="My Profile" controller="Profile" action="MyProfile"/> 
      <mvcSiteMapNode title="My Jobs" controller="Profile" action="MyJobs"/> 
    </mvcSiteMapNode> 
    <mvcSiteMapNode title="Workplace" controller="Workplace" action="Index" description="users"> 
      <mvcSiteMapNode title="Calendar" controller="Workplace" action="Calendar"/>
      <mvcSiteMapNode title="Customers" controller="Workplace" action="Customers"/> 
    <mvcSiteMapNode title="Equipment" controller="Workplace" action="Equipment"/> 
  </mvcSiteMapNode> 
</mvcSiteMap>

Now, all you need to do is get the call to display your menu correct. If you get this wrong, you will end up displaying nodes that you don't want to display. Here's the call that worked for me on a file in a Mvc.Sitemap file that is essentially the same as the code listing above. This is in Razor syntax:

@Html.MvcSiteMap().Menu(false, true, false)

This call is telling the MvcSiteMap to display a menu not starting from the current node (the page the client is currently viewing), starting from the first child node, and hiding the overall starting node. This call has worked for me, but you may wish to tweak it depending on what exactly you want.

I will shortly put up a post about customising the way that the ASP.net MVC Sitemap provider displays a menu or breadcrumb trail.

Update

A more in-depth tutorial is now available from here. It covers starting from scratch, displaying navigation, breadcrumbs, and customising their appearance.

Links:

http://mvcsitemap.codeplex.com/

http://msdn.microsoft.com/en-us/library/yy2ykkab.aspx

Update

Links:

Recommended Reading: