3

我正在为这个网站使用 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>

回答
我认为使用 jQuery 比使用 .NET 简单得多。这不是我的首选解决方案，但它有效。我使用的代码是这样的：

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

8 回答 8

7

对于中继器，我这样做：-

<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" ...
于 2009-12-16T16:48:19.480 回答
3

如果您正在寻找的只是交替行的一些视觉样式，您可能会发现使用 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>
于 2009-12-16T16:47:34.177 回答
3

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

tr:nth-child(even) {
    background-color: #000000;
}
于 2015-09-15T17:01:41.860 回答
1

不幸的是 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>
于 2010-03-12T11:07:16.553 回答
1

我实现它如下：

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

帮助我的是 Richard Everett 的回答。

详细回答：

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

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

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

这拯救了我的一天！

于 2015-08-21T16:03:06.937 回答
0

当我遇到与服务器控件有关的这类问题时，我通常只是手动对它们进行 css

于 2009-12-16T16:47:30.143 回答
0

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

于 2009-12-22T02:47:51.490 回答
-2

这对我有用。（归功于@Rippo）

我刚刚使用bgcolor了表的：

bgcolor ='<%#(Container.ItemIndex % 2 == 0) ? "#FFFFFF" : "#FEFFE8" %>'
于 2012-09-11T07:10:15.543 回答