Difficulties in making MvcSiteMap Provider work with a custom friendly SEO url

Question

How are you doing?

I'm having some difficulties in trying to configure a SEO-friendly url route that works properly with MvcSiteMap provider's Breadcrumb. Looks apparently simple but I'm getting lost due to my lack of experience with ASP.NET MVC along with SEO-related stuffs and with this component.

For studying purposes, I created a simple MVC WebSite in which I added the MVC SiteMap Provider package.

Here´s what I'm trying to achieve:

Given the url http://localhost:1234/product/the-product-name/1234, I want to display a breadcrumb that looks like this:

Home >> Products >> The product name

In order to the URL be produced this way, I created the following route:

routes.MapRoute(
  name: "SEO_Product",
  url: "product/{id}/{title}",
  defaults: new { controller = "Product", action = "Details" }
);

In Mvc.sitemap file, I created the following node structure:

<mvcSiteMapNode title="Home" controller="Home" action="Index">
    <mvcSiteMapNode title="Products" controller="Product" action="Index">
      <mvcSiteMapNode title="Details" controller="Product" action="Details" preservedRouteParameters="id" />
    </mvcSiteMapNode>
</mvcSiteMapNode>

Also, the Controller name is ProductController and the action method that receives the request is the following:

[SiteMapTitle("Title")]
public ActionResult Details(int id)
{
    var productSearchResult = productRepository.List(pr => pr.Id == id);
    var product = default(Product);

    if (productSearchResult.Item != null)
        product = productSearchResult.Item.FirstOrDefault();
    else
        RedirectToAction("Index");

    return View(product);
}

The breadcrumb renders successfully when I comment out the SEO_Product route above. However, the link generated to reach this page is an url like this:

http://localhost:50888/Product/Details/1?title=the-product-name (NOT DESIRED)

and when I uncomment the route aforementioned and run the app, the breadcrumb simply does not render!

I implemented the link to this page like this:

@Html.ActionLink(product.Title, "Details", new { title = product.UrlFriendlyTitle, id = product.Id },null)

I also tried to create an implementation of DynamicNodeProvider along with the adjustments to the Mvc.sitemap in an attempt to follow the instructions located at Maarten Balliauw's SiteMapProvider GitHub, but I got even more lost and received lots of yellow screens of death that are blowing my mind. And I'm not really sure if this is case of creating such feature for this matter.

I hope you guys can show me which direction I should go and I really appreciate your help.

Cristiano M Dias

NightOwl888 NightOwl888 · Accepted Answer · 2017-01-17T05:07:39

When configuring your nodes, you must account for every route value. Although you have configured id, you have not configured anything for title.

That said, title is a reserved key name in MvcSiteMapProvider. So you need to choose another name (such as productTitle) as the route key.

routes.MapRoute(
  name: "SEO_Product",
  url: "product/{id}/{productTitle}",
  defaults: new { controller = "Product", action = "Details" }
);

Then account for the productTitle parameter in your node configuration. This ensures it will match when a productTitle route value is passed.

<mvcSiteMapNode title="Home" controller="Home" action="Index">
    <mvcSiteMapNode title="Products" controller="Product" action="Index">
      <mvcSiteMapNode title="Details" controller="Product" action="Details" preservedRouteParameters="id,productTitle" />
    </mvcSiteMapNode>
</mvcSiteMapNode>

And your link should also use productTitle.

@Html.ActionLink(product.Title, "Details", new { productTitle = product.UrlFriendlyTitle, id = product.Id },null)

NOTE: To get the URL you have in your question, you will need to change the route to product/{productTitle}/{id}.

Difficulties in making MvcSiteMap Provider work with a custom friendly SEO url

1 Answers