c# - ASP.NET 中继器交替行高亮显示，没有完全爆发

Question

我试图在我的备用行上简单地添加一个 css 类到一个 div 中，<itemtemplate/>而不需要包含一个完整的开销，<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- 即使使用扩展方法。

score 130 · Accepted Answer

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

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

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

score 17 · Accepted Answer

C＃

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

VB

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

score 6 · Accepted Answer

这对我有帮助

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

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

score 4 · Accepted Answer

使用 JQuery 应用类。

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

score 2 · Accepted Answer

您可以改用 jQuery。这个对上一个问题的回答可能会有所帮助：jQuery Zebra 选择器

score 2 · Accepted Answer

小调整：空类可以通过以下方式删除：

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

score 1 · Accepted Answer

无需代码。这是一个纯 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

score 0 · Accepted Answer

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

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

c# - ASP.NET 中继器交替行高亮显示，没有完全爆发

8 回答 8

Related

Reference