web-dev-qa-db-fra.com

C # MVC3 Razor alternant les éléments dans une liste @foreach?

Dans MVC3, comment créez-vous des couleurs de ligne alternées sur une liste @foreach lorsque vous utilisez le moteur de vue 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>
}
c#asp.net-mvcrazor
46
JK.

C'est à cela que sert CSS (changer de style plutôt que de contenu). Sauvez l'effort du serveur: 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");
}
42
trebormf

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

  • utiliser une boucle normale pour:

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

  • utilisation .Select:

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

Dans tous les cas, vous auriez accès à l'index en cours et pourriez alors utiliser i % 2 == 1 comme condition pour votre couleur de fond. Quelque chose comme:

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

Avec ASP.NET MVC 3 et la nouvelle syntaxe @helper, il existe une façon plus nette de gérer cela.

Ajoutez d'abord 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++;
}

Ajoutez ensuite l'appel à l'assistant dans votre <TR> élément

@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>
}
26
Ken Pespisa

Vous pouvez toujours le faire en css pur en utilisant:

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

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>
9
Dave Ward
@{  
    int i = 0;
    foreach (Account acct in Model)
    {
        <div class="row @(i%2==0?"even":"odd")">     
            <a href="/Account/Details/@acct.id">@acct.name</a>
        </div>
        i++;
    }
}
5
MondayPaper

Original: http://15daysofjquery.com/table-striping-made-easy/5/ Auteur: Jack Born jQuery Zebra_Striping_Made_Easy

=============== Java ===================

$(document).ready(function () {
          $('.stripeMe tr:even').addClass('alt');

          $('.stripeMe tr').hover(
            function () {
                $(this).addClass("highlight");
              },
             function () {
                $(this).removeClass("highlight");
              });
      });

================= css =================

tr.alt td {
background-color : #F7F7F7;
}
tr.highlight td {
background-color : #bcd4ec;
}

=============== HTML ===============

<table class="stripeMe">
3
Thant Zin

Il n'y a pas beaucoup de documentation à ce sujet, mais le Loop Helper ( http://nuget.org/Packages/Packages/Details/Loop-Helper-for-WebMatrix-0-1 ) vous offre un support pour détecter Pair/Impair/etc. articles.

2
Andrew Stanton-Nurse

Un vieux post, mais aucune des réponses ne couvrait cette approche, donc je le ferai.

Puisque vous utilisez MVC Razor, l'utilisation de la fonction @helper est l'approche la plus simple, la plus propre et la meilleure.

Dans le dossier App_Code de votre projet, ajoutez un nouvel élément ou modifiez votre fichier CustomeHelpers.cshtml existant avec le code suivant:

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

Ensuite, à votre avis, votre boucle foreach ressemblerait à ceci:

@foreach (var item in Model) {    
    <tr @CustomHelpers.AlternateBackground("#ECEDEE", Model.Count())>
        <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>
}

Vous pouvez passer un identifiant de couleur comme "#ECEDEE" ou la couleur nommée "Blue".

De cette façon, vous n'avez qu'à ajouter la fonction @Helper une fois et elle se propage dans toute votre application et elle peut être appelée sur chaque vue selon les besoins en référençant la fonction @CustomHelpers.

1
Tim

Ce que vous pouvez faire est de définir une variable odd en dehors de la foreach()

@{
    var odd = false;
}

Et puis, à l'intérieur de votre boucle foreach, vous en modifieriez la valeur, puis l'utiliseriez dans une condition if pour définir les classes alternées.

@foreach (var item in Model) {
    odd = !odd;

    <tr class="@(odd ? "odd" : "even")">
        <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>
}
0
Tom Lindelius

Une solution que j'utilise pour prendre en charge IE8 (navigateur d'entreprise, pas par choix) était de combiner la solution de the_Lotus avec une solution jquery

Comme IE8 ne prend pas en charge nth-child() utilisez ce css

.tableclass tr.even{
    background:#E6EDF5;
}

Et utilisez jQuery pour ce faire:

$(document).ready(function() {
    $(".table tr:nth-child(even)").addClass("even");
});
0
Jake1164

qu'en est-il de l'utilisation du plugin jQuery DataTable. je l'ai utilisé sur une application MVC2 que j'ai développée.

http://www.datatables.net/

0
Anthony

Vous pourriez laisser le framework décider de la meilleure façon de le rendre, en utilisant vraisemblablement un peu de logique de détection de navigateur et toute autre qualité qu'il a intégrée, quelque chose comme ce qui suit, et continuez votre vie.

:-)

Mon point étant qu'avec cette approche, le WebGrid contrôlera les couleurs de la grille en alternance en utilisant la meilleure technologie possible (mieux que ce soit conç à utiliser, au moins) pour le navigateur détecté. Il pourrait ne pas utiliser la "nième" syntaxe CSS, mais cela pourrait ne pas fonctionner pour l'ensemble de votre public cible, de toute façon, vous devrez donc détecter le navigateur et émettre vous-même du contenu différent. Bien sûr, tout le monde devrait maintenant utiliser un navigateur compatible CSS 3.x, mais le kilométrage varie.

@myWebGrid.GetHtml
    (
    tableStyle: "some-style",
    headerStyle: "some-head-style",
    alternatingRowStyle: "some-fancy-alt-row-style",
    etc ...
    )

La signature de la méthode GetHtml de System.Web.Helpers.WebGrid Ressemble à ceci:

public IHtmlString GetHtml
    (
    string tableStyle = null,
    string headerStyle = null,
    string footerStyle = null,
    string rowStyle = null,
    string alternatingRowStyle = null,
    string selectedRowStyle = null,
    string caption = null,
    bool displayHeader = true,
    bool fillEmptyRows = false,
    string emptyRowCellValue = null,
    IEnumerable<WebGridColumn> columns = null,
    IEnumerable<string> exclusions = null,
    WebGridPagerModes mode = WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious,
    string firstText = null,
    string previousText = null,
    string nextText = null,
    string lastText = null,
    int numericLinksCount = 5,
    object htmlAttributes = null
    );
0
Craig

@helper Prop (List prop) {foreach (var p in prop) {p}}

format: @Prop (@ item.Prop)

0
user1724001