Navigation in DD4T

There always been a question on What is the best approach for building navigation with DD4T and ASP.NET MVC?

Answer is: There is TridionSiteMapProvider as part of the DD4T.Mvc project, which can be used out of the box. The  DD4T.Examples.Templates project also have a example on how Sitemap can be generated from the template (TBB)

Many organization will have different kinds of navigation structure, It can be from very simple structure or it can be a heavily complex in nature. In this article you can see how the default SitemapProvider can be used and how we could customize to achieve complex Navigations like Megamenu or similar using TridionSiteMapProvider.

Setting up the default TridionSiteMapProvider

The only configuration you would need to do in web.config is set the your default sitemap provider is as below.

<system.web>
  <siteMap defaultProvider="TridionSiteMapProvider" enabled="true">
    <providers>
      <clear/>
      <add name="TridionSiteMapProvider" type="DD4T.Mvc.Providers.TridionSiteMapProvider, DD4T.Mvc"/>
    </providers>
  </siteMap>
</system.web>

By default the sitemap path url looks in /system/sitemap/sitemap.xml, or based on web config.

In the example project, you have an Html extension to render the sitemap, it will return just the Html list. This helper can be called as @Html.SiteMapMenu(MenuType.Top)

In simple, it works as below diagram.

Customizing the default TridionSiteMapProvider

The TridionSiteMapProvider out of box is handling most of the scenarios; Sometime when we work with Mega menu or complex navigation, we might have the situation to handle more data other than normal sitemap node attributes. Below I am intent to explain how we could customize the TridionSiteMapProvider.
I have a custom TBB which generate a sitemap.xml or navigation.xml looks something like below by navigating the structure.

<root>
  <node id="tcm:8-4450-4" title="010. Personal" url="/en/personal/" description="tcm:8-337-64" compTitle="Personal Site" vanityURL="">
   <navTitle>Personal</navTitle>
    <NavConf>
      <NavUseFulLinks>
        <UseFulLinks>
          <Links>
            <Title>Utility Links for Personal</Title><TitleComponentLink>tcm:8-1224</TitleComponentLink>
            <Links>
              <LinkText>Some Text</LinkText>
              <ComponentLink>tcm:8-1000</ComponentLink>
            </Links>
            <Links>
              <LinkText>Some title text</LinkText>
              <ComponentLink>tcm:8-1018</ComponentLink>
        </Links>
            <Links>
              <LinkText>Some Title Text</LinkText>
              <ComponentLink>tcm:8-1950</ComponentLink>
            </Links></Links>
        </UseFulLinks>
      </NavUseFulLinks>
    </NavConf>
  </node>
</root>

In above xml, I have additional Node named NavConf with some more utilities links, which are obtained from Page Metadata. In such scenarios we could add the custom property to TridionSiteMapNode and then we can customize our sitemap helper to return the custom view template based on request.

In above scenario I have add a new Property named NavConf, in the class TridionSiteMapNode, and then In the TridionSiteMapProvider.cs class, I have customized the CreateNodeFromElement method to looks like below,

SiteMapNode childNode = new TridionSiteMapNode(this,
element.Attribute("id").Value, //key
uri,
element.Attribute("url") != null ? element.Attribute("url").Value : "", //url
element.Attribute("title") != null ? element.Attribute("title").Value : "", //title
element.Attribute("description") != null ? element.Attribute("description").Value : "", //description
null, //roles
attributes, //attributes
null, //explicitresourceKeys
null
)
{
Level = currentLevel,
NavConf = element.Element("NavConf") != null ? element.Element("NavConf") : null
}; 

The default navigation Helper class can be customized more generic so that we can customize the html in the view rather than in the Helper class. The extension CreateHtmlHelperForModel below will return the template view from the shared template folder based on the request e.g: Top, Left or Full. Only concern is you should have the below views on the Shared folder, because the Template will look for the view in DisplayTemplate Folder.

Creating NavigationHelper class

  public static class NavigationHelper
  {
      
        public static MvcHtmlString Navigation(this HtmlHelper helper,SiteMapNode rootNode, IPage page, NavigationTypes navigationType, string navigationXml = "/system/include/navigation.xml")
        {
            var langauge = helper.ViewContext.RouteData.Values["language"] as string;
            navigationXml = string.Format("/{0}/{1}", langauge, "system/include/navigation.xml");
            string template = string.Empty;
            switch (navigationType)
            {
                case NavigationTypes.Top:
                    template = "TopNavigation";
                    break;
                case NavigationTypes.Left:
                    template = "LeftNavigation";
                    break;
                case NavigationTypes.Right:
                    template = "RightNavigation";
                    break;
            }

         //   XmlDocument model = Utilities.GetXmlFile(navigationXml);

            var navigationHelper = new NavigationHtmlHelper(helper);
            return navigationHelper.CreateHtmlHelperForModel(rootNode).DisplayFor(x => rootNode, template,
                new
                {
                    NavParent = page.StructureGroup.Id,
                    PageUri = page.Id,
                    PublicationUri = page.Publication.Id
                }
            );
        }
    }

    public enum NavigationTypes
    {
        Top,
        Left,
        Bottom,
        Right,
        Breadcrum,
        Title,
        Canonical
    }

    public class NavigationHtmlHelper
    {
        /// <summary>
        /// Gets or sets the HTML helper.
        /// </summary>
        /// <value>The HTML helper.</value>
        public HtmlHelper HtmlHelper { get; protected set; }

        /// <summary>
        /// Initializes a new instance of the <see cref="MvcSiteMapHtmlHelper"/> class.
        /// </summary>
        /// <param name="htmlHelper">The HTML helper.</param>
        /// <param name="provider">The sitemap.</param>
        public NavigationHtmlHelper(HtmlHelper htmlHelper)
        {
            if (htmlHelper == null)
                throw new ArgumentNullException("htmlHelper");

            HtmlHelper = htmlHelper;

        }

        /// <summary>
        /// Creates the HTML helper for model.
        /// </summary>
        /// <typeparam name="TModel">The type of the model.</typeparam>
        /// <param name="model">The model.</param>
        /// <returns></returns>
        public HtmlHelper<TModel> CreateHtmlHelperForModel<TModel>(TModel model)
        {
            return new HtmlHelper<TModel>(HtmlHelper.ViewContext, new ViewDataContainer<TModel>(model));
        }
    }

    public class ViewDataContainer<TModel>
       : IViewDataContainer
    {
        /// <summary>
        /// Initializes a new instance of the <see cref="ViewDataContainer&lt;TModel&gt;"/> class.
        /// </summary>
        /// <param name="model">The model.</param>
        public ViewDataContainer(TModel model)
        {
            ViewData = new ViewDataDictionary<TModel>(model);
        }

        /// <summary>
        /// Gets or sets the view data dictionary.
        /// </summary>
        /// <value></value>
        /// <returns>The view data dictionary.</returns>
        public ViewDataDictionary ViewData { get; set; }
    }

In the view, we can have something like below as simple or as complex as based on requirement.

@model TridionSiteMapNode
@if (Model.HasChildNodes)
{
    <ul>
        @foreach (TridionSiteMapNode node in Model.ChildNodes)
        {
            <li><a href="@node.Url">@node.Title</a> </li>
        }
    </ul>
}

In short, we can easily customize the TridionSitemapNode to use it as they way we want for simple or complex navigations.

What is DD4T

Well, It's the high time to think about DD4T. What is DD4T? What makes more easier to the developer and Editor to talk about DD4T.!!  DD4T is a framework that developed by Tridion veterans. The framework makes it easier for Tridion developers to develop, deploy and maintain a project.

The basic building blocks of Tridion  like, schema, components, template etc. are still remain the same as below.

So what changes, if you look at the below diagram, you could see the different between both

So, the whole logic goes to the web server, CMS just plays the role of generating the pages and delivering it to the Broker, no Template logic or HTML in CMS any more. DD4T solves the problem by making sure the pages and content are published to the broker as data, without any HTML rendering.

If we summarize the diagram.

1) The role of editor and visitor are normal, and that is the main aspect of DD4T architecture.
2) Everything is published to the broker database.
3) Tridion templates uses DD4T to generate XML.
4) DD4T generate the html, not the templates
5) Web application has the complete role and logic for generating the html
6) Doesn't needs to be expert in tridion, Just a .NET developer can be done.
7) In simple the release can be managed well.
8) No dependency with templates.

Dynamic Publication Resolving in DD4T

DD4T is a great framework which would give you everything in place what you basically needed. Here we will see how we could resolve the publication based on the URL,  when we work with multiple publications accessing same web site, our DD4T would need to query dynamically to different publications.

Many times it can be based on URL, based on the domain or language we could resolve the publication. It’s obviously up to us how we implement it.

By default the DD4T framework queries the publication that we have mapped in the key: <add key="DD4T.PublicationId" value="7" /> or keep it 0 to query all publications

We can make it dynamic simply by implementing the IPublicationResolver class

Step 1: To resolve publication dynamically, we can write a class that implement DD4T.ContentModel.Contracts.Resolvers.IPublicationResolver

namespace Indivirtual.DD4T.Mvc.Resolver
{
    public class SitePublicationResolver : IPublicationResolver
    {
        public int ResolvePublicationId()
        {
            switch (HttpContext.Current.Request.Url.Host)
            {
                case "daimler.com": return 5;
                case "daimler.ae": return 7;
                default: return 5;
            }
        }
    }
}

It can be programmed either with domain or url, like daimer.com/en or daimer.com/ar, based on the scenario

Step 2: Add the resolver in the PageFactory in Ninject dependency

            Bind<IPublicationResolver>().To<SitePublicationResolver>();
            Bind<ICacheAgent>().To<DefaultCacheAgent>();
            Bind<IPageFactory>().ToMethod(context => new PageFactory()
            {
                PageProvider = context.Kernel.Get<IPageProvider>(),
                ComponentFactory = context.Kernel.Get<IComponentFactory>(),
                LinkFactory = context.Kernel.Get<ILinkFactory>(),
                PublicationResolver = context.Kernel.Get<IPublicationResolver>()
            });

That’s all you have your resolver, Rest all like PageController class will remain the same. After implementing IPublicationResolver, any request to PageFactory first try to resolve the publication and then queries the broker.