ASP.NET中继器交替行高亮没有完整的<alternatingitemtemplate />

我试图完成简单地添加一个css类到我的<itemtemplate/>交替行的div没有去包括一个完整的吹动<alternatingitemtemplate/>这将迫使我保持​​了很多标记在同步未来。

我见过一个解决scheme,如http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/我是试图使用,但这仍然没有“闻到”权利给我。

有没有其他人有一个更可维护和简单的解决scheme? 理想情况下,我希望能够做到这样的事情:

 <asp:repeater id="repeaterOptions" runat="server"> <headertemplate> <div class="divtable"> <h2>Other Options</h2> </headertemplate> <itemtemplate> <div class="item <%# IsAlternatingRow ? "dark" : "light" %>"> 

但我不知道如何实现IsAlternatingRow – 即使使用扩展方法。

没有必要pipe理自己的variables(增量计数器或布尔值); 你可以看到内置的ItemIndex属性是否可以被二整除,并用它来设置一个css类:

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

这有利于完全基于您的UI代码(ascx或aspx文件),并且不依赖于JavaScript。

C#

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

VB

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

这帮助了我

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

以前的答案导致“服务器标记不正确”错误。

使用JQuery来应用这些类。

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

你可以使用jQuery来代替。 对上一个问题的回答可能会有所帮助: jQuery Zebraselect器

小调整:空类可以删除像这样的东西:

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

IsAlternatingRow可以是一个受保护的属性,将被设置在ItemDataBound或ItemCreated事件中。

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

不需要代码。 这是一个纯粹的CSS解决scheme:

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

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