CODEWITHSUNDEEP
asp.netasp.net-mvcfor-looprazor
Rieth
Rieth

Reputation: 295

For Loop in index at asp.net mvc view

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>
}

Upvotes: 1

Views: 11653

Answers (2)

OJ Raque&#241;o
OJ Raque&#241;o

Reputation: 4561

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>

}

Upvotes: 0

rcs
rcs

Reputation: 7187

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>
}

Upvotes: 2

Related Questions