Question

In my view, I use a partial view with a list of objects from my model as follows:

@foreach (var item in Model.MyObjectList)
{
    @Html.Partial("DisplayObject", item)   
}

This forms a grid pattern down my main view, 1 row for each object.

I’d like to stripe them using normal method of odd rows one colour, even rows another. (like this for example.

Usually you’d do this by doing some kind of mod calculation.

The question is I can’t figure out how to do this without passing in a row number in the item into the partial view.

Is there an easier way? Html.Partial does not have any html attributes I can hook into.

I could of course put a table around the partial and stripe it that way, but would prefer not to.

Answer 1

If you can limit support to CSS3 you can use the :nth-child(odd) and :nth-child(even) rules – as shown on this page from W3C – http://www.w3.org/Style/Examples/007/evenodd.en.html

Those examples show how to use it on tr tags – but it applies to anything that you can apply a selector to:

<style type="text/css">
  div p:nth-child(odd) { color:red; }
  div p:nth-child(even) { color:green; }
</style>
<div>
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>