How to set html attributes such as class using MVC Razor?

Question

How to set html attributes using when Razor?

In the below code, I'd like to set the class attribute of element if "Succeeded" property of the current model is true.

<tbody>
                @foreach (CharlieTestRunViewModel charlieTestRunViewModel in Model)
    {
                    <tr class="@if([email protected]){'trFailedTestRun'}">
                        <td>
                            @charlieTestRunViewModel.Succeeded
                        </td>
                                    </tr>
    }
            </tbody>

But it doesn't work.

How to achieve this?

Thanks

nemesv · Accepted Answer · 2012-03-13 14:55:39Z

5

What about using the conditional operator:

<tr class="@(!charlieTestRunViewModel.Succeeded ? "trFailedTestRun" : "")">

With if:

<tr class="@if([email protected]){<text>trFailedTestRun</text>}">

edited Mar 13, 2012 at 14:55

answered Mar 13, 2012 at 14:20

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andras Zoltan Over a year ago

+1 But note it's the conditional operator. That's my preferred one anyway, expressive. But others will no doubt prefer an HtmlHelper extension.

nemesv Over a year ago

@AndrasZoltan Good catch! I didn't know that I'm using the operator's name wrong :)

Andras Zoltan Over a year ago

Well I'd like to say that I've never done it - but I would be lying. It doesn't help that it's the only ternary operator!

archil · Accepted Answer · 2012-03-13 14:36:11Z

3

I find using razor helper most elegant

@helper ClassIf(bool condition, string className)
{
   if (condition)
   {
      @className
   }    
}

and use it like

 <tr class="@MyHelpers.ClassIf(charlieTestRunViewModel.Succeeded, "trFailedTestRun")">

answered Mar 13, 2012 at 14:36

archil

39.6k7 gold badges69 silver badges83 bronze badges

Comments

mimo · Accepted Answer · 2012-03-13 14:15:31Z

0

I would make a Extension method to HtmlHelper like this

public static MvcHtmlString GetFailedClass(this HtmlHelper html, bool condition)
    {
        if(!condition)
           return MvcHtmlString.Create("trFailedTestRun")
    }

And then in view

<tr class="@Html.GetFailedClass(charlieTestRunViewModel.Succeeded)">

answered Mar 13, 2012 at 14:15

mimo

94712 silver badges19 bronze badges

Comments

Ovini · Accepted Answer · 2012-03-13 14:49:55Z

0

You can use this

< tr class="@(Model.Succeeded ? "trPassedTestRun":"trFailedTestRun")" >

you have to refer you model on top of your View like below

@model charlieTestRunViewModel

answered Mar 13, 2012 at 14:49

Ovini

3515 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to set html attributes such as class using MVC Razor?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related