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

Dans MVC3, comment créez-vous des couleurs de ligne en alternance dans une liste @foreach lorsque vous utilisez le moteur de vue Razor?

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

C’est à quoi sert CSS (changer de style plutôt que de contenu). Enregistrer 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"); } 

En supposant que vous préférez ne pas utiliser CSS (ie :nth-child(odd) ), vous pouvez soit:

  • utilisez une boucle normale:

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

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

De toute façon, vous auriez access à l'index actuel et vous pourriez alors utiliser i % 2 == 1 comme condition de votre couleur d'arrière-plan. Quelque chose comme:

 ... 

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

Ajoutez d’abord cette méthode @helper:

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

Ajoutez simplement l’appel à l’aide dans votre élément

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

Vous pouvez toujours le faire en css pur en utilisant:

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

Que diriez-vous quelque chose comme ça?

 @for (int i = 0; i < Model.length; i++) {  @Model[i].DisplayName @Model[i].Currency @Ssortingng.Format("{0:dd/MM/yyyy}", Model[i].CreatedOn) @Ssortingng.Format("{0:g}", Model[i].CreatedBy) @Html.ActionLink("Edit", "Edit", new { id = Model[i].Id })  
 @{ int i = 0; foreach (Account acct in Model) {  i++; } } 

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

=============== Script Java ===================

 $(document).ready(function () { $('.ssortingpeMe tr:even').addClass('alt'); $('.ssortingpeMe tr').hover( function () { $(this).addClass("highlight"); }, function () { $(this).removeClass("highlight"); }); }); 

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

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

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

 

Il n’y a pas beaucoup de documentation à ce sujet, mais l’aide en boucle ( http://nuget.org/Packages/Packages/Details/Loop-Helper-for-WebMasortingx-0-1 ) vous aide à détecter Even / Odd / etc . articles.

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/

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 supporte pas nth-child() utilisez ce css

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

Et utilisez jQuery pour faire ceci:

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

Vous pouvez laisser le cadre décider de la meilleure façon de le rendre, sans doute en utilisant un peu de logique de détection de navigateur et d’autres avantages qu’il contient, quelque chose comme ce qui suit, et continuez votre vie.

🙂

Ce que je veux dire, c’est qu’avec cette approche, le WebGrid contrôlera les couleurs de grid en alternance en utilisant la meilleure technologie possible (au mieux, il est conçu pour être utilisé) pour le navigateur détecté. Il se peut qu’elle n’utilise pas la syntaxe CSS «nth», mais cela risque de ne pas fonctionner pour tous les destinataires, de sorte que vous devrez détecter le navigateur et émettre du contenu différent par vous-même. Bien sûr, tout le monde devrait 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 méthode GetHtml System.Web.Helpers.WebGrid ressemble à ceci:

 public IHtmlSsortingng GetHtml ( ssortingng tableStyle = null, ssortingng headerStyle = null, ssortingng footerStyle = null, ssortingng rowStyle = null, ssortingng alternatingRowStyle = null, ssortingng selectedRowStyle = null, ssortingng caption = null, bool displayHeader = true, bool fillEmptyRows = false, ssortingng emptyRowCellValue = null, IEnumerable columns = null, IEnumerable exclusions = null, WebGridPagerModes mode = WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious, ssortingng firstText = null, ssortingng previousText = null, ssortingng nextText = null, ssortingng lastText = null, int numericLinksCount = 5, object htmlAtsortingbutes = null ); 

Qu’est-ce que vous pouvez faire est de définir une variable en dehors de la foreach()

 @{ var odd = false; } 

Et puis, à l’intérieur de votre boucle foreach, vous en modifierez la valeur, puis vous l’utiliserez dans une condition if pour définir les classes en alternance.

 @foreach (var item in Model) { odd = !odd;  @item.DisplayName @item.Currency @Ssortingng.Format("{0:dd/MM/yyyy}", item.CreatedOn) @Ssortingng.Format("{0:g}", item.CreatedBy) @Html.ActionLink("Edit", "Edit", new { id = item.Id })  } 

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

format: @Prop (@ item.Prop)

Un ancien message, mais aucune des réponses ne couvrait cette approche, alors je le ferai.

Puisque vous utilisez MVC Razor en utilisant la fonction @helper, c’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(ssortingng color, Int32 iViewBagCount) { if (iViewBagCount == null) { iViewBagCount = 0; } style="background-color:@(iViewBagCount % 2 == 1 ? color : "none")" iViewBagCount++; } 

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

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

Vous pouvez passer un identificateur de couleur comme “#ECEDEE” ou la couleur nommée “Blue”.

De cette façon, il suffit d’append la fonction @Helper une seule fois et elle se propage dans toute votre application et peut être appelée sur chaque vue en faisant référence à la fonction @CustomHelpers.