Breadcrumb in MVC

• Download MVCBreadCrump-noexe.zip - 6.5 MB
• Download MVCBreadCrump.zip - 6.5 MB

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.