Как я могу создать чередующиеся цвета фона для строк списка, используя только ItemTemplate? - PullRequest
1 голос
/ 29 декабря 2011

Как я могу создать чередующиеся цвета фона для строк списка, используя только ItemTemplate? Я не хочу использовать AlternateTemplate, потому что мне придется редактировать их каждый раз, когда я хочу что-то изменить, когда все, что я использую, - это создание чередующихся цветов фона. Так как же я мог бы сделать это, используя только ItemTemplate? Спасибо!

Ответы [ 4 ]

7 голосов
/ 29 декабря 2011

Если бы вы могли рассматривать чередующиеся цвета как прогрессивное улучшение и не обязательно требоваться во всех (старых) браузерах, вы могли бы использовать n-й дочерний селектор CSS, чтобы применить цвет без изменения HTML.

Если у вас уже есть jQuery (или аналогичный) в вашем проекте и вы хотите найти решение для более старого браузера, вы можете использовать его для выбора каждой второй строки с помощью селектора: odd или: even.

Обновление (пример)

Предполагается, что мы используем строки таблицы

tr:nth-child(odd) td{  
  background-color: red;  
}

Вы также можете использовать even, 2n или 2n+1. Это будет одинаково хорошо работать с тегами <li>.

Дополнительные примеры: http://reference.sitepoint.com/css/pseudoclass-nthchild

2 голосов
/ 29 декабря 2011

Это тоже может сработать:

Цвета строк чередующейся таблицы с элементом управления ASP.Net ListView

Он использует синтаксис стиля <% # </em> на странице ASPX для переключения класса на основе DisplayIndex Mod 2.

Примеры кода C # и VB по этой ссылке тоже ...

1 голос
/ 29 декабря 2011

Вы пытались использовать элемент управления Repeater вместо ListView.

У вас будет больше контроля над шаблоном, и вам будет легче менять чередующиеся цвета без дублирующих шаблонов.

1 голос
/ 29 декабря 2011

Используйте событие ItemDataBound объекта ListView (если оно есть, как у повторителя).Добавьте элемент runat = "server" в свой ItemTemplate, который вы можете использовать для установки цвета с помощью класса.Получить ссылку на этот элемент управления в событии и установить класс css.

...