How can dynamic breadcrumbs be achieved with ASP.net MVC?

asp.net MvcBreadcrumbs

asp.net Mvc Problem Overview

How can dynamic breadcrumbs be achieved with ASP.net MVC?

If you are curious about what breadcrumbs are:

> What are breadcrumbs? Well, if you have ever browsed an online store or read posts in a forum, you have likely encountered breadcrumbs. They provide an easy way to see where you are on a site. Sites like Craigslist use breadcrumbs to describe the user's location. Above the listings on each page is something that looks like this: > > s.f. bayarea craigslist > city of san francisco > bicycles

EDIT

I realize what is possible with the SiteMapProvider. I am also aware of the providers out there on the net that will let you map sitenodes to controllers and actions.

But, what about when you want a breadcrumb's text to match some dynamic value, like this:

> Home > Products > Cars > Toyota > > Home > Products > Cars > Chevy > > Home > Products > Execution Equipment > Electric Chair > > Home > Products > Execution Equipment > Gallows

... where the product categories and the products are records from a database. Some links should be defined statically (Home for sure).

I am trying to figure out how to do this, but I'm sure someone has already done this with ASP.net MVC.

asp.net Mvc Solutions

Solution 1 - asp.net Mvc

Sitemap's are definitely one way to go... alternatively, you can write one yourself! (of course as long as standard MVC rules are followed)... I just wrote one, I figured I would share here.

@Html.ActionLink("Home", "Index", "Home")
@if(ViewContext.RouteData.Values["controller"].ToString() != "Home") {
    @:> @Html.ActionLink(ViewContext.RouteData.Values["controller"].ToString(), "Index", ViewContext.RouteData.Values["controller"].ToString()) 
}
@if(ViewContext.RouteData.Values["action"].ToString() != "Index"){
    @:> @Html.ActionLink(ViewContext.RouteData.Values["action"].ToString(), ViewContext.RouteData.Values["action"].ToString(), ViewContext.RouteData.Values["controller"].ToString()) 
}

Hopefully someone will find this helpful, this is exactly what I was looking for when I searched SO for MVC breadcrumbs.

Solution 2 - asp.net Mvc

ASP.NET 5 (aka ASP.NET Core), MVC Core Solution

In ASP.NET Core, things are further optimized as we don't need to stringify the markup in the extension method.

In ~/Extesions/HtmlExtensions.cs:

using System.Text.RegularExpressions;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace YourProjectNamespace.Extensions
{
    public static class HtmlExtensions
    {
        private static readonly HtmlContentBuilder _emptyBuilder = new HtmlContentBuilder();

        public static IHtmlContent BuildBreadcrumbNavigation(this IHtmlHelper helper)
        {
            if (helper.ViewContext.RouteData.Values["controller"].ToString() == "Home" ||
                helper.ViewContext.RouteData.Values["controller"].ToString() == "Account")
            {
                return _emptyBuilder;
            }

            string controllerName = helper.ViewContext.RouteData.Values["controller"].ToString();
            string actionName = helper.ViewContext.RouteData.Values["action"].ToString();

            var breadcrumb = new HtmlContentBuilder()
                                .AppendHtml("<ol class='breadcrumb'><li>")
                                .AppendHtml(helper.ActionLink("Home", "Index", "Home"))
                                .AppendHtml("</li><li>")
                                .AppendHtml(helper.ActionLink(controllerName.Titleize(),
                                                          "Index", controllerName))
                                .AppendHtml("</li>");


            if (helper.ViewContext.RouteData.Values["action"].ToString() != "Index")
            {
                breadcrumb.AppendHtml("<li>")
                          .AppendHtml(helper.ActionLink(actionName.Titleize(), actionName, controllerName))
                          .AppendHtml("</li>");
            }

            return breadcrumb.AppendHtml("</ol>");
        }
    }
}

~/Extensions/StringExtensions.cs remains the same as below (scroll down to see the MVC5 version).

In razor view, we don't need Html.Raw, as Razor takes care of escaping when dealing with IHtmlContent:

....
....
<div class="container body-content">

    <!-- #region Breadcrumb -->
    @Html.BuildBreadcrumbNavigation()
    <!-- #endregion -->

    @RenderBody()
    <hr />
...
...
ASP.NET 4, MVC 5 Solution

=== ORIGINAL / OLD ANSWER BELOW ===

(Expanding on Sean Haddy's answer above)

If you want to make it extension-driven (keeping Views clean), you can do something like:

In ~/Extesions/HtmlExtensions.cs:

(compatible with MVC5 / bootstrap)

using System.Text;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace YourProjectNamespace.Extensions
{
    public static class HtmlExtensions
    {
        public static string BuildBreadcrumbNavigation(this HtmlHelper helper)
        {
            // optional condition: I didn't wanted it to show on home and account controller
            if (helper.ViewContext.RouteData.Values["controller"].ToString() == "Home" ||
                helper.ViewContext.RouteData.Values["controller"].ToString() == "Account")
            {
                return string.Empty;
            }

            StringBuilder breadcrumb = new StringBuilder("<ol class='breadcrumb'><li>").Append(helper.ActionLink("Home", "Index", "Home").ToHtmlString()).Append("</li>");


            breadcrumb.Append("<li>");
            breadcrumb.Append(helper.ActionLink(helper.ViewContext.RouteData.Values["controller"].ToString().Titleize(),
                                               "Index",
                                               helper.ViewContext.RouteData.Values["controller"].ToString()));
            breadcrumb.Append("</li>");

            if (helper.ViewContext.RouteData.Values["action"].ToString() != "Index")
            {
                breadcrumb.Append("<li>");
                breadcrumb.Append(helper.ActionLink(helper.ViewContext.RouteData.Values["action"].ToString().Titleize(),
                                                    helper.ViewContext.RouteData.Values["action"].ToString(),
                                                    helper.ViewContext.RouteData.Values["controller"].ToString()));
                breadcrumb.Append("</li>");
            }

            return breadcrumb.Append("</ol>").ToString();
        }
    }
}

In ~/Extensions/StringExtensions.cs:

using System.Globalization;
using System.Text.RegularExpressions;

namespace YourProjectNamespace.Extensions
{
    public static class StringExtensions
    {
        public static string Titleize(this string text)
        {
            return CultureInfo.CurrentCulture.TextInfo.ToTitleCase(text).ToSentenceCase();
        }

        public static string ToSentenceCase(this string str)
        {
            return Regex.Replace(str, "[a-z][A-Z]", m => m.Value[0] + " " + char.ToLower(m.Value[1]));
        }
    }
}

Then use it like (in _Layout.cshtml for example):

....
....
<div class="container body-content">

    <!-- #region Breadcrumb -->
    @Html.Raw(Html.BuildBreadcrumbNavigation())
    <!-- #endregion -->

    @RenderBody()
    <hr />
...
...

Solution 3 - asp.net Mvc

There is a tool to do this on codeplex: http://mvcsitemap.codeplex.com/ [project moved to github]

Edit:

There is a way to derive a SiteMapProvider from a database: http://www.asp.net/Learn/data-access/tutorial-62-cs.aspx

You might be able to modify the mvcsitemap tool to use that to get what you want.

Solution 4 - asp.net Mvc

I built this nuget package to solve this problem for myself:

https://www.nuget.org/packages/MvcBreadCrumbs/

You can contribute here if you have ideas for it:

https://github.com/thelarz/MvcBreadCrumbs

Solution 5 - asp.net Mvc

For those using ASP.NET Core 2.0 and looking for a more decoupled approach than vulcan's HtmlHelper, I recommend having a look at using a partial view with dependency injection.

Below is a simple implementation which can easily be molded to suit your needs.

The breadcrumb service (./Services/BreadcrumbService.cs):

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using System;
using System.Collections.Generic;

namespace YourNamespace.YourProject
{  
  public class BreadcrumbService : IViewContextAware
  {
    IList<Breadcrumb> breadcrumbs;

    public void Contextualize(ViewContext viewContext)
    {
      breadcrumbs = new List<Breadcrumb>();

      string area = $"{viewContext.RouteData.Values["area"]}";
      string controller = $"{viewContext.RouteData.Values["controller"]}";
      string action = $"{viewContext.RouteData.Values["action"]}";
      object id = viewContext.RouteData.Values["id"];
      string title = $"{viewContext.ViewData["Title"]}";   

      breadcrumbs.Add(new Breadcrumb(area, controller, action, title, id));

      if(!string.Equals(action, "index", StringComparison.OrdinalIgnoreCase))
      {
        breadcrumbs.Insert(0, new Breadcrumb(area, controller, "index", title));
      }
    }

    public IList<Breadcrumb> GetBreadcrumbs()
    {
      return breadcrumbs;
    }
  }

  public class Breadcrumb
  {
    public Breadcrumb(string area, string controller, string action, string title, object id) : this(area, controller, action, title)
    {
      Id = id;
    }

    public Breadcrumb(string area, string controller, string action, string title)
    {
      Area = area;
      Controller = controller;
      Action = action;
      
      if (string.IsNullOrWhiteSpace(title))
	  {
	     Title = Regex.Replace(CultureInfo.CurrentCulture.TextInfo.ToTitleCase(string.Equals(action, "Index", StringComparison.OrdinalIgnoreCase) ? controller : action), "[a-z][A-Z]", m => m.Value[0] + " " + char.ToLower(m.Value[1]));
	  }
	  else
	  {
	     Title = title;
	  } 
    }

    public string Area { get; set; }
    public string Controller { get; set; }
    public string Action { get; set; }
    public object Id { get; set; }
    public string Title { get; set; }
  }
}

Register the service in startup.cs after AddMvc():

public void ConfigureServices(IServiceCollection services)
{
	services.AddMvc();

	services.AddTransient<BreadcrumbService>();

Create a partial to render the breadcrumbs (~/Views/Shared/Breadcrumbs.cshtml):

@using YourNamespace.YourProject.Services
@inject BreadcrumbService BreadcrumbService

@foreach(var breadcrumb in BreadcrumbService.GetBreadcrumbs())
{
	<a asp-area="@breadcrumb.Area" asp-controller="@breadcrumb.Controller" asp-action="@breadcrumb.Action" asp-route-id="@breadcrumb.Id">@breadcrumb.Title</a>
}

At this point, to render the breadcrumbs simply call Html.Partial("Breadcrumbs") or Html.PartialAsync("Breadcrumbs").

Solution 6 - asp.net Mvc

Maarten Balliauw's MvcSiteMapProvider worked pretty well for me.

I created a small mvc app to test his provider: MvcSiteMapProvider Test (404)

Solution 7 - asp.net Mvc

For whoever is interested, I did an improved version of a HtmlExtension that is also considering Areas and in addition uses Reflection to check if there is a Default controller inside an Area or a Index action inside a Controller:

public static class HtmlExtensions
	{
		public static MvcHtmlString BuildBreadcrumbNavigation(this HtmlHelper helper)
		{
			string area = (helper.ViewContext.RouteData.DataTokens["area"] ?? "").ToString();
			string controller = helper.ViewContext.RouteData.Values["controller"].ToString();
			string action = helper.ViewContext.RouteData.Values["action"].ToString();

			// add link to homepage by default
			StringBuilder breadcrumb = new StringBuilder(@"
				<ol class='breadcrumb'>
					<li>" + helper.ActionLink("Homepage", "Index", "Home", new { Area = "" }, new { @class="first" }) + @"</li>");

			// add link to area if existing
			if (area != "")
			{
				breadcrumb.Append("<li>");
				if (ControllerExistsInArea("Default", area)) // by convention, default Area controller should be named Default
				{
					breadcrumb.Append(helper.ActionLink(area.AddSpaceOnCaseChange(), "Index", "Default", new { Area = area }, new { @class = "" }));
				}
				else
				{
					breadcrumb.Append(area.AddSpaceOnCaseChange());
				}
				breadcrumb.Append("</li>");
			}

			// add link to controller Index if different action
			if ((controller != "Home" && controller != "Default") && action != "Index")
			{
				if (ActionExistsInController("Index", controller, area))
				{
					breadcrumb.Append("<li>");
					breadcrumb.Append(helper.ActionLink(controller.AddSpaceOnCaseChange(), "Index", controller, new { Area = area }, new { @class = "" }));
					breadcrumb.Append("</li>");
				}
			}

			// add link to action
			if ((controller != "Home" && controller != "Default") || action != "Index")
			{
				breadcrumb.Append("<li>");
				//breadcrumb.Append(helper.ActionLink((action.ToLower() == "index") ? controller.AddSpaceOnCaseChange() : action.AddSpaceOnCaseChange(), action, controller, new { Area = area }, new { @class = "" }));
				breadcrumb.Append((action.ToLower() == "index") ? controller.AddSpaceOnCaseChange() : action.AddSpaceOnCaseChange());
				breadcrumb.Append("</li>");
			}
			
			return MvcHtmlString.Create(breadcrumb.Append("</ol>").ToString());
		}

		public static Type GetControllerType(string controller, string area)
		{
			string currentAssembly = Assembly.GetExecutingAssembly().GetName().Name;
			IEnumerable<Type> controllerTypes = Assembly.GetExecutingAssembly().GetTypes().Where(o => typeof(IController).IsAssignableFrom(o));

			string typeFullName = String.Format("{0}.Controllers.{1}Controller", currentAssembly, controller);
			if (area != "")
			{
				typeFullName = String.Format("{0}.Areas.{1}.Controllers.{2}Controller", currentAssembly, area, controller);
			}

			return controllerTypes.Where(o => o.FullName == typeFullName).FirstOrDefault();
		}

		public static bool ActionExistsInController(string action, string controller, string area)
		{
			Type controllerType = GetControllerType(controller, area);
			return (controllerType != null && new ReflectedControllerDescriptor(controllerType).GetCanonicalActions().Any(x => x.ActionName == action));
		}

		public static bool ControllerExistsInArea(string controller, string area)
		{
			Type controllerType = GetControllerType(controller, area);
			return (controllerType != null);
		}
	

	public static string AddSpaceOnCaseChange(this string text)
	{
		if (string.IsNullOrWhiteSpace(text))
			return "";
		StringBuilder newText = new StringBuilder(text.Length * 2);
		newText.Append(text[0]);
		for (int i = 1; i < text.Length; i++)
		{
			if (char.IsUpper(text[i]) && text[i - 1] != ' ')
				newText.Append(' ');
			newText.Append(text[i]);
		}
		return newText.ToString();
	}
}

If can definitely can be improved (probably does not cover all the possible cases), but it did not failed me until now.

Categories
Recommended asp.net Mvc Solutions
Recommended Breadcrumbs Solutions

Previous Solution:

Facebook offline access step-by-step

JavaFacebookOffline

Next Solution:

How to automatically remove all .orig files in Mercurial working tree?

MercurialDvcsPurge

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRonnie OverbyView Question on Stackoverflow
Solution 1 - asp.net MvcSean HaddyView Answer on Stackoverflow
Solution 2 - asp.net Mvcvulcan ravenView Answer on Stackoverflow
Solution 3 - asp.net MvcICodeForCoffeeView Answer on Stackoverflow
Solution 4 - asp.net MvcLarzView Answer on Stackoverflow
Solution 5 - asp.net MvcpimView Answer on Stackoverflow
Solution 6 - asp.net MvcRonnie OverbyView Answer on Stackoverflow
Solution 7 - asp.net MvcSmartDevView Answer on Stackoverflow