Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Dynamic Breadcrumbs in ASP.NET MVC With MvcSiteMap

DZone's Guide to

Creating Dynamic Breadcrumbs in ASP.NET MVC With MvcSiteMap

I created a new MVC 3 web application called breadcrumb and I added a reference to the site map provider via the NuGet Package Manager.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

I have done lots of work with breadcrumbs in normal ASP.NET Web Forms. I was looking for the same functionality in ASP.NET MVC. After searching for a while, I have found one great NuGet package called MvcSiteMapProvider which can be easily implemented via the default site map provider. So let’s see how it works. I created a new MVC 3 web application called breadcrumb and I added a reference to the site map provider via the NuGet Package Manager:

BreadCumb using site map provider in asp.net mvc

You can find more information about MVC sitemap provider by following this link: https://github.com/maartenba/MvcSiteMapProvid

Once you added the package reference, you will find Mvc.SiteMap as a part of your project:

Site map with asp.net mvc

Here is what's inside:

<?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>

As the site map is added, it is time to make this breadcrumb dynamic. As we know, in ASP.NET MVC there are two default ActionLink references present - Home and About:

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

All I need to do is replace those with a reference to the site map provider:

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

That’s it. Once you visualize the site in your web browser, you will see that it has created the breadcrumb dynamically without writing any action link code.

BreadCumb with asp.net mvc

So here you can see that with MvcSiteMap we almost don’t have to write any code - we just need to add menu syntax and the rest will be done automatically.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
dotnet ,how-to ,microsoft ,tools ,web ,asp.net ,mvc ,net

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}