CODEWITHSUNDEEP
asp.netasp.net-mvcrazor
David
David

Reputation: 16120

asp.net mvc - Simplest way to provide alternate row styling in Razor

Given the following Razor code:

<tbody>
    @foreach (Profession profession in Model)
    {
        <tr>
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

What's the simplest way to provide some kind of alternate row styling? (i.e. different styling for odd and even rows.)

I don't seem to be able to add arbitrary C# to declare a bool variable which gets flipped each iteration of the foreach loop in order to set a classname for the tr, for example.

Upvotes: 11

Views: 23320

Answers (6)

contco
contco

Reputation: 1

Found this while googling, so I think it's worth it replying for anyone else who might chance upon this. Nowadays, you can just use bootstrap, and do this, voila!

<table class="table table-striped">

Upvotes: 0

Tim
Tim

Reputation: 85

Since you are using MVC Razor utilizing the @helper function is the simplest, cleanest and best approach.

In the App_Code folder of your project add new item or modify your existing CustomeHelpers.cshtml file with the following code:

@helper AlternateBackground(string color, Int32 iViewBagCount) {
    if (iViewBagCount == null) { iViewBagCount = 0; }
    <text>style="background-color:@(iViewBagCount % 2 == 1 ? color : "none")"</text>
    iViewBagCount++;
}

Then on your view, inside your foreach loop, replace the tablerow code with what's shown below:

<tr @CustomHelpers.AlternateBackground("#ECEDEE", ViewBag.count)>

or

<tr @CustomHelpers.AlternateBackground("Red", Model.Count())>

Whichever is appropriate for your foreach loop

This way you only have to add the @Helper function once and it propagates throughout your application and it can be called on each view as needed by referencing the @CustomHelpers function. Create as many helpers as you need and call them with the @CustomeHelpers.NameOfYourFunction() and go from there.

Simple and effective...

Upvotes: 1

Timbo
Timbo

Reputation: 4533

Apologies that this is a slightly obtuse answer as you're already doing the mark-up, but as your table looks pretty standard you could switch to using the Mvc Web Grid Helper. It's a neat tool for tables like this. I think your code would be slightly shorter / simpler for this particular table, and the actual implementation of the alternating row style would be very simple:

alternatingRowStyle: "alternateRow"

More info on this asp.net blog.

Upvotes: 2

Abdul Munim
Abdul Munim

Reputation: 19217

There's a lot of ways as other proposed. From my point, this wouldn't be the simplest but a bit easier:

<tbody>
    @var oddEven = new List { "odd", "even" };
    @var i = 0;
    @foreach (Profession profession in Model)
    {
        <tr style="@oddEven[i++ % 2]">
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

Upvotes: 3

harriyott
harriyott

Reputation: 10645

I'd recommend doing this in straight CSS (see here for more details):

tr:nth-child(odd)    { background-color:#eee; }
tr:nth-child(even)   { background-color:#fff; }

Upvotes: 48

Aliostad
Aliostad

Reputation: 81660

JQuery can do that in the client side (and I would probably use client side scripting here rather than server logic).

 $("tr:odd").css("background-color", "#bbbbff");

You can also use just a simple variable to set the css class (almost pseudo-code):

@foreach (Profession profession in Model)
{
    @i++;
    <td class="@i%2==0?"even":"odd""> 

}

Upvotes: 11

Related Questions