Click here to Skip to main content
13,248,562 members (77,016 online)
Click here to Skip to main content
Add your own
alternative version

Stats

42.8K views
1.9K downloads
28 bookmarked
Posted 14 Jul 2015

Breadcrumb in MVC

, 14 Jul 2015
Rate this:
Please Sign up or sign in to vote.
MvcSiteMapProvider Example

Introduction

In this article we are going to see how a breadcrumb can be created in MVC without much effort for a webapplication.

Background

Traditionally developers had to write JavaScript code to achieve a breadcrumb in web.  In MVC applications, implementing Breadcrumb is made much easier and all it requires is a NuGet Package and a configuration file.

Environment

The environment that I have used for this article is :

  • VS2013
  • Windows 8.1
  • .NET 4.5
  • MVC4
  • C#
  • Razor View Engine.

And I have created an empty MVC4 application.

NuGet Package Installation

Let us first install the NuGet package using the NuGet Package Manager Console as shown in below screen shot.

The command to install the package is:

Install-package MvcSiteMapProvider.MVC<version>

Since we are using MVC4 , we are going to use the following command

A Successful installation would give us the following message. If we haven’t received the successful message then we haven’t installed the required package.

Now we will see an assembly and a sitemap file as shown in the below screen shots.

Next step is to edit the mvc.sitemap file reflecting our actual website page structure. If we get this sitemap wrong the BreadCrumb will not work. The sitemap must have one parent node which is normally home page. All other nodes must be wrapped inside one parent node at least.

Note:

If any page points to a non-existing controller or action method then MVC will not throw any error but you will not see the sitemap for the page.  Also any duplicate pages would be ignored too.Therefore you have to be careful when you edit the sitemap file.

Page Structure

For this article, we are going to show the following messages area for our customer in the application.

  • Home
    • Messages
      • Inbox
      • Sent
      • Draft

         

The BreadCrumb can be implemented for the above page structure by editing the sitemap file by reflecting the same nested structure. The edited sitemap file is shown below.

 

 

Next we are going to add a layout , all the views and controllers required for our application. Now the project looks like the following

 

Breadcrumb Display

We are almost there. We have done everything to setup a breadcrumb on our site except that letting the system know where to show the breadcrumb.  The best place to keep it is the _Layout.cshtml because it is being shared by all other pages otherwise you have to keep it in every page which not a good of way of maintaining a project.

To show the breadcrumb all you have to do is

@Html.MvcSiteMap().SiteMapPath()

 

Now our _Layout.cshtml looks like the following

 

That’s it. We are ready to go. I am going to run our application and the following is the output. We are in the message landing page and we can go from here to Inbox, Sent or Draft messages pages.

Now let me go to the Sent messages page and we could see the breadcrumb automatically changes. The output is shown in the following screen shot.

Now if I click the Draft link from the messages landing the page then following is the output. Just one line of code in the view and it does the breadcrumb so effortlessly. Perfect!

 

We have successfully created a simple breadcrumb. So far so good but what if a page in the breadcrumb expects a value in the action method. Then we need to preserve the values between pages through breadcrumb links. Again MvcSiteMapProvider provides a simple solution to do this.

Preserving Values in Breadcrumb

Let’s look at another example to see how it works. I am going to expand our previous project to include another page structure to demonstrate preserving values. As you can see below I have added another set of pages for showing products that are available to the customers on the site.

  • Home
    • Messages
      • Inbox
      • Sent
      • Draft
    • Products
      • Product
        • Details
        • Edit

 

We need to edit the sitemap file to include this products page structure. The edited sitemap is given below.

 

Now I am going to add the model, controller and action methods required for the products pages. After adding the model and controllers the project looks like below.

 

 

Finally we need to pass the route values to the action methods through sitemap nodes. In this case the action methods Product, Details and Edit expect product id as parameter. So we need to tweak our sitemap a little to include the route values. After making those changes now our sitemap looks as follows.

 

 

Let us run the application and see the output now. The following screenshot shows the product details page and the Breadcrumb works great as per the sitemap file. But the only problem is that the breadcrumb is not very meaningful to users. This is not what we want to see but the actual product name instead of ‘Product’ in the breadcrumb. The MvcSiteMapProvider can only show the title in the mvcSiteMapNode from the sitemap file as Breadcrumb link.

So we need to change the breadcrumb link name programmatically according to our requirements.

 

Changing Breadcrumb Programmatically

Let us change the title of 'Product' in the sitemap programmatically to the name of the product selected from the list. To do that we need to add the following piece of code in the Product action method.

SiteMaps.Current.CurrentNode.Title = prod.Name;

 And the following code in the Details action method

var node = SiteMaps.Current.CurrentNode;

if (node != null && node.ParentNode != null)

{

   node.ParentNode.Title = prod.Name;

}

Now we are ready to see the changes in output for the same page. The output looks much better and is shown below

That's all folks. Hope you found it useful. If any questions please let me know by posting at bottom of this article,

Points of Interest

Attributes can also be used in action methods to create breadcrumbs dynamically but it is out of scope of this article.

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

John C Rayan
Engineer
United Kingdom United Kingdom
Areas of Expertise:

.NET, JAVA , SQL Server, Oracle, XML , SOA and WEB solutions.

* Microsoft certified in C# Programming.
* Microsoft certified Techology Specialist (ASP.NET)
* IBM certified in XML Technology
* Sun certified Java Programmer
* Sun certified Web Solution Developer

You may also be interested in...

Comments and Discussions

 
QuestionNot getting the line in layout file Pin
vijayalaya27-Dec-16 10:39
membervijayalaya27-Dec-16 10:39 
AnswerRe: Not getting the line in layout file Pin
John C Rayan30-Dec-16 4:13
professionalJohn C Rayan30-Dec-16 4:13 
QuestionHow to add multiple mvcsitemaps for different layouts Pin
Member 1267477923-Aug-16 5:40
memberMember 1267477923-Aug-16 5:40 
QuestionHow to change the Url dynamically? Pin
Nguyen Quy Minh4-Apr-16 7:30
memberNguyen Quy Minh4-Apr-16 7:30 
AnswerRe: How to change the Url dynamically? Pin
John C Rayan4-Apr-16 23:42
professionalJohn C Rayan4-Apr-16 23:42 
GeneralNice Article Pin
Alireza_136217-Feb-16 11:06
memberAlireza_136217-Feb-16 11:06 
GeneralRe: Nice Article Pin
John C Rayan17-Feb-16 21:20
professionalJohn C Rayan17-Feb-16 21:20 
Questionwhat if my MVC app has partial views. Pin
Vijay Kumar Raja Grandhi12-Feb-16 4:52
memberVijay Kumar Raja Grandhi12-Feb-16 4:52 
AnswerRe: what if my MVC app has partial views. Pin
John C Rayan12-Feb-16 22:41
professionalJohn C Rayan12-Feb-16 22:41 
GeneralRe: what if my MVC app has partial views. Pin
Vijay Kumar Raja Grandhi2-Jan-17 0:50
memberVijay Kumar Raja Grandhi2-Jan-17 0:50 
PraiseRe: what if my MVC app has partial views. Pin
John C Rayan9-Jan-17 4:47
professionalJohn C Rayan9-Jan-17 4:47 
QuestionMissing files? Pin
Boowman11-Dec-15 5:37
memberBoowman11-Dec-15 5:37 
AnswerRe: Missing files? Pin
John C Rayan11-Dec-15 6:28
professionalJohn C Rayan11-Dec-15 6:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171114.1 | Last Updated 15 Jul 2015
Article Copyright 2015 by John C Rayan
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid