MvcSiteMap Provider BreadCrumbs

The below demo will show how to use MvcSiteMap Provider to do breadcrumbs in your MVC web project

Start with an empty MVC3 web application

There are a couple ways to get to MvcSiteMap
1. Using NuGet
2. Manually configuring MvcSiteMap Provider

If you use NuGet most of the work will be done for you, open the Package Manager Console and type in the following command and hit enter

PM> Install-Package MvcSiteMapProvider

The dll will be downloaded,MVC.SiteMap will be created, references will be added and a few web.config file entries will be made. If you wish to do it all by yourself then follow option 2

Manually configuring MvcSiteMap Provider

Download the dll from http://mvcsitemap.codeplex.com/

To your empty Mvc project add reference to MvcSiteMapProvider.dll by browsing to the location where you downloaded the dll.

Make sure CopyLocal is set to true, by default it is set to false.

Let us add few controllers and views to test out the breadcrumbs

Add HomeController

Add the view for Index Action

Update the Index.vbhtml to

Code Snippet

@Code
ViewData(“Title”) = “Home Index”
End Code
<h2>Home Index</h2>

Add another controller call it application

Add the view for Index action in the application controller

Update Application Index.vbhtml to look like below

Code Snippet

@Code
ViewData(“Title”) = “Application Index”
End Code
<h2>Application Index</h2>

We will add another action to the application controller, let us call it SpecialApp

Code Snippet

Function SpecialApp(ByVal id As Integer) As ActionResult
ViewBag.appId = id
Return View()
End Function

Add a view to the SpecialApp action as described before

Code Snippet

@Code
ViewData(“Title”) = “SpecialApp”
End Code
@ViewBag.appId
<h2>SpecialApp</h2>

Let us add another controller called Account and then add Index view for this controller

Code Snippet

@Code
ViewData(“Title”) = “Accounts Page”
End Code
<h2>Acoounts Page</h2>

Now let us add the Mvc.sitemap

As you can see now I have 3 controllers and few views

But the way I want to arrange my website is as below

In order to achieve this let us modify the Mvc.sitemap to

Code Snippet

<?xmlversion=“1.0“encoding=“utf-8“ ?>
<mvcSiteMapxmlns=“http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0“enableLocalization=“true“>
  <mvcSiteMapNodetitle=“Home“controller=“Home“action=“Index“>
    <mvcSiteMapNodetitle=“Application“controller=“Application“action=“Index“>
      <mvcSiteMapNodetitle=“Special Applications“controller=“Application“action=“SpecialApp“/>
    </mvcSiteMapNode>
      <mvcSiteMapNodetitle=“Accounts Page“controller=“Account“action=“Index“/>
  </mvcSiteMapNode>
</mvcSiteMap>

Now to show the breadcrumbs you need to add a template view called SiteMapPathHelperModel.vbhtml, before that right click the project select properties and add MvcSiteMapProvider.web.html and add MvcSiteMapProvider.Web.Html.Models to the imported namespaces

Under the shared folder make a new folder called DisplayTemplates (I had big problems since I had space between Display and Templates so make sure there is not space) and then add a new view call it SiteMapPathHelperModel.vbhtml

Code Snippet

@imports System.Web.Mvc.Html
@imports System.Linq
@imports MvcSiteMapProvider.Web.Html.Models
@ModelType SiteMapPathHelperModel
@For Each node In Model
@Html.ActionLink(node.Title, Nothing, New With {.Controller = node.Controller, .action = node.Action})
If node IsNot Model.Last() Then
@<text> &gt; </text>
End If
Next

Here for each node I make an html actionLink, then add a > sign except for the last node
Now in order to display the breadcrumbs lets edit the _Layout.vbhtml,
Add @imports MvcSiteMapProvider.Web.Html

Change

Code Snippet

<body>
@RenderBody()
</body>

Code Snippet

<body>
<p>Breadcrumbs:</p>
@Html.MvcSiteMap().SiteMapPath()
@RenderBody()
</body>

Now when you run the application you will see the error screen “The file web.sitemap required by XmlSiteMapProvider does not exist”.
That is because we have still not told the Framework what SiteMapProvider we are using. In order to do that open the application web.config file and place the below code inside system.web tag

Code Snippet

<siteMapdefaultProvider=“MvcSiteMapProvider“enabled=“true“>
<providers>
<clear />
<addname=“MvcSiteMapProvider“type=“MvcSiteMapProvider.DefaultSiteMapProvider, MvcSiteMapProvider“siteMapFile=“~/Mvc.Sitemap“securityTrimmingEnabled=“true“cacheDuration=“5“enableLocalization=“true“scanAssembliesForSiteMapNodes=“true“includeAssembliesForScan=“”excludeAssembliesForScan=“”attributesToIgnore=“visibility“nodeKeyGenerator=“MvcSiteMapProvider.DefaultNodeKeyGenerator, MvcSiteMapProvider“controllerTypeResolver=“MvcSiteMapProvider.DefaultControllerTypeResolver, MvcSiteMapProvider“actionMethodParameterResolver=“MvcSiteMapProvider.DefaultActionMethodParameterResolver, MvcSiteMapProvider“aclModule=“MvcSiteMapProvider.DefaultAclModule, MvcSiteMapProvider“siteMapNodeUrlResolver=“MvcSiteMapProvider.DefaultSiteMapNodeUrlResolver, MvcSiteMapProvider“siteMapNodeVisibilityProvider=“MvcSiteMapProvider.DefaultSiteMapNodeVisibilityProvider, MvcSiteMapProvider“siteMapProviderEventHandler=“MvcSiteMapProvider.DefaultSiteMapProviderEventHandler, MvcSiteMapProvider“ />
</providers>
</siteMap>

When you run the application you will see, the breadcrumbs show up

Using attributes

MvcSiteMap Provider also as the ability to mark the action methods with attributes to link up the sitemap. Let us say I have an action called HomeApp in the application controller

Code Snippet

Function HomeApp(ByVal id As Integer) As ActionResult
ViewBag.appId = id
Return View()
End Function

but I want this link to show up after the home index in the breadcrumbs. What I need to do is add a key to the home node as below

Code Snippet

<mvcSiteMapNodetitle=“Home“controller=“Home“action=“Index“key=“Home1“>

Then add attributes to the action method

Code Snippet

<MvcSiteMapNode(Title:=“Home Applications”, ParentKey:=“Home1”)>
Function HomeApp(ByVal id As Integer) As ActionResult
ViewBag.appId = id
Return View()
End Function

You will have to add Imports MvcSiteMapProvider at the top of the controller
Now when you run the app

Rev.Log

Rev's Journal

MvcSiteMap Provider BreadCrumbs

Like this:

Related

Leave a Reply Cancel reply