For Loop in index at asp.net mvc view

Question

There is a best way to write this piece of code? (without validade if element at index i is not null)

I want to load 3 bootstrap cards with data per row and put it in 3 columns

Example and code:

 1. CARD 1 CARD 2 CARD 3
 2. CARD 4 CARD 5 CARD 6

@for (int i = 0; i < Model.Count()-1; i+=3)
{
    <div class="row top30">
        <div class="col-md-4">
            @Html.Partial("~/Views/Product/Card.cshtml", Model.ElementAtOrDefault(i))
        </div>
        @if (Model.ElementAtOrDefault(i + 1) != null) 
        {
        <div class="col-md-4">
            @Html.Partial("~/Views/Product/Card.cshtml", Model.ElementAtOrDefault(i + 1))
        </div>
        }
        @if (Model.ElementAtOrDefault(i + 2) != null)
        {
        <div class="col-md-4">
            @Html.Partial("~/Views/Product/Card.cshtml", Model.ElementAtOrDefault(i + 2))
        </div>
        }
    </div>
}

rcs · Accepted Answer · 2016-03-28 03:54:57Z

2

This one is shorter

@for (int i = 0; i < Model.Count()-1; i+=3)
{
    <div class="row top30">
        @for (int j = 0; j < 3; j++)
        {
            @if (j == 0 || (Model.ElementAtOrDefault(i + j) != null))
            {
                <div class="col-md-4">
                    @Html.Partial("~/Views/Product/Card.cshtml", Model.ElementAtOrDefault(i + j))
                </div>
            }
        }
    </div>
}

answered Mar 28, 2016 at 3:54

rcs

7,32713 gold badges61 silver badges88 bronze badges

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

Comments

OJ Raqueño · Accepted Answer · 2016-03-28 03:57:25Z

0

You could loop through all the cards, and just insert a new row when it's the third card already:

<div class="row top30">
    @for (int i = 0; i < Model.Count()-1; i++)
    {
        @if (Model.ElementAtOrDefault(i) != null)
        {
            <div class="col-md-4">
                @Html.Partial("~/Views/Product/Card.cshtml", Model.ElementAtOrDefault(i))
            </div>
        }
        @if (i == 2)
        {
            </div>
            <div class="row top30">
        }
    }
</div>

}

answered Mar 28, 2016 at 3:57

OJ Raqueño

4,5912 gold badges20 silver badges31 bronze badges

1 Comment

Rieth Over a year ago

Thanks for your solution.

Collectives™ on Stack Overflow

For Loop in index at asp.net mvc view

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related