MVC Razor 中的 Foreach 循环计数器答案

【问题标题】：Foreach loop counter in MVC RazorMVC Razor 中的 Foreach 循环计数器
【发布时间】：2015-02-17 15:14:21
【问题描述】：

我想要完成的是将表格上的交替行设置为不同的 CSS 样式。

我的控制器返回一个简单的列表并通过 ViewBag 将其传递给视图。

我的查看代码如下：

@{
    int _recordCount = 1;
    foreach (var _oEstimateDetails in ViewBag.EstimateDetailData)
    {
        if (_recordCount == 1)
        {
            <tr class="EstimateDetailDataRow">
        }

        if (_recordCount == 1)
        {
            </tr><tr class="EstimateDetailDataAlternateRow">
            _recordCount = 0;
        }
        </tbody>
        <td class="EstimateDetailData">
            @_oEstimateDetails.EstimateLineDescription
        </td>
        <td class="EstimateQuantityData">
            @_oEstimateDetails.EstimateLineQuantity
        </td>
        <td class="EstimateRateData">
            @_oEstimateDetails.EstimateLineRate
        </td>
        <td class="EstimateLineTotalData">
            @(_oEstimateDetails.EstimateLineQuantity * _oEstimateDetails.EstimateLineRate)
        </td>
        </tr>
        _recordCount = _recordCount + 1;
    }
}

由于这是我第 5 次尝试解决这个问题，我正要拔掉头发。任何帮助都将不胜感激。

【问题讨论】：

你可以用javascript和css做到这一点：stackoverflow.com/questions/3084261/…
IIRC MVCContrib grid 会为你做这件事。
你也可以用纯 CSS3 做到这一点。 (:nth-child 选择器) 还有……那个命名标准。
那个''在那里做什么？
@Mariusz - tbody 标签在这个混乱之前的表格的开头:)

标签： asp.net-mvc razor asp.net-mvc-5

【解决方案1】：

假设<tbody> 在编程代码之前开始，我认为您在这里将 tbody 关闭到早期是 imo 应该工作的代码的 sn-p：

<tbody>
@{    
    for(int i =0; i < ViewBag.EstimateDetailData.Count(); i++)
    {
        var _oEstimateDetails = ViewBag.EstimateDetailData.ElementAt(i);

        <tr class="@(i % 2 == 0 ? "EstimateDetailDataRow" : "EstimateDetailDataAlternateRow")">
        <td class="EstimateDetailData">
            @_oEstimateDetails.EstimateLineDescription
        </td>
        <td class="EstimateQuantityData">
            @_oEstimateDetails.EstimateLineQuantity
        </td>
        <td class="EstimateRateData">
            @_oEstimateDetails.EstimateLineRate
        </td>
        <td class="EstimateLineTotalData">
            @(_oEstimateDetails.EstimateLineQuantity * _oEstimateDetails.EstimateLineRate)
        </td>
        </tr>
    }
}
</tbody>

【讨论】：

【解决方案2】：

一个选项是 jQuery。

如果您的代码库中已经包含 jQuery，请尝试：

这是其他人（不是我自己）开发的代码。

例如，请参阅： JQuery <tr> stripe odd/even rows

 <script type="text/javascript">
   $(document).ready(function () {
        $("table > tbody tr:odd").css("background-color", "#F7F7F7");

   })
 </script>

【讨论】：

不知道为什么这会在这么晚的时候引起反对票，没有解释。截至 2019 年 12 月 5 日，仍有一个净赞成票。我已经不再那么在乎我的声望点了，不过还是有点不解.....
我没有对你投反对票，但将 jQuery 说成是一种“典型”的做这种事情的方式对我来说似乎是错误的。它需要客户端脚本执行加上整个库，不尊重原始的服务器端方法（更好），并且总体上比使用纯 CSS（如:nth-child(2n) 选择器）更复杂。希望这会有所帮助。
我编辑了这个，说一个更通用的“一个选项是 jQuery”。因此，它不再说“典型”。我得到了针对这种特殊情况的 jQuery 示例，因此我认为它是典型的，但我可以看到 jQuery 不一定是典型的。似乎有些代码库仍然使用它，有些则不使用它......