Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

I have done lots breadcrumb kind of things in normal asp.net web forms I was looking for same for asp.net mvc. After searching on internet I have found one great nuget package for mvpsite map provider which can be easily implemented via site map provider. So let’s check how its works. I have create a new MVC 3 web application called breadcrumb and now I am adding a reference of site map provider via nuget package like following.

BreadCumb using site map provider in asp.net mvc

You can find more information about MVC sitemap provider on following URL.

https://github.com/maartenba/MvcSiteMapProvid

So once you add site map provider. You will find a Mvc.SiteMap file like following.

Site map with asp.net mvc

And following is content of that file.

<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0"
            xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0 MvcSiteMapSchema.xsd"
            enableLocalization="true">
  <mvcSiteMapNode title="Home" controller="Home" action="Index">
    <mvcSiteMapNode title="About" controller="Home" action="About"/>
      </mvcSiteMapNode>
</mvcSiteMap>

So now we have added site map so now its time to make breadcrumb dynamic. So as we all know that with in the standard asp.net mvc template we have action link by default for Home and About like following.

<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
    </ul>
</div>

Now I want to replace that with our sitemap provider and make it dynamic so I have added the following code.

<div id="menucontainer">
       @Html.MvcSiteMap().Menu(true)
</div>

That’s it. This is the magic code @Html.MvcSiteMap will dynamically create breadcrumb for you. Now let’s run this in browser. You can see that it has created breadcrumb dynamically without writing any action link code.

BreadCumb with asp.net mvc

So here you can see with MvcSiteMap provider we don’t have to write any code we just need to add menu syntax and rest it will do automatically. That’s it. Hope you liked it. Stay tuned for more till then happy programming.

Shout it
Published Monday, April 09, 2012 1:47 AM by Jalpesh P. Vadgama

Comments

# ASP.NET MVC Archived Buzz, Page 1

Sunday, April 08, 2012 4:59 PM by ASP.NET MVC Archived Buzz, Page 1

Pingback from  ASP.NET MVC Archived Buzz, Page 1

# re: Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

Sunday, April 08, 2012 5:08 PM by Gregor Suttie

Thats not really dynamic is it? - thats actually static.

To implement a dynamic sitemap you should post about the dymnamic node providers you can use from the code - also note the issues on github as you need to be careful with using them.

# re: Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

Monday, April 09, 2012 2:37 AM by Jalpesh P. Vadgama

@Gregor - Dynamic means you don't have to write any code for that. You just need to add notes in mvc sitemap file.

# Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider - DotNetJalps | asp.net mvc | Scoop.it

Pingback from  Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider - DotNetJalps | asp.net mvc | Scoop.it

# re: Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

Monday, April 09, 2012 1:20 PM by Greg

I don't see any breadcrumbs on the page...  Just a menu being generated from xml sitemap.  Aren't breadcrumbs supposed to give the user their 'location' within the site's hierarchy? i.e. (Home[link] -> About[current page])

# re: Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

Monday, April 09, 2012 4:14 PM by bregia

I thought breadcrumbs referred to a "you are here" display. This example just displays the base menu a new way, doesn't it?

# re: Creating dynamic breadcrumb in asp.net mvc with mvcsitemap provider

Tuesday, April 10, 2012 3:08 AM by Jalpesh P. Vadgama

@Greg- This just a default style sheet. You can have difrrent stylesheet and can be used