如何在Razor+中为@foreach look的交替项设置交替类；翁布拉科

我正在使用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>
        }

@foreach（var itemTblRows在@Model.Children中）
{       
@itemTblRows.ABL_表数据1
@itemTblRows.ABL_表数据2
@itemTblRows.ABL_表数据3
@itemTblRows.ABL_表格数据4
}

---

我不喜欢使用CSS和JS来实现这一点，因为在其他情况下（使用diff.layout），它将不起作用

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

var c=1；
@foreach（var itemTblRows in@Model.Children）
{
var oddEvenClass=c%2>0？“奇数”：“偶数”；
c+=1；
@itemTblRows.ABL_表数据1
@itemTblRows.ABL_表数据2
@itemTblRows.ABL_表数据3
@itemTblRows.ABL_表格数据4
}

使用

IsOdd

和

IsEven

助手方法，您可以轻松完成以下操作：

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

---

这里有一个简单的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。第n个子项（n）选择器允许您选择匹配的第n个子项。指定奇数或偶数可以选择每个奇数子项或每个偶数子项

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

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

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