Foreach loop counter in MVC Razor

Question

What I am attempting to accomplish is to set an alternating row on a table to a different CSS style.

My controller returns a simple list and passes that to the view by way of the ViewBag.

My View code is as follows:

@{
    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;
    }
}

Since this is my 5th attempt to figure this out, I am about to pull my hair out. Any assistance would be most appreciative.

You can do this with javascript and css: http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css — Marco, Feb 17 '15 at 15:17
IIRC the [MVCContrib grid](https://mvccontrib.codeplex.com/wikipage?title=Grid) will do this for you, among other things. — David, Feb 17 '15 at 15:22
You can do this with pure CSS3 as well. (:nth-child selector) Also... that naming standard. — Tetsujin no Oni, Feb 17 '15 at 15:24
@Mariusz - the tbody tag is at the beginning of the table which is before this mess :) — John Schultz, Feb 17 '15 at 15:46

score 3 · Accepted Answer · answered Feb 17 '15 at 15:49

Assuming that <tbody> starts before programming code I think you are closing tbody to early here is snippet of code which imo should work:

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

JosephDoggie · Answer 2 · 2021-02-22T15:01:48.867

1

One option for this is jQuery.

If you are already including jQuery in your code-base, please try:

This is code that someone else (not myself) developed.

For example, please see: JQuery <tr> stripe odd/even rows

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

   })
 </script>

edited Feb 22 '21 at 15:01

answered Feb 17 '15 at 19:11

JosephDoggie

1,514
4
27
57

Not sure why this attracted a downvote at this late date, no explanation. As of 12/5/2019 there is still one net upvote. I no longer care as much about my reputation points, but it is still a little puzzling..... – JosephDoggie Dec 05 '19 at 21:16
1

I did not downvote you, but stating jQuery as a 'typical' way of doing something like this seems wrong to me. It requires client script execution plus a whole library, does not respect the original server side approach (which is better) and overall is just more complicated than for example using pure CSS (like the `:nth-child(2n)` selector). Hope this helps a bit. – Oliver Schimmer Feb 19 '21 at 15:05
I edited this to say a more generic "One option for this is jQuery." Thus, it no longer says "typical". I was given jQuery examples for this particular situation, so I viewed it as typical, but I could see where jQuery would not necessarily be typical. It seems some codebases use it anyway, some don't... – JosephDoggie Feb 22 '21 at 15:03

Foreach loop counter in MVC Razor

2 Answers2