How to set html attributes like class using MVC Razor?

Question

How to set html attributes using Razor?

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

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

But that will not work.

How to do it?

thanks

Answer 1

How about using a conditional statement:

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

If if:

 <tr class="@if( !@charlieTestRunViewModel.Succeeded ){<text>trFailedTestRun</text>}"> 

Answer 2

I find using a razor helper the most elegant

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

and use it like

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

Answer 3

I would make an extension method for HtmlHelper as follows

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

And then in sight

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

Answer 4

You can use this

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

you must direct your model on top of your view as shown below

@model charlieTestRunViewModel