Question

我正在尝试简单地将css类添加到我的<itemtemplate/>中的替换行上的div中，而不会包含一个完整的<alternatingitemtemplate/>的开销，这将迫使我保留很多标记在未来同步。

我见过像http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/这样的解决方案，我很想使用它，但这对我来说仍然没有“闻到”。

还有其他人有更易于维护和直接的解决方案吗？理想情况下，我希望能够做到这样的事情：

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

但我无法弄清楚如何实现IsAlternatingRow - 即使使用扩展方法。

Answer 1

无需管理自己的变量（递增计数器或布尔值）;你可以看看内置的ItemIndex属性是否可以被2整除，并使用它来设置一个css类：

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

这样做的好处是完全基于您的UI代码（ascx或aspx文件），并且不依赖于JavaScript。

Answer 2

C＃

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

VB

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

Answer 3

这对我有帮助

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

之前的回答导致“服务器标记格式不正确”错误。

Answer 4

使用JQuery应用这些类。

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

Answer 5

您可以使用jQuery代替。对上一个问题的回答可能有所帮助：jQuery Zebra selector

Answer 6

小调整：可以使用类似的东西删除空类：

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

Answer 7

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

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

Answer 8

无需代码。这是一个纯CSS解决方案：

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

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

ASP.NET转发器交替行突出显示没有完全烧断<alternatingitemtemplate> </alternatingitemtemplate>

8 个答案: