如何在（.NET）中获得交替样式？

Question

我正在为此网站使用EPiServer。与asp:DataList不同，EPiServer：PAgeList不具有AlternatingItemTemplate。如何在<ItemTemplate>（.NET）中获得交替样式？

所以我需要创建一个计数器并在我的<ItemTemplate>中增加这个计数器，然后使用模数返回这个CSS样式以附加到文章/页面。

模“代码” - fromcode背后：

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> 

ANSWER
我决定使用jQuery是很多比.NET周围黑客简单。 这不是我的首选解决方案，但它的工作原理。我使用的代码是这样的：

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

编辑在这里你去...是一个HtmlTableRow OOPS需要！

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

当我遇到这些类型的服务器控件的问题我通常只是用手工

Answer 3

CSS他们如果你正在寻找的是交替行一些视觉造型，您可能会发现在使用Javascript和jQuery在客户端运行时处理样式方面会取得更好的成效。在某些情况下，您可以使用纯CSS来获得您想要的结果（但这会导致实现在不同浏览器中看起来不一样）。

如果实际上需要为交替行呈现不同信息，则可能需要向绑定到的数据源添加一个属性以公开信息。或者，某些控件支持您可以在服务器上订阅并用于更改输出的事件。

编辑：

如果您选择订阅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 4

的EPiServer分页控件还充当数据源，所以没有理由不能使用自己喜欢的模板ASP.NET控件与交流项目呈现它与，并简单地将DataSourceId设置为网页列表的ID。

Answer 5

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

Answer 6

这对我有用。 （感谢@Rippo）

我只是用表的bgcolor：

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

Answer 7

我实现它，如下：

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

什么帮助了我是理查德·埃弗雷特answer。

答案详细：

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.

这救了我的天！

Answer 8

这可以使用纯CSS完成，假设支持的浏览器是IE9 +。

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