ASP.NET репитер альтернативная подсветка строк без полного выдувания

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

Я видел такое решение, какhttp://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ который я испытываю соблазн использовать, но это все еще не "пахнет" прямо для меня.

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

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

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

8 54
c# asp.net-mvc data-binding extension-methods repeater

8 ответов:

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

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

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

123

C#

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

В. Б.

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

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

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

предыдущий ответ привел к ошибке" тег сервера не очень хорошо сформирован".

6

применить классы с помощью JQuery.

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

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

2

маленькая настройка: пустой класс может быть удален с чем-то вроде:

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

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

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

нет необходимости в код. Вот чистое решение 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

0