Repetición de fila alternativa de repetidor ASP.NET sin soplar

Estoy tratando de lograrlo simplemente agregando una clase css a un div en filas alternativas en mi sin tener que ir a la sobrecarga de incluir un completo, lo que me obligará a mantener un montón de marcas sincronizadas el futuro.

He visto una solución como http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ que soy Tentado a usar, pero esto todavía no me “huele” bien.

¿Alguien más tiene una solución más fácil de mantener y más sencilla? Idealmente me gustaría poder hacer algo como:

   

Other Options

<div class="item ">

Pero no puedo averiguar cómo implementar IsAlternatingRow , incluso con métodos de extensión.

No es necesario administrar su propia variable (ya sea un contador incremental o un booleano); puede ver si la propiedad ItemIndex es divisible por dos y usarla para establecer una clase css:

 class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>" 

Esto tiene la ventaja de estar completamente basado en su código de UI (archivo ascx o aspx) y no depende de JavaScript.

DO#

 class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>" 

VB

 class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>" 

Esto me ayudo

 class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>' 

La respuesta anterior dio como resultado el error “La etiqueta del servidor no está bien formada”.

Aplicar las clases con JQuery.

 $('.divtable > div:odd').addClass('dark'); $('.divtable > div:even').addClass('light'); 

Podrías usar jQuery en su lugar. Esta respuesta a una pregunta anterior puede ayudar: jQuery Zebra selector

Tweak poco: la clase vacía podría eliminarse con algo como:

  <%# Container.ItemIndex % 2 == 0 ? "" : "" %> 

IsAlternatingRow puede ser una propiedad protegida y se establecerá en el evento ItemDataBound o ItemCreated.

 protected void rpt_ItemDataBound(object sender, EventArgs e) { IsAlternatingRow = !IsAlternatingRow; } 

No es necesario el código. Aquí hay una solución CSS pura:

 .item:nth-child(odd){background-color: #ccc} .item:nth-child(){background-color: #ddd} 

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child