Подсветка альтернативных строк в ретрансляторе ASP.NET без полного разнесения <alternatingitemtemplate />

Question

Я пытаюсь выполнить простое добавление класса css в div в чередующихся строках в моем <itemtemplate/>, не вдаваясь в накладные расходы при включении полноценного <alternatingitemtemplate/>, что вынудит меня синхронизировать большую разметку в будущем.

Я видел решение, такое как http://blog.net -tutorials.com / 2009/04/02 / как изменить цвет строки с помощью aspnet-ретранслятора-контроля / который я испытываю желание использовать, но это все еще не "пахнет" прямо мне.

Кто-нибудь еще получил более понятное и простое решение? В идеале я хотел бы иметь возможность сделать что-то вроде:

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

Но я не могу понять, как реализовать IsAlternatingRow - даже с помощью методов расширения.

Answer 1

Нет необходимости управлять своей собственной переменной (либо инкрементным счетчиком, либо логическим значением); вы можете увидеть, делится ли встроенное свойство ItemIndex на два, и использовать его для установки класса css:

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

Преимущество этого состоит в том, что он полностью основан на вашем коде пользовательского интерфейса (ascx или aspx) и не зависит от JavaScript.

Answer 2

C #

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

VB

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

Answer 3

Это помогло мне

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

Предыдущий ответ привел к ошибке «Метка сервера неправильно сформирована».

Answer 4

Применение классов с JQuery.

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

Answer 5

Небольшая настройка: пустой класс можно удалить с помощью чего-то вроде:

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

Answer 6

Вместо этого вы можете использовать jQuery. Этот ответ на предыдущий вопрос может помочь: jQuery Zebra селектор

Answer 7

Код не нужен. Вот чистое решение 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

Answer 8

IsAlternatingRow может быть защищенным свойством и будет установлено в событии ItemDataBound или ItemCreated.

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