C# ASP.NET 中继器备用行突出显示,但没有完整的 <alternatingitemtemplate/>
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/847806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET repeater alternate row highlighting without full blown <alternatingitemtemplate/>
提问by Kieran Benton
I'm trying to accomplish simply adding a css class to a div on alternate rows in my <itemtemplate/>
without going to the overhead of including a full blown <alternatingitemtemplate/>
which will force me to keep a lot of markup in sync in the future.
我试图完成简单地将一个 css 类添加到我的交替行上的 div<itemtemplate/>
而不去包含一个完整的开销,<alternatingitemtemplate/>
这将迫使我在未来保持很多标记同步。
I've seen a solution such as http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/which I'm tempted to use but this still doesn't "smell" right to me.
我已经看到了解决方案,如http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/我敢很想使用,但这对我来说仍然“闻不出来”。
Has anyone else got a more maintainable and straightforward solution? Ideally I'd like to be able to do something like:
有没有其他人有更易于维护和直接的解决方案?理想情况下,我希望能够执行以下操作:
<asp:repeater id="repeaterOptions" runat="server">
<headertemplate>
<div class="divtable">
<h2>Other Options</h2>
</headertemplate>
<itemtemplate>
<div class="item <%# IsAlternatingRow ? "dark" : "light" %>">
But I can't figure out how to implement IsAlternatingRow
- even with extension methods.
但我无法弄清楚如何实现IsAlternatingRow
- 即使使用扩展方法。
采纳答案by Richard Ev
There is no need to manage your own variable (either an incrementing counter or a boolean); you can see if the built-in ItemIndex
property is divisible by two, and use that to set a css class:
无需管理您自己的变量(递增计数器或布尔值);您可以查看内置ItemIndex
属性是否可以被 2 整除,然后使用它来设置 css 类:
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"
This has the benefit of being completely based in your UI code (ascx or aspx file), and doesn't rely on JavaScript.
这样做的好处是完全基于您的 UI 代码(ascx 或 aspx 文件),并且不依赖于 JavaScript。
回答by Kirtan
IsAlternatingRow can be a protected property and will get set in the ItemDataBound or ItemCreated event.
IsAlternatingRow 可以是受保护的属性,并将在 ItemDataBound 或 ItemCreated 事件中设置。
protected void rpt_ItemDataBound(object sender, EventArgs e)
{
IsAlternatingRow = !IsAlternatingRow;
}
回答by Lachlan Roche
Apply the classes with JQuery.
使用 JQuery 应用这些类。
$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');
回答by Keith Bloom
You could use jQuery instead. This answer to a previous question may help: jQuery Zebra selector
您可以改用 jQuery。这个对上一个问题的回答可能会有所帮助:jQuery Zebra 选择器
回答by Keith Bloom
C#
C#
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"
VB
VB
class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"
回答by Rick
Little tweak: the empty class could be removed with something like:
小调整:可以使用以下内容删除空类:
<%# Container.ItemIndex % 2 == 0 ? "<tr>" : "<tr class='odd'>" %>
回答by Seven
This helped me
这帮助了我
class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>'
Previous answer resulted in "Server Tag is not well formed" error.
先前的答案导致“服务器标签格式不正确”错误。
回答by graphicdivine
No need for code. Here's a pure CSS solution:
不需要代码。这是一个纯 CSS 解决方案:
.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}