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
image

image

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.

image

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

image

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

Add HomeController

image

Add the view for Index Action

image

Update the Index.vbhtml to

Code Snippet
  1. @Code
  2. ViewData(“Title”) = “Home Index”
  3. End Code
  4. <h2>Home Index</h2>

Add another controller call it application

image

Add the view for Index action in the application controller

image

Update Application Index.vbhtml to look like below

Code Snippet
  1. @Code
  2. ViewData(“Title”) = “Application Index”
  3. End Code
  4. <h2>Application Index</h2>

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

Code Snippet
  1. Function SpecialApp(ByVal id As Integer) As ActionResult
  2. ViewBag.appId = id
  3. Return View()
  4. End Function

Add a view to the SpecialApp action as described before

Code Snippet
  1. @Code
  2. ViewData(“Title”) = “SpecialApp”
  3. End Code
  4. @ViewBag.appId
  5. <h2>SpecialApp</h2>

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

Code Snippet
  1. @Code
  2. ViewData(“Title”) = “Accounts Page”
  3. End Code
  4. <h2>Acoounts Page</h2>

Now let us add the Mvc.sitemap

image

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

image

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

image

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

Code Snippet
  1. <?xmlversion=1.0encoding=utf-8 ?>
  2. <mvcSiteMapxmlns=http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-3.0enableLocalization=true>
  3.   <mvcSiteMapNodetitle=Homecontroller=Homeaction=Index>
  4.     <mvcSiteMapNodetitle=Applicationcontroller=Applicationaction=Index>
  5.       <mvcSiteMapNodetitle=Special Applicationscontroller=Applicationaction=SpecialApp/>
  6.     </mvcSiteMapNode>
  7.       <mvcSiteMapNodetitle=Accounts Pagecontroller=Accountaction=Index/>
  8.   </mvcSiteMapNode>
  9. </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

image

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
  1. @imports System.Web.Mvc.Html
  2. @imports System.Linq
  3. @imports MvcSiteMapProvider.Web.Html.Models
  4. @ModelType SiteMapPathHelperModel
  5. @For Each node In Model
  6. @Html.ActionLink(node.Title, Nothing, New With {.Controller = node.Controller, .action = node.Action})
  7. If node IsNot Model.Last() Then
  8. @<text> &gt; </text>
  9. End If
  10. 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
  1. <body>
  2. @RenderBody()
  3. </body>

To

Code Snippet
  1. <body>
  2. <p>Breadcrumbs:</p>
  3. @Html.MvcSiteMap().SiteMapPath()
  4. @RenderBody()
  5. </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
  1. <siteMapdefaultProvider=MvcSiteMapProviderenabled=true>
  2. <providers>
  3. <clear />
  4. <addname=MvcSiteMapProvidertype=MvcSiteMapProvider.DefaultSiteMapProvider, MvcSiteMapProvidersiteMapFile=~/Mvc.SitemapsecurityTrimmingEnabled=truecacheDuration=5enableLocalization=truescanAssembliesForSiteMapNodes=trueincludeAssembliesForScan=“”excludeAssembliesForScan=“”attributesToIgnore=visibilitynodeKeyGenerator=MvcSiteMapProvider.DefaultNodeKeyGenerator, MvcSiteMapProvidercontrollerTypeResolver=MvcSiteMapProvider.DefaultControllerTypeResolver, MvcSiteMapProvideractionMethodParameterResolver=MvcSiteMapProvider.DefaultActionMethodParameterResolver, MvcSiteMapProvideraclModule=MvcSiteMapProvider.DefaultAclModule, MvcSiteMapProvidersiteMapNodeUrlResolver=MvcSiteMapProvider.DefaultSiteMapNodeUrlResolver, MvcSiteMapProvidersiteMapNodeVisibilityProvider=MvcSiteMapProvider.DefaultSiteMapNodeVisibilityProvider, MvcSiteMapProvidersiteMapProviderEventHandler=MvcSiteMapProvider.DefaultSiteMapProviderEventHandler, MvcSiteMapProvider />
  5. </providers>
  6. </siteMap>

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

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
  1. Function HomeApp(ByVal id As Integer) As ActionResult
  2. ViewBag.appId = id
  3. Return View()
  4. 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
  1. <mvcSiteMapNodetitle=Homecontroller=Homeaction=Indexkey=Home1>

Then add attributes to the action method

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

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s