2

I want to see three different tabs. For example, if we are on the Sports page, we would like it to have the following tabs in the body section of the page:

  • Cricket
  • Football
  • Tennis

So if someone clicks on Cricket tab there will be some cricket related article. And we want the same for each of the other tabs on this page also.

So how can we achieve this with a controller rendering with Sitecore MVC?

1

You should be able to achieve this with Sitecore and Placeholders. This doesn't really rely on the use of Sitecore MVC or using a Controller Rendering. You would want to create 2 renderings (either controller or a view rendering would also work here):

  1. Tab Container
  2. Tab Item

The Tab Container rendering would have a placeholder such as Tab.Container that you would add Tab Items to it, for any number of tab items you want for that page. The code would look like this:

@model RenderingModel

<div>
    @Html.Sitecore().Placeholder("Tab.Container")
</div>

Then you would define another rendering. It would be called Tab Item. It would have a data source Template which would contain the following fields:

  • Title (Single-Line Text)
  • Placeholder Key (optional) (Single-Line Text)

The code for this rendering would look like the following:

@model RenderingModel

<div class="tab">
    <div class="header">@Html.Sitecore().Field("Title")</div>
    <div class="content">
        @Html.Sitecore().Placeholder("Tab")
    </div>
</div>

You would define items that will represent the data source for your Tab Item rendering. In the case of your sports page, you would define 3 items:

  1. Cricket
  2. Football
  3. Tennis

Next you would need to configure the Presentation details for the Sports page. You would add the initial Tab Container to the presentation details by assigning it to the placeholder used in your layout. Then you would assign 3 renderings for the tab item rendering. Their placeholder key would be set to Tab.Container.

Lastly when you want to assign renderings to a specific tab item, you would do so via the placeholder key. So example, if you wanted to assign a Article Rendering to the first tab, you can add it to the presentation details and set the placeholder key to Tab.

Now there's one caveat to what I mentioned above. If you don't have Dynamic Placeholders defined, you will run into an issue, because it won't know which Tab (since in our example there would be 3 Tab placeholder keys defined) to assign the Article Rendering to. You could get around that by either setting the placeholder key in the view with something like this:

@model RenderingModel

@{
    Rendering currentRendering = RenderingContext.Current.Rendering;
}

<div class="tab">
    <div class="header">@Html.Sitecore().Field("Title")</div>
    <div class="content">
        @Html.Sitecore().Placeholder("Tab-@(currentRendering.UniqueId)")
    </div>
</div>

But I would highly recommend using a Dynamic Placeholder control on your site. I have one on the Sitecore Market place: https://marketplace.sitecore.net/en/Modules/T/True_Dynamic_Placeholders.aspx

Going this approach, is the best approach, because you don't lose any of the benefits such as personalization or A/B testing, or the flexibility to use any type of rendering in your tabs in any order. Also this approach will work well with the experience editor.

| improve this answer | |
  • I am agree with your ideas and I think it will be helpful for me. Can you please explain me with one code example. I want only controller rendering logic like how to iterate three values(Tab item) when we will get any one of the tab item. – Sagar Chowdhury Jun 26 '17 at 19:43
  • You shouldn't need to apply code to loop through the renderings. Sitecore will actually handle that when it parses the page. I'll update my answer to provide an example of the code I would use in each rendering. For my example, I will assume you are just using a View Rendering – Dylan Young Jun 26 '17 at 19:46
  • Thank you Dylan for explaining me such a good concept here in Sitecore. Looking forward I will be waiting for your example . Have a good day . – Sagar Chowdhury Jun 26 '17 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.