razor script to insert div and br for every 3 items in a row

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

René Andersen 238 posts 684 karma points

Mar 19, 2013 @ 21:29

Razor script to insert </div> and <br /> for every 3 items in a row

Hi

I need a Razor script to insert </div> and <br /> everytime there is 3 items in a row. Everything works when there is 3 or less items in the row, but if there are more than 3 itmes the layout looks wrong.

It is the closing </div> for the <div class="row"> that i need every 3 item.

My code looks like this (It is the 5 last lines of code that does not work):

@{ 
  @*Get the root of the website *@
    var root = Model.AncestorOrSelf(3);
}
<div class="row">
    @foreach (var page in root.Children.Where("Visible"))
    { 
        <div class="span3">
            <div class="service-overview">
                <h5><a href="@page.Url">@page.headerMain</a></h5>
                <p>@(Library.Truncate(Library.StripHtml(page.mainText), 60, true))</p>
                <img src="@page.image" alt="" />
                <div class="service-overview-overlay">+</div>
            </div><!-- end .service-overview -->
        </div><!-- end .span3 -->
    }

    @if (Model.Children.Count() >= 3)
        {
            </div><!-- end .row  -->
            <br />
        }

Thanks in advance!

Kind regards

René

Copy Link

Carsten Fallesen 35 posts 154 karma points

Mar 20, 2013 @ 08:17
100
The InGroupsOf() method is very easy to use for tasks like this. I have pasted the example from the documentation here:
```
@* return in groups of 3 *@ @foreach(var group in Model.Children.InGroupsOf(3)){ <div class="row"> @foreach(var item in group){ <div>@item.Name</div> } </div> }
```
/Carsten
Copy Link

René Andersen 238 posts 684 karma points

Mar 20, 2013 @ 09:42

Hi Carsten

Great now it's working. Thanks a lot. :-)

My code looks like this now:

@{ 
@*Get the root of the website *@
    var root = Model.AncestorOrSelf(3);
}
@foreach (var group in Model.Children.InGroupsOf(3))
{    
    <div class="row">
        @foreach (var page in group)
        { 
            <div class="span3">
                <div class="service-overview">
                    <h5><a href="@page.Url">@page.headerMain</a></h5>
                    <p>@(Library.Truncate(Library.StripHtml(page.mainText), 60, true))</p>
                    <img src="@page.image" alt="" />
                    <div class="service-overview-overlay">+</div>
                </div><!-- end .service-overview -->
            </div><!-- end .span3 -->
}
    </div><!-- end .row  -->
    <br /> 
}

/René

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies