logo标签列表

ASP.NET Repeater 无需完整的 <alternatingitemtemplate/> 实现交替行高亮。

c#asp.netdata-bindingextension-methodsrepeater
56
我想简单地在<itemtemplate/>的交替行中向一个div添加CSS类，而不需要包含一个完整的<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 - 即使是使用扩展方法。

8个回答
130

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

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

这种方法的好处是完全基于您的UI代码(ascx或aspx文件)，不依赖JavaScript。

3
太棒了Richard，这正是我在寻找的东西！显然可以像其他答案提到的那样使用JS，但你说得对，那是一种不必要的限制。 - Kieran Benton
@Richard Ev：如果有人使用ItemTemplate和AlternatingItemTemplate而不是这个解决方案，代码会运行得更慢还是更快？我该如何比较这两个相同代码的速度？ - Răzvan Flavius Panda
2
@Răzvan：虽然我不确定性能差异，但我会警告不要为这样的事情过早优化。 - Richard Ev
3
对于那些仍在访问此目的地的人，您需要使用单引号来包装服务器端逻辑块。否则，您可能会收到有关不允许使用字面控件的警告/错误。 - GoldBishop
晚来一步，但像其他人所说的那样，非常好的答案！没有必要重新发明轮子。 - Master Yoda
17
C＃
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

VB

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

这对我很有帮助

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

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

这是正确的形式，当在服务器端解析成HTML属性时。 - GoldBishop
4

使用 JQuery 应用类。

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

小调整：可以使用以下类似的方式删除空类：

  <%# Container.ItemIndex % 2 == 0 ?  "<tr>" : "<tr class='odd'>"  %>
2
这取决于浏览器启用JavaScript，这是一个不必要的限制。 - Richard Ev
这取决于所需的功能是否需要JavaScript才能工作。在这种情况下，网站仍将正常工作，但表格将不太易读，我认为这是可以接受的。 - Keith Bloom
不错的观点，尽管我的一般做法是仅在需要使用JavaScript或无法在没有它的情况下轻松实现的情况下才使用它。在这种情况下，即使没有JavaScript也很容易实现表格条纹，因此我建议不要使用它。 - Richard Ev
1
0

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

protected void rpt_ItemDataBound(object sender, EventArgs e)
{
    IsAlternatingRow = !IsAlternatingRow;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接