mvc sitemapprovider hash fragment

Question

I'm using sitemapprovider to implement breadcrumbs in my MVC4 application. I need to add an hash fragment val

<mvcSiteMapNode title="Funds" controller="VcTransfer" action="Index/#"      preservedRouteParameters="">
 <mvcSiteMapNode title="Funds transfer" controller="VcTransfer" action="Index"  preservedRouteParameters="id" />
</mvcSiteMapNode>

I want the same result route as :

Redirect(Url.Action("Index", "VcTransfer") + "#Network-tab");

I hope I've been clear, thanks in advance!!

edit: the end result should appear like this:

(http:)//localhost:8080/VcTransfer/Index#Network-tab

Answer 1

A fragment is processed by the browser but not posted back to the server, so it doesn't actually "count" when it comes to making the URL unique. Therefore, if you have multiple nodes that only differ by fragment, it would not be possible for MvcSiteMapProvider to tell them apart and it would always match the first node registered regardless of which one you select.

This basically means your breadcrumb won't change and the selected menu item won't change when an alternate fragment is selected. This isn't a bug, it is just not possible to do.

However, if you need to add the fragment for some other reason than navigation (javascript support for example), you can accomplish this by adding a custom attribute to the node and then modifying the node template to output the fragment in the view.

First, add a custom attribute to the node.

<mvcSiteMapNode title="Funds" controller="VcTransfer" action="Index" fragment="Network-tab">

Then make sure that you add the name of the custom attribute to as an attribute to ignore or it will appear in your URL as a query string parameter instead of a fragment.

Internal DI (root web.config):

<appSettings>
    <add key="MvcSiteMapProvider_AttributesToIgnore" value="fragment"/>
</appSettings>

External DI:

this.For<IReservedAttributeNameProvider>().Use<ReservedAttributeNameProvider>()
    .Ctor<IEnumerable<string>>("attributesToIgnore").Is(new string[] { "fragment" });

Then modify your /Views/Shared/DisplayTemplates/SiteMapNodeModel.cshtml file as shown below to output the fragment when it exists on the node.

@model MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models

@{
    var fragment = (Model.Attributes["fragment"] != null) ? "#" + Model.Attributes["fragment"] : "";
    var url = Model.Url + fragment;
}

@if (Model.IsCurrentNode && Model.SourceMetadata["HtmlHelper"].ToString() != "MvcSiteMapProvider.Web.Html.MenuHelper")  { 
    <text>@Model.Title</text>
} else if (Model.IsClickable) { 
    if (string.IsNullOrEmpty(Model.Description))
    {
        <a href="@url">@Model.Title</a>
    }
    else
    {
        <a href="@url" title="@Model.Description">@Model.Title</a>
    }
} else { 
    <text>@Model.Title</text>
}

Answer 2

Thanks! In the meantime, I found a workaround,but it's specific to my situation:

switch (window.location.hash.toString()) {
            case '#Network-tab':
                //alert('Network-navTab');
                $("#Network-navTab").addClass("active");
                $("#Network-tab").addClass("active in");
                break;
            case '#Network_Company-tab':
                //alert('Network_Company-navTab');
                $("#Network_Company-navTab").addClass("active");
                $("#Network_Company-tab").addClass("active in");
                break;
            case '#Company_Skin-tab':
                //alert('Company_Skin-navTab');
                $("#Company_Skin-navTab").addClass("active");
                $("#Company_Skin-tab").addClass("active in");
                break;
            case '#Skin_Player-tab':
                //alert('Skin_Player-navTab');
                $("#Skin_Player-navTab").addClass("active");
                $("#Skin_Player-tab").addClass("active in");
                    break;
            default:
                $("#Network-navTab").addClass("active");
                $("#Network-tab").addClass("active in");
                break;

        }

I've put the hash corresponding to the menu link in the default case of the switch,so in this case I don't have to check for the hash the first time I load the view...in the other cases, I set the hash in the route during the postback... but thanks again! I'll bookmark your answer for when I won't be able to do this :)