Monday, April 9, 2012

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/MvcSiteMapProvider

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

kick it on DotNetKicks.com
Share:

1 comment:

  1. Great Article :)

    We can also submit our .net related links on http://www.dotnettechy.com to improve traffic.

    The dotnettechy.com is a community of .Net developers joined together to learn, to teach, to find solutions, to find interview questions and answers, to find .net website / blog collection and to have fun programming. 

    ReplyDelete

Your feedback is very important to me. Please provide your feedback via putting comments.

Support this blog-Buy me a coffee

Buy me a coffeeBuy me a coffee
Search This Blog
Subscribe to my blog

  

My Mvp Profile
Follow us on facebook
Blog Archive
Total Pageviews