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:
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?
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):
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:
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:
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.
