C # MVC3 Razor en alternance dans une liste @foreach?

Question

Dans MVC3, comment créez-vous des couleurs de lignes alternées sur une liste @foreach lors de l'utilisation du moteur d'affichage Razor?

 @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

En supposant que vous préférez ne pas utiliser de CSS (c.-à-d. :nth-child(odd) ), vous pouvez soit:

• utilisez une boucle for normale:

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

• utiliser .Select :

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

Dans les deux cas, vous auriez accès à l'index actuel et pourriez alors utiliser i % 2 == 1 comme condition de votre couleur d'arrière-plan. Quelque chose comme:

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

Answer 2

C’est à ça que sert CSS (changer de style plutôt que de contenu). Enregistrez le serveur l'effort: Faites-le sur le client.

Puisque vous utilisez Razor, vous pouvez utiliser JQuery. Voici comment je le fais dans mes projets:

 $(document).ready(function () {
    $("table > tbody tr:odd").css("background-color", "#F7F7F7");
}
 

Answer 3

Avec ASP.NET MVC 3 et la nouvelle syntaxe @helper, il existe un moyen plus simple de gérer cela.

Commencez par ajouter cette méthode @helper:

 @helper AlternateBackground(string color) {
    if (ViewBag.count == null) { ViewBag.count = 0; }
    <text>style="background-color:@(ViewBag.count % 2 == 1 ? color : "none")"</text>
    ViewBag.count++;
}
 

Ensuite, ajoutez simplement l'appel à l'aide dans votre élément <TR>

 @foreach (var item in Model) {    
    <tr @AlternateBackground("Red")>
        <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 4

Vous pouvez toujours le faire en pure css en utilisant:

 TABLE.test tr:nth-child(even)
{
    background-color: #EFEFEF;
}
 

Answer 5

Que diriez-vous quelque chose comme ça?

 @for (int i = 0; i < Model.length; i++) {
  <tr @(i % 2 != 0 ? class="odd" : "")>
    <td>@Model[i].DisplayName</td>
    <td>@Model[i].Currency</td>
    <td>@String.Format("{0:dd/MM/yyyy}", Model[i].CreatedOn)</td>
    <td>@String.Format("{0:g}", Model[i].CreatedBy)</td>
    <td>@Html.ActionLink("Edit", "Edit", new { id = Model[i].Id })</td>
  </tr>