How can I get an alternative style in <ItemTemplate> (.NET)?

Question

I am using EPiServer for this website. In contrast asp:DataList, EPiServer: PAgeList does not AlternatingItemTemplate.

So, I need to create a counter and increase this counter in mine <ItemTemplate>, and then use the module to return the css style to add to the article / page.

Module code "code" - fromcode behind:

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

But I don’t know how to advertise the counter and increase it in <ItemTemplate>.

Any suggestions that were highly appreciated!

UPDATE
Here is my EPiServer page list controller:

 <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> 

ANSWER
I decided that using jQuery was much easier than hacking .NET. This is not my preferred solution, but it works. The code I'm using is this:

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

Answer 1

: -

<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" ...

Answer 2

, , - , Javascript jQuery . CSS ( , ).

, , , . , ItemDataBound, .

EDIT:

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>

Answer 3

CSS, , IE9 +.

tr:nth-child(even) {
    background-color: #000000;
}

Answer 4

Unfortunally EpiServer "" ItemIndex Container, "" :

:

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>

Answer 5

, :

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

.

:

( ); , ItemIndex css:

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

(ascx aspx), JavaScript.

!

Answer 6

,

Answer 7

The EPiServer PageList list control also functions as a data source, so there is no reason you couldn’t use your favorite ASP.NET templates with variable elements to render it, and just set the DataSourceId to the pagelist file identifier.

Answer 8

It worked for me. (Credit @Rippo)

I just used the bgcolortables:

bgcolor ='<%#(Container.ItemIndex % 2 == 0) ? "#FFFFFF" : "#FEFFE8" %>'