Apply different DIV based on record id in For each loop

Question

I am working on MVC 5. Using WEB API, fetch the data now it is time to apply the HTML PAGE design and CSS.
@foreach (var item in Model)
{
if (Model.First() == item)
{
///APPLY FIRST RECORD CSS:- Works FINE
}
else {
<div class="row">
<div class="col-sm-4">
</div>
</div>
}
}

In the else portion, every time it generates the new ROW for a SINGLE record. But I am interested to display record 2 3 4 in SECOND ROW. 5 6 7 Record in the THIRD ROW and so on.

Answer 1

Just use mod operator.

@{
   var row = 0;
   foreach (var item in Model)
   {
       ++row;
       if (row == 1)
       {
           ///APPLY FIRST RECORD CSS:- Works FINE
        }
        else if ((row + 1) % 3 == 0){
             // 2,5,8…
             <div class="row">
             <div class="col-sm-4">
              </div>
              </div> 
       } else {
            // other
       }
}

Answer 2

Hi @HDeveloper2021 ,
I suggest you could do like this:

 @model IList<WebMvc.Models.tblTest>  
    @{  
        ViewBag.Title = "Index";  
        Layout = "~/Views/Shared/_Layout.cshtml";  
    }  
      
<h2>Index</h2>  
@for (var i = 0; i < Model.Count(); i += 3)  
    {  
        <div class="row">  
            @{  
                int j = 0;  
                for (; j <= 2 && i + j < Model.Count(); j++)  
                {  
                    <div class="col-sm-4">  
                        @Model[i + j].testId  
                    </div>  
                }  
            }  
        </div>  
    }  
      

Result:

Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.