MVC Razor 中的 Foreach 循环计数器

Foreach loop counter in MVC Razor

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

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

我的View代码如下:

@{
    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 次尝试解决这个问题,所以我要拔头发了。如有任何帮助,我们将不胜感激。

假设 <tbody> 在编程代码之前开始,我认为你正在提前关闭 tbody 这是 imo 应该工作的代码片段:

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

一个选项是 jQuery。

如果您已经在代码库中包含 jQuery,请尝试:

这是别人(不是我自己)开发的代码。

例如,请看:

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

   })
 </script>