如何在中获得替代样式（。网）？

Question

我在这个网站上使用 EPiServer。与 asp:DataList 不同，EPiServer:PAgeList 没有 AlternatingItemTemplate。

因此，我需要创建一个计数器并在我的 中增加该计数器，然后使用模数返回要附加到文章/页面的 css 样式。

模数“代码” - 来自代码后面：

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

但我无法在 中添加计数器并增加该计数器。

任何建议非常感谢！

更新
这是我的 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");
}

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 事件，您可以在服务器上订阅该事件并使用该事件来更改输出。

编辑：

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

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

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

Answer 4

不幸的是，EpiServer“隐藏”了 Container 实例的 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 5

我的实现如下：

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

帮助我的是 Richard Everett answer。

详细答案：

无需管理您自己的变量（无论是递增变量还是增量变量）
计数器或布尔值）；你可以看看内置的 ItemIndex
属性可以被二整除，并使用它来设置 css 类：

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

这样做的好处是完全基于您的 UI 代码 (ascx
或 aspx 文件），并且不依赖 JavaScript。

这救了我的命！

Answer 6

当我遇到服务器控件的此类问题时，我通常只是手动编写它们

Answer 7

EPiServer PageList 控件还充当数据源，因此没有理由不能使用您最喜欢的 ASP.NET 模板化控件以及交替项来呈现它，只需将 DataSourceId 设置为页面列表的 ID 即可。

Answer 8

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

我刚刚使用了表格的 bgcolor ：

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