开发者

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

开发者 https://www.devze.com 2022-12-14 00:35 出处:网络
I\'m using EPiServer for this website. Unlike asp:DataList, EPiServer:PAgeList does not have AlternatingItemTemplate.

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");
}


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


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>


This can be done with pure CSS assuming the supported browser is IE9+.

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


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>


I implemented it as below:

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

What helped me was Richard Everett answer.

The answer in detail:

There is no need to manage your own variable (either an incrementing counter or a boolean); you can see if the built-in ItemIndex property is divisible by two, and use that to set a css class:

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

This has the benefit of being completely based in your UI code (ascx or aspx file), and doesn't rely on JavaScript.

This saved my day!


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


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.


This worked for me. (Credit to @Rippo)

I just used the bgcolor of the table:

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

精彩评论

暂无评论...
验证码 换一张
取 消