web-dev-qa-db-de.com

Alternative Zeilenmarkierung für ASP.NET-Repeater ohne ausgewachsene <alternatingitemtemplate />

Ich versuche einfach das Hinzufügen einer css-Klasse zu einem div in alternativen Zeilen in meinem <itemtemplate/> zu erreichen, ohne den vollen Aufwand eines eingebauten <alternatingitemtemplate/> zu nehmen, was mich zwingt, in Zukunft viel Markup synchron zu halten.

Ich habe eine Lösung wie http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ gesehen. Ich bin versucht zu benutzen, aber das "riecht" mir immer noch nicht richtig.

Hat jemand anderes eine wartungsfähigere und unkompliziertere Lösung? Im Idealfall würde ich gerne etwas tun können:

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

Aber ich kann nicht herausfinden, wie man IsAlternatingRow implementiert - auch mit Erweiterungsmethoden.

54
Kieran Benton

Es ist nicht erforderlich, Ihre eigene Variable zu verwalten (entweder einen inkrementierenden Zähler oder einen Booleschen Zähler). Sie können sehen, ob die eingebaute ItemIndex -Eigenschaft durch zwei teilbar ist, und dies verwenden, um eine CSS-Klasse festzulegen:

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

Dies hat den Vorteil, dass Sie vollständig in Ihrem UI-Code (ascx- oder aspx-Datei) enthalten ist und nicht auf JavaScript angewiesen ist.

124
Richard Everett

C #

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

VB

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

Das hat mir geholfen

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

Bei der vorherigen Antwort wurde der Fehler "Server-Tag ist nicht ordnungsgemäß formatiert" ausgegeben.

6
Seven

Wenden Sie die Klassen mit JQuery an.

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

Kleiner Tweak: Die leere Klasse könnte entfernt werden mit:

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

Sie können stattdessen jQuery verwenden. Diese Antwort auf eine vorherige Frage kann hilfreich sein: jQuery Zebra Selector

2
Keith Bloom

Keine Notwendigkeit für Code. Hier ist eine reine CSS-Lösung:

.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 kann eine geschützte Eigenschaft sein und wird im ItemDataBound- oder ItemCreated-Ereignis festgelegt.

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