How can I get alternate styling in <ItemTemplate> (.NET)?

Question

I'm using EPiServer for this website. Unlike asp:DataList, EPiServer:PAgeList does not have AlternatingItemTemplate.

So I need to create a counter and increase this counter in my <ItemTemplate>, and then use modulus to return whuch css style to append to article / page.

Modulus "code" - fromcode behind:

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

But I'm not abler to ad an counter and increase this in the <ItemTemplate>.

Any suggestions much 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 a LOT simpler than hacking around with .NET. It's not my preferred solution, but it works. The code I use is this:

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

Answer 1

When I run into these kinds of issues with server controls I usually just css them by hand

Answer 2

If all you're looking for is some visual styling for alternate rows, You may find better success in using Javascript and jQuery to manipulate the styles at runtime on the client. In some cases, you can use pure CSS to get the result you want (but this can result in implementations that don't look the same in different browsers).

If you actually need to render different information for alternating rows, you may need to add a property to the data source you are binding to that exposes the information. Alternatively, some controls support a ItemDataBound event that you can subscribe to on the server and use to alter your output.

EDIT:

If you choose to subscribe to the ItemDatabound event (assuming your control actually has this feature), you would compute an incrementing value and assign it to the data item you are binding to. You can then use this together with modular arithmetic: (count % 2) to apply different styles for odd/even rows.

Another alternative is to hack things by using markup expansions in ASP.NET to generate an incrementing number just in the markup. Here's an example with a Repeater:

<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

For a repeater I do this:-

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

EDIT for an on item databound event keep a track of the row counter...

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

Edit here you go... OOPS needed to be a HtmlTableRow!!

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

you will also need this

<tr id="row" runat="server" ...

Answer 4

The EPiServer PageList control also functions as a DataSource, so there's no reason why couldn't use your favorite ASP.NET templated controls with alternating items to render it with, and simply set the DataSourceId to the ID of the pagelist.

Answer 5

Unfortunally EpiServer "hides" the ItemIndex of the Container instance but a work around is to create your own "global" counter:

Add a property to your code behind:

protected Int32 ItemIndex;

And then in your aspx file:

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

    <ItemTemplate>
         <li class="<%# this.ItemIndex++ % 2 == 0 ? "odd" : "even" %>">
           Content
         </li>
    </ItemTemplate>
</EPiServer:PageList>