Episerver Custom render blocks inside content area

Question

I created content area for jquery tabs.With block that contains TAB name and Tab content. The sturcture is like below

<div id="tabs">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li class="active" role="presentation">
            <a aria-controls="home" data-toggle="tab" href="#home" role="tab">INTRODUCTION</a>
        </li>
        <li role="presentation">
            <a aria-controls="profile" data-toggle="tab" href="#profile" role="tab">OUR HOLIDAYS TO ITALY</a>
        </li>
        <li role="presentation">
            <a aria-controls="messages" data-toggle="tab" href="#messages" role="tab">ABOUT ITALIAN EXPRESSION</a>
        </li>
        <li role="presentation">
            <a aria-controls="settings" data-toggle="tab" href="#settings" role="tab">ITALY HOLIDAY HIGHLIGHTS</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content tabgrey">
        <div class="tab-pane fade in active country_content" id="home" role="tabpanel">test</div>
        <div class="tab-pane fade country_content" id="profile" role="tabpanel">test</div>
        <div class="tab-pane fade country_content" id="messages" role="tabpanel">test</div>
        <div class="tab-pane fade country_content" id="settings" role="tabpanel">asdsadsad</div>
    </div>
</div>

If I try to render this structure through view of a block. I can't emulate it. Since I have to put all li's inside one ul and all divs inside tab-content.

score 1 · Answer 1 · answered Jun 21 '16 at 13:25

1

I would suggest to not render this with @Html.PropertyFor(), not with that markup anyway. Because you would end up with a lot of display templates and helper methods. Create a view model instead where everything is already put together nicely. Then loop through your view model twice, one time for the unordered list and then for every tab pane.

answered Jun 21 '16 at 13:25

Johan Petersson

972
4
13

Can you write me a sample code so I can see what you mean, and so that I can accept your answer if it works. – perkes456 Jun 21 '16 at 13:52

Episerver Custom render blocks inside content area

1 Answers1