Getting Started
Congratulations, you have just installed MvcSiteMapProvider!
The NuGet package has added the default configuration to your application. Unless you are using .NET 3.5 or have installed a DI modules-only package, this configuration will start up automatically.
However, you still need to add the HTML helpers to your views to see it work. Let's get started by adding the following 2 HTML helpers to your /Views/Shared/Layout.cshtml or /Views/Shared/Layout.aspx page.
@Html.MvcSiteMap().Menu()
@Html.MvcSiteMap().SiteMapPath()
If you run your project, you will now see a menu that looks something like this:
Home About
And a breadcrumb trail that just shows:
Home
If you click the About link, you will see your breadcrumb trail change to the following (we are assuming you have a controller action on the HomeController named About and a corresponding view named /Views/Home/About.cshtml).
Home > About
Configuring Nodes
Next, let's add the Contact page to demonstrate how easy it is to add new pages to the configuration. Again, make sure your Home controller has a Contact action, like this:
public ActionResult Contact(int id)
{
ViewBag.Message = "Your contact page.";
return View();
}
And make sure you have added a view named /Views/Home/Contact.cshtml (or .aspx).
Open up the /Mvc.sitemap file and you will see that the default configuration looks like this.
<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0"
xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0 MvcSiteMapSchema.xsd">
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="About" controller="Home" action="About"/>
</mvcSiteMapNode>
</mvcSiteMap>
Add another node just below about, setting the title to "Contact Us", the controller to "Home", and the action to "Contact" as shown below.
<?xml version="1.0" encoding="utf-8" ?>
<mvcSiteMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0"
xsi:schemaLocation="http://mvcsitemap.codeplex.com/schemas/MvcSiteMap-File-4.0 MvcSiteMapSchema.xsd">
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="About" controller="Home" action="About"/>
<mvcSiteMapNode title="Contact Us" controller="Home" action="Contact"/>
</mvcSiteMapNode>
</mvcSiteMap>
Run your project again, and you will see that your menu now contains a Contact Us link. Click it and you will see that the breadcrumb trail now shows the path below.
Home > Contact Us
Don't like XML configuration?
Changing the Templates
Don't like the HTML elements that are output from these HTML helpers? Change them!
Navigate to the /Views/Shared/DisplayTemplates/ folder and you will see a list of templates that are used to build the HTML, as follows.
- CanonicalHelperModel
- MenuHelperModel
- MetaRobotsHelperModel
- SiteMapHelperModel
- SiteMapNodeModel
- SiteMapNodeModelList
- SiteMapPathHelperModel
- SiteMapTitleHelperModel
To edit the menu, have a look at the MenuHelperModel.cshtml file. The default looks like this:
@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
@foreach (var node in Model.Nodes) {
<li>@Html.DisplayFor(m => node)
@if (node.Children.Any()) {
@Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
It calls the SiteMapNodeModel in a loop. But we can easily copy the contents of SiteMapNodeModel into MySiteMapNode and then edit the code. Then we can just call our new template by editing MenuHelperModel as follows.
@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
@foreach (var node in Model.Nodes) {
<li>@Html.DisplayFor(m => node)
@if (node.Children.Any()) {
@Html.DisplayFor(m => node.Children, "MySiteMapNode")
}
</li>
}
</ul>
Automatic Sitemaps XML Generation
In addition to giving you HTML helpers, MvcSiteMapProvider keeps track of each of your URLs so they can be submitted to search engines using the standardized Sitemaps XML format.
This feature is automatically enabled by default, just navigate to the path /sitemap.xml in your browser to see the output from your configured nodes.
More Information
MvcSiteMapProvider does a lot more than we can describe on one page, and it can also be extended in many ways - you can even replace much of the default behavior with your own code. Read the full documentation on our wiki, or for a tutorial visit MvcSiteMapProvider - A Test Drive.
Extra Configuration Steps for .NET 3.5
For .NET 3.5, you need to manually add the code to launch MvcSiteMapProvider to your Application_Start() event of the /Global.asax file. There is only 1 line required.
MvcSiteMapProvider.DI.Composer.Compose();
After adding that line, MvcSiteMapProvider will launch when you run the application, as it would for .NET 4.0 or higher.
Extra Configuration Steps for External DI Modules Packages
There is a readme file that opens up automatically when you install one of these packages with the code to add to your composition root. In case you need to reference it again, you can view the readme files online at the following locations.