WebForms 转发器，设置 CSS class 取决于项目索引

Question

我是 WebForms 新手。现在我正在使用 Repeater 来显示 List 集合中的项目。我需要改变的问题css class 取决于物品的均匀度。

我的转发器代码：

<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 class 取决于使用转发器的项目的均匀度？

Answer 1

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

<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).

一起使用

比如给中继器一个基数cssclass

<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 class 取决于项目索引

WebForms repeater, set CSS class depends on item index

asp.net

webforms

ascx