web-dev-qa-db-fra.com

Répétiteur ASP.NET surlignage alterné surligné sans alternance complète

J'essaie simplement d'ajouter une classe css à une div sur des lignes alternatives dans mon <itemtemplate/> sans avoir à ajouter un <alternatingitemtemplate/> complet, ce qui m'oblige à garder beaucoup de balises synchronisées à l'avenir.

J'ai déjà vu une solution telle que http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ que je suis tenté d'utiliser mais cela ne «sent» toujours pas bien pour moi.

Quelqu'un d'autre a-t-il une solution plus facile à gérer et plus simple à gérer? Idéalement, j'aimerais pouvoir faire quelque chose comme:

<asp:repeater id="repeaterOptions" runat="server">
        <headertemplate>
            <div class="divtable">
                <h2>Other Options</h2>
        </headertemplate>
        <itemtemplate>
                <div class="item <%# IsAlternatingRow ? "dark" : "light" %>">

Mais je n'arrive pas à comprendre comment implémenter IsAlternatingRow - même avec des méthodes d'extension.

c#asp.netdata-bindingextension-methodsrepeater
54
Kieran Benton

Il n'est pas nécessaire de gérer votre propre variable (un compteur incrémentant ou un booléen); vous pouvez voir si la propriété ItemIndex intégrée est divisible par deux et l'utiliser pour définir une classe css:

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

Cela a l'avantage d'être entièrement basé sur votre code d'interface utilisateur (fichier ascx ou aspx) et ne repose pas sur JavaScript.

124
Richard Everett

C #

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

VB

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

Cela m'a aidé

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

La réponse précédente donnait l'erreur "La balise du serveur n'est pas bien formée".

6
Seven

Appliquez les classes avec JQuery.

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

Little Tweak: la classe vide pourrait être supprimée avec quelque chose comme:

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

Vous pouvez utiliser jQuery à la place. Cette réponse à une question précédente peut aider: jQuery Zebra selector

2
Keith Bloom

Pas besoin de code. Voici une solution CSS pure:

.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}

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

0
graphicdivine

IsAlternatingRow peut être une propriété protégée et sera définie dans l'événement ItemDataBound ou ItemCreated.

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