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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-05 04:00:39  来源:igfitidea点击:

ASP.NET repeater alternate row highlighting without full blown <alternatingitemtemplate/>

c#asp.netdata-bindingextension-methodsrepeater

提问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 ItemIndexproperty 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}

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

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