Cómo alternar filas en asp.net mvc

Estoy utilizando un <% foreach ...%> ciclo para listar una colección de elementos en mi sitio web.Cómo alternar filas en asp.net mvc

Quiero agregar un color de fondo diferente para el estilo de filas alternas en mi lista. He encontrado una manera de hacer esto, pero no estoy satisfecho con él, ya que parece un truco.

Esto es lo que han hecho para resolverlo hasta el momento:

<table> 
    <% int counter = 0; 
     foreach (var item in Model) 
     { 
      counter++; 

      if (counter % 2 == 0) 
      { 
    %> 
      <tr class="colorfull"> 
      <% } 
      else 
      { %> 
      <tr> 
      <% } %> 
...

¿Hay una mejor práctica que me falta que la gente está utilizando para este escenario en ASP.NET MVC?

Fuente

2009-10-19 YeahStu

Encontré este fragmento de código JQuery, que me parece mucho más limpio.

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

He sacado el contador de la lógica. Esta secuencia de comandos de JQuery manipula el DOM para establecer la clase css de cada otra fila en el ciclo foreach.

Fuente

2009-10-19 02:44:23 YeahStu

recomiendo esto, no hay sopa etiqueta para usted! – jfar

http://roshanbh.com.np/2008/03/different-color-alternate-row-jquery.html –

He visto esta línea repetirse en una serie de preguntas similares, pero siempre está fuera de contexto. ¿Dónde pondrías esto? (¡Soy muy nuevo en mvc, jquery y desarrollo web en general!) – Lewray

Si lo quiere más limpio, le recomendaría escribir una extensión personalizada HtmlHelper. No usaría jquery como sugiere stu42 simplemente porque me gusta buscar javascript puramente para el comportamiento. Idealmente, y con suerte en un futuro no muy lejano, usaría CSS puro para este propósito. Hasta entonces, lo dejaría en el marcado, como lo está haciendo actualmente, pero con una extensión que maneja la lógica, sacándola del aspx.

Fuente

2009-10-19 02:58:42 dustyburwell

¿Puedes darnos un ejemplo de cómo podría ser esto? – YeahStu

Si usted es el tipo atrevidos que quieran sumergirse en CSS3

tr:nth-child(odd)  { background-color:#eee; } 
tr:nth-child(even)  { background-color:#fff; }

Fuente

2009-10-19 03:09:53 Perpetualcoder

Funciona en fire fox, Chrome, pero no en IE :( – Sly

ni siquiera en IE 8? O no he probado en IE 8 pero imaginé que ... service pack! – Perpetualcoder

No funciona en IE 8 en Win7 x64 – Sly

Si no desea utilizar una clase css se puede establecer directamente con jQuery.

Suponga que su etiqueta de la tabla es: <table id="tb">..., sólo tiene que fijar su html de la siguiente manera:

<head> 
<script language="javascript" type="text/javascript" src="jquery-min.js"/> 
</head> 

<body> 
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("#tb tr:odd").css("background-color", "#F4F4F8"); 
    }); 
    </script> 

    <table id="tb"> 
     <tr><th>Id</th><th>Name</th></tr> 
     <tr><td>1</td><td>Junior</td></tr> 
     <!--more rows here... --> 
    </table> 
</body>

Fuente

2010-04-10 17:10:33

Cómo alternar filas en asp.net mvc

Respuesta

Cuestiones relacionadas