Question

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

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

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

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

但是我无法在<ItemTemplate>。

中添加一个计数器并增加它

任何建议都非常感谢！

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

编辑这里你去... 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中使用标记扩展来破解事物，以便在标记中生成递增数字。以下是使用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

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

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。

详细答案：

无需管理自己的变量（递增 counter或boolean）;你可以看看内置的ItemIndex 属性可被2整除，并使用它来设置css类：
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"
这样做的好处是完全基于您的UI代码（ascx 或者aspx文件），并且不依赖于JavaScript。

这节省了我的一天！

Answer 6

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

Answer 7

EPiServer PageList控件也可以作为DataSource使用，所以没有理由不使用你最喜欢的ASP.NET模板化控件和交替项来渲染它，只需将DataSourceId设置为页面列表的ID。 / p>

Answer 8

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

我刚刚使用了表格的bgcolor：

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

如何在<itemtemplate>（.NET）中获得备用样式？</itemtemplate>

8 个答案: