How properly generate bootstrap grid via loop using Razor?

Question

I use ASP.NET MVC and bootstrap. I have many objects (>2) in collection and for each need a <div class="col-xs-6"> but with only 2 cols in a row. How to achive this using loop? There is 1 way but I am looking for something better:

@model List<Object>
@using (Html.BeginForm("ActionName", "ControllerName"))
{
    <div class="row">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i % 2 != 0) {
        <div class="row">
            <div class="col-xs-6">
                @Html.TextBoxFor(o => o[i].Value)
            </div>
        </div>
        } else {
            <div class="col-xs-6">
            @Html.TextBoxFor(o => o[i].Value)
            </div>
        }
    }
    </div>
}

score 18 · Accepted Answer · 2016-12-09 12:58:20Z

18

Close the row div and start a new one inside the loop on every 2nd iteration

<div class="row">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i > 0 && i % 2 == 0)
        {
            @:</div><div class="row"> // close and start new row
        }
        <div class="col-xs-6">
            @Html.TextBoxFor(o => o[i].Value)
        </div>
    }
</div>

edited Dec 9, 2016 at 12:58

answered Dec 9, 2016 at 12:49

user3559349

Sign up to request clarification or add additional context in comments.

3 Comments

Vitalii Isaenko Over a year ago

It's just amazing! Never knew this construction!

Will Strohl Over a year ago

This is indeed amazing and the display works fine, but the output HTML doesn't have the first two wrapped in a row DIV. It's only every subsequent row.

user3559349 Over a year ago

@WillStrohl, Yes it does (not sure what you have done differently)

Saeed Zhiany · Accepted Answer · 2018-08-29 05:07:16Z

Using a combination of the split method found here (which I turned into a helper method)

https://www.jerriepelser.com/blog/approaches-when-rendering-list-using-bootstrap-grid-system/

and a for loop I managed to achieve the grid with indexed items

public static class SplitListHelper
{        
    public static IEnumerable<IEnumerable<T>> Split<T>(this T[] array, int size)
    {
        for (var i = 0; i < (float)array.Length / size; i++)
        {
            yield return array.Skip(i * size).Take(size);
        }
    }
}

@if (Model != null)
{
    int rowCount = 0;
    foreach (var row in Model.ToArray().Split(4))
    {
        <div class="row">
            @for (int i = 0; i < row.Count(); i++)
            {
                <div class="col-xs-3">
                    @Html.DisplayFor(m => Model[rowCount + i].Name)
                    @Html.CheckBoxFor(m => Model[rowCount + i].Selected)                    
                </div>
            }
        </div>
        rowCount += 4;
    }                       
}

Collectives™ on Stack Overflow

How properly generate bootstrap grid via loop using Razor?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related