Как получить альтернативный стиль в <ItemTemplate>(.NET)? - PullRequest
3 голосов
/ 16 декабря 2009

Я использую EPiServer для этого сайта. В отличие от asp:DataList, EPiServer: PAgeList не имеет AlternatingItemTemplate.

Так что мне нужно создать счетчик и увеличить этот счетчик в моем <ItemTemplate>, а затем использовать модуль для возврата, какой стиль CSS добавить в статью / страницу.

Модуль "код" - из-за кода:

 return index % 2 == 0 ? "styleA" : "styleB";

Но я не могу объявить счетчик и увеличить его в <ItemTemplate>.

Любые предложения приветствуются!

UPDATE
Вот мой контроллер списка страниц EPiServer:

 <EPiServer:PageList runat="server" id="pageList" SortDirection="Ascending" Count="4" OnDataBinding="pageList_OnDataBinding">
    <HeaderTemplate>
        <ul id="articleList1">
    </HeaderTemplate>

    <ItemTemplate>
            <li>
                   <h2><a href="<%# Eval("LinkURL") %>" title="<%# Eval("PageName") %>"><EPiServer:Property id="Property1" PropertyName="PageName" runat="server" /></a></h2>
                   <div class="articleImage">
                      <%# ArticleImage(Container.CurrentPage)%>                            
                   </div>
                   <div class="introText">
                      <%# IntroText(Container.CurrentPage)%> 
                   </div>
                   <div class="readMore floatRight"><a href="<%# Eval("LinkURL") %>" title="<%# Eval("PageName") %>">Les mer</a></div>
            </li>
    </ItemTemplate>

    <FooterTemplate>
        </ul>     
    </FooterTemplate>
 </EPiServer:PageList> 

ОТВЕТ
Я решил, что использовать jQuery намного проще, чем взламывать .NET. Это не мое предпочтительное решение, но оно работает. Код, который я использую, это:

if (jQuery("#articleList1").length > 0) {
    jQuery('li:odd').addClass("odd");
}

Ответы [ 8 ]

7 голосов
/ 16 декабря 2009

Для ретранслятора я делаю это: -

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

РЕДАКТИРОВАТЬ для события, связанного с данными, для отслеживания счетчика строк ...

private int counter;
protected void list_databound(object sender, RepeaterItemEventArgs e)
    {
     if ((e.Item.ItemType == ListItemType.Item) || ((e.Item.ItemType == ListItemType.AlternatingItem))
     {
      counter++;
      //find server control and use counter as modulus
     }
    }

Редактировать вот, пожалуйста ... OOPS должен быть HtmlTableRow !!

HtmlTableRow row = e.Item.FindControl("row") as HtmlTableRow;
if (row != null) 
  row.Attributes.Add("class", ((counter % 2 == 0) ? "odd": "even") );

вам также понадобится это

<tr id="row" runat="server" ...
3 голосов
/ 15 сентября 2015

Это можно сделать с помощью чистого CSS, если предположить, что браузер поддерживает IE9 +.

tr:nth-child(even) {
    background-color: #000000;
}
3 голосов
/ 16 декабря 2009

Если все, что вам нужно, это какой-то визуальный стиль для альтернативных строк, вы можете добиться большего успеха в использовании Javascript и jQuery для манипулирования стилями во время выполнения на клиенте. В некоторых случаях вы можете использовать чистый CSS для получения желаемого результата (но это может привести к реализациям, которые не выглядят одинаково в разных браузерах).

Если вам действительно нужно отобразить различную информацию для чередующихся строк, вам может понадобиться добавить свойство к источнику данных, с которым вы связываетесь, которое предоставляет информацию. Кроме того, некоторые элементы управления поддерживают событие ItemDataBound, на которое можно подписаться на сервере и использовать для изменения вывода.

РЕДАКТИРОВАТЬ:

Если вы решите подписаться на событие ItemDatabound (при условии, что ваш элемент управления действительно имеет эту функцию), вы вычислите инкрементное значение и назначите его для элемента данных, с которым вы связываетесь. Затем вы можете использовать это вместе с модульной арифметикой: (count % 2), чтобы применять разные стили для нечетных / четных строк.

Другая альтернатива - взломать вещи с помощью расширений разметки в ASP.NET, чтобы сгенерировать увеличивающееся число только в разметке. Вот пример с повторителем:

<asp:Repeater runat='server' id='whatever'>
    <HeaderTemplate>
        <% int counter = 0; %>
    </HeaderTemplate>
    <ItemTemplate>
         <li class='<%= (counter++) % 2 ? "regularStyle" : "alternateStyle"'>
           ... content here ...
         </li>
    </ItemTemplate>
</asp:Repeater>
1 голос
/ 21 августа 2015

Я реализовал это как показано ниже:

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

Мне помог Ричард Эверетт ответ .

Подробный ответ :

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

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

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

Это спасло мой день!

1 голос
/ 12 марта 2010

К сожалению, EpiServer «скрывает» ItemIndex экземпляра контейнера, но обходной путь заключается в создании собственного «глобального» счетчика:

Добавьте свойство к своему коду позади:

protected Int32 ItemIndex;

А затем в вашем файле aspx:

<EPiServer:PageList runat="server">
    <HeaderTemplate>
        <% this.ItemIndex = 0; %>
    </HeaderTemplate>

    <ItemTemplate>
         <li class="<%# this.ItemIndex++ % 2 == 0 ? "odd" : "even" %>">
           Content
         </li>
    </ItemTemplate>
</EPiServer:PageList>
0 голосов
/ 11 сентября 2012

Это сработало для меня. (Кредит @Rippo)

Я только что использовал bgcolor таблицы:

bgcolor ='<%#(Container.ItemIndex % 2 == 0) ? "#FFFFFF" : "#FEFFE8" %>'
0 голосов
/ 22 декабря 2009

Элемент управления EPiServer PageList также функционирует как источник данных, поэтому нет никаких причин, по которым вы не можете использовать ваши любимые шаблонные элементы управления ASP.NET с чередующимися элементами для его визуализации и просто установить для DataSourceId идентификатор списка страниц. 1001 *

0 голосов
/ 16 декабря 2009

Когда я сталкиваюсь с такими проблемами с серверными элементами управления, я обычно просто вручную их обрабатываю

...