I am using Sitecore 9 and I need to display 5 controller renderings in a Tabbed view.

I looked at the article: How to show three different Tabs rendering by using Sitecore in ASP.NET MVC

But could not create the desired result. Can you please share more detailed steps or a sample with two renderings/items displayed as two tabs.

Thanks Om

  • Would like to update that the way I was doing , it worked, the problem was not with rendering but datasource was null , thats why it was not showing anything. thanks OM
    – user5629
    Jun 12 '19 at 20:53

The easiest way to do it with dynamic placeholders. For example, your need following markup:

<div class="tabs">
    <div class="tab">Controller Rendering 1 Content</div>
    <div class="tab">Controller Rendering 2 Content</div>
    <div class="tab">Controller Rendering 3 Content</div>
    <div class="tab">Controller Rendering 4 Content</div>
    <div class="tab">Controller Rendering 5 Content</div>

You need to have one rendering that is your tabs wrapper (container):

<div class="tabs">
    @Html.Sitecore().DynamicPlaceholder(new DynamicPlaceholderDefinition("tab-item")
        OutputModifier = (input, context) => new HtmlString("<div class="tab">" + input + "</div>")

And you need your 5 controller renderings, that are assigned to "tab-item" placeholder. Open experience editor and insert your renderings in container in needed sequence.

Try to use html markup where tab menu links are inside tabs content. Something like this https://kyusuf.com/post/completely-css-tabs

  • okay let me explain in detail:
    – user5629
    Jun 9 '19 at 19:14
  • I have default.html as layout , it has @Html.Sitecore().Placeholder("content"). When Login and Account controller renderings are added are using 'content' as placeholder, page is working. Now to convert it to Tabs , I added a view rendering , assigned 'content' as placeholder, and added following markup: <div class="tab-content"> @Html.Sitecore().Placeholder("LoginTab") @Html.Sitecore().Placeholder("AccountTab")</div> I expected both to be displayed as two tabs, but nothing is being displayed. Not sure what I am missing.
    – user5629
    Jun 9 '19 at 19:27

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.