asp.net mvc - C# MVC3 Razor alternating items in a @foreach list?

Question

In MVC3, how do you create alternating row colors on a @foreach list when using the Razor view engine?

@foreach (var item in Model) {    
    <tr>
        <td>@item.DisplayName</td>
        <td>@item.Currency</td>
        <td>@String.Format("{0:dd/MM/yyyy}", item.CreatedOn)</td>
        <td>@String.Format("{0:g}", item.CreatedBy)</td>
        <td>@Html.ActionLink("Edit", "Edit", new { id = item.Id })</td>
    </tr>
}

Answer 1

Assuming you would rather not use CSS (i.e. :nth-child(odd)) you can either:

• use a normal for loop:

  @for (int i = 0; i < Model.Count; i++)
  {
      ...
  }
  

• use .Select:

  @foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
  {
      ...
  }
  

Either way, you'd have access to the current index and could then use i % 2 == 1 as the condition for your background-color. Something like:

<tr style="background-color:@(i % 2 == 1 ? "red" : "white")">...</tr>