Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Coloring a Partial view in MVC 3

Coloring a Partial view in MVC 3

Problem

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.

Problem courtesy of: ozz

Solution

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:

first

second

third

Solution courtesy of: Andras Zoltan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Coloring a Partial view in MVC 3

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×