ASP.NET 中继器交替行突出显示没有完整的 <alternatingitemtemplate/>

Posted 2023-02-22

【中文标题】ASP.NET 中继器交替行突出显示没有完整的 <alternatingitemtemplate/>

【英文标题】：ASP.NET repeater alternate row highlighting without full blown <alternatingitemtemplate/>

【发布时间】：2010-10-25 06:30:18

【问题描述】：

我试图在我的 <itemtemplate/> 的备用行上简单地添加一个 css 类到一个 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 - 即使使用扩展方法。

【参考方案1】：

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

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

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

【讨论】：

了不起的理查德，这正是我要找的东西！显然可以像提到的其他一些答案一样使用 JS，但你说这是一个不必要的限制是正确的。

@Richard Ev：如果有人使用 ItemTemplate 和 AlternatingItemTemplate 而不是这个解决方案，代码会运行得更慢还是更快？我如何比较这两个相同代码的速度？

@Răzvan：不确定性能差异，但我会警告不要过早优化这样的事情。

对于那些仍然来到这个目的地的人，您需要用单引号包裹服务器端逻辑块。否则，您可能会收到有关不允许使用文字控件的警告/错误

聚会迟到了，但和其他人一样，答案很好！无需重新发明***

【参考方案2】：

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

protected void rpt_ItemDataBound(object sender, EventArgs e)

    IsAlternatingRow = !IsAlternatingRow;

【参考方案3】：

使用 JQuery 应用类。

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

【参考方案4】：

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

【讨论】：

这依赖于在浏览器中启用 JavaScript，这是一个不必要的限制。

这取决于在 JavaScript 不可用时工作所需的功能。在这种情况下，网站仍然可以工作，但表格的可读性会降低，我认为这是可以接受的。

好点，虽然我的一般方法是仅将 JavaScript 用于需要它的事情，或者没有它实现起来过于繁重的事情。在这种情况下，在没有 JavaScript 的情况下实现表格条带化是微不足道的，因此我的建议是。

【参考方案5】：

C#

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

VB

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

【参考方案6】：

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

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

【参考方案7】：

这对我有帮助

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

上一个答案导致“服务器标签格式不正确”错误。

【讨论】：

这是正确的形式，将服务器端解析为 html 属性时。

【参考方案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