如何在 Razor + umbraco 中为 @foreach 的交替项目提供交替 class

Question

我正在使用 Umbraco 7.x

我需要一些东西，例如在为每个使用生成的列表项中。交替项需要分别给class.

他们的任务是确定偶数行和奇数行以给出各自的 class 名称。

如下是我的代码。

@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.layout）它不会工作。

Answer 1

创建一个计数器变量 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>
    }

Answer 2

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

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

或

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

Answer 3

这里有一个简单的 CSS 方法来实现您正在寻找的结果。首先，添加一个class到table这些行属于：

<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) select 或者允许你 select 每 nth [=26= 】那是一场比赛。指定奇数或偶数允许您在每个奇数 child 或每个偶数 child.

中取 select

如何在 Razor + umbraco 中为 @foreach 的交替项目提供交替 class

how to give alternating class to alternating item of @foreach look in Razor + umbraco

umbraco

razor

razor-2

umbraco6

umbraco7