CODEWITHSUNDEEP
c#model-view-controller
Tappas
Tappas

Reputation: 87

Display list of items in column of three per row

I have a list of c# model coming in from my C# Rest Api. The front end shoould have a row with 3 columns the next set of three and so on.

How can I do that. I have tried this but it doesnt display the other data.

@{ var i = 0; }
@foreach (var employee in Model.Employees)
{
    @{ i++; } 
    <a href="#">@employee.Name</a>
    @if(i%3 == 2)
    {
        <br/>
    }
}

Upvotes: 2

Views: 819

Answers (2)

kartik kukadiya
kartik kukadiya

Reputation: 59

You can use below code

@{  
    var i = 0;            
    foreach (var employee in Model.Employees)
    {
        i++;
        <a href="#">@employee.Name</a>
        if (i == 3)
        {
            i=0;
            <br />
        }
     } 
}

Upvotes: 0

Oluwadamilola Adegunwa
Oluwadamilola Adegunwa

Reputation: 349

Use bootstrap!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row">
      @foreach (var employee in Model.Employees)
      {
         <div class="col-sm-4">
             <a href="#">@employee.Name</a>
         </div>
      }
   </div>
</div>

</body>
</html>

In this case, since you need to have 3 employees in each row, a full row would be col-sm-12, so I just divided 12 by 3 which is 4 so I used col-sm-4.

Upvotes: 1

Related Questions