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
- 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
- ViewData(“Title”) = “Application Index”
- End Code
- <h2>Application Index</h2>
We will add another action to the application controller, let us call it SpecialApp
- 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
- 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
- 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
- <?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
- @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> > </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
- <body>
- @RenderBody()
- </body>
To
- <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
- <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
- 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
- <mvcSiteMapNodetitle=“Home“controller=“Home“action=“Index“key=“Home1“>
Then add attributes to the action method
- <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
