如何在Razor + umbraco中交替使用@foreach的交替项目

Question

我正在使用Umbraco 7.x

我需要一些像下面的内容使用每个生成的列表项。交替项目需要提供相应的课程。

他们的任何一个是确定偶数和奇数行给出各自的类名。

以下是我的相同代码。

@foreach (var itemTblRows in @Model.Children) 
        {       
         <tr class="light">
                <td>@itemTblRows.ABL_tableData1</td>
                <td>@itemTblRows.ABL_tableData2</td>
                <td>@itemTblRows.ABL_tableData3</td>
                <td>@itemTblRows.ABL_tableData4</td>
              </tr>
        }

我不想使用CSS和JS这样做，因为在其他情况下（使用diff。布局）它将无法工作。

Answer 1

您可以使用IsOdd和IsEven辅助方法轻松完成：

<tr class="@itemTblRows.IsOdd("odd","even")>

或

<tr class="@itemTblRows.IsEven("even","odd")>

Answer 2

这是一个简单的CSS方法，用于完成您正在寻找的结果。首先，在这些行所属的表中添加一个类：

<table class="striped">
@foreach (var itemTblRows in @Model.Children) 
{       
   <tr>
        <td>@itemTblRows.ABL_tableData1</td>
        <td>@itemTblRows.ABL_tableData2</td>
        <td>@itemTblRows.ABL_tableData3</td>
        <td>@itemTblRows.ABL_tableData4</td>
   </tr>
}
</table>

然后添加这些CSS规则：

table.striped tr:nth-child(even) { background-color: grey; }
table.striped tr:nth-child(odd) { background-color: white; }

然后根据需要添加CSS。 nth-child（ n ）选择器允许您选择匹配的每个 n 子项。指定奇数或偶数允许您选择每个奇数孩子或每个偶数孩子。

Answer 3

创建一个计数器变量c，您将在每个循环中递增。在每个循环中，使用2作为分母执行模数（％）。如果结果大于0则为 奇数 ，否则 甚至

    var c = 1;
    @foreach (var itemTblRows in @Model.Children)
    {
        var oddEvenClass = c % 2 > 0 ? "odd" : "even";
        c += 1;
        <tr class="light @oddEvenClass">
            <td>@itemTblRows.ABL_tableData1</td>
            <td>@itemTblRows.ABL_tableData2</td>
            <td>@itemTblRows.ABL_tableData3</td>
            <td>@itemTblRows.ABL_tableData4</td>
        </tr>
    }