Question

我是WebForms的新手。现在，我正在使用Repeater来显示List集合中的项目。我需要更改CSS类的问题取决于项目的均匀性。

我的中继器代码：

<asp:Repeater runat="server" ID="rptItems">
  <ItemTemplate>
    <div class="not-even">
      <%# Eval("Title") %>
    </div>
  <ItemTemplate>
</asp:Repeater>

我想要的是什么

<div class="not-even">
  Item 1
</div>
<div class="even">
  Item 2
</div>
<div class="even">
  Item 3
</div>
<div class="even">
  Item 4
</div>

如何使用中继器设置CSS类取决于项目的偶数？

Answer 1

您可以为此使用三元运算符。检查ItemIndex并设置正确的类别。

<asp:Repeater ID="rptItems" runat="server">
    <ItemTemplate>

        <div class="<%# Container.ItemIndex %2 == 1 ? "even" : "not-even" %>">
           Item  <%# Container.ItemIndex + 1 %>
        </div>

    </ItemTemplate>
</asp:Repeater>

Answer 2

显而易见的解决方案是AlternatingItemTemplate，正是为此而设计的。

<asp:Repeater runat="server" ID="rptItems">
  <ItemTemplate>
    <div class="not-even">
      <%# Eval("Title") %>
    </div>
  <ItemTemplate>
  <AlternatingItemTemplate>
    <div class="even">
      <%# Eval("Title") %>
    </div>
  <AlternatingItemTemplate>
</asp:Repeater>

不太明显但可以说更简单的方法是仅将CSS与:nth-child(odd)和:nth-child(even)一起使用。

例如，为中继器提供基本的CSS类

<asp:Repeater runat="server" ID="rptItems" class="items">
  <ItemTemplate>
    <div>
      <%# Eval("Title") %>
    </div>
  <ItemTemplate>
</asp:Repeater>

会导致

.items :nth-child(odd)
{
  color:red;
}

.items :nth-child(even)
{
  color:blue;
}

<div class="items">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
  <div>
    Item 3
  </div>
  <div>
    Item 4
  </div>
</div>

WebForms中继器，根据项目索引设置CSS类

2 个答案: