Writing conditional HTML with razor

Question

Depending on my record, I'd like to change the style of the table row in my current iteration.

The below example doesn't work, but how would I go about doing this correctly?

 foreach (var item in Model)
                {
                    @{ 
                        if (item.DataState != DataState.Active)
                        {
                            <tr style="background-color: red">
                        }
                        else
                            <tr>
                    }
                    <td>@item.Name</td>
                  </tr>
                 }

So effectively, I'd like to dynamically render the <tr> element differently based on the DataState of my model.

Since you are already in a code block (foreach) you don't need to add an other code block with @{}. There is an other issue in your code - Razor doesn't support IF and ELSE without brackets. You have to put the else part in brackets. Look at my answer - there's a shorter approach. — Skuami
– Skuami, Commented Aug 12, 2015 at 7:49

Skuami · Accepted Answer · 2023-06-30 20:53:54Z

22

Here's a shorter approach:

@foreach (var item in Model)
{
    <tr @(item.DataState != DataState.Active ? "style=background-color:red" : "")>
        <td>@item.Name</td>
    </tr>
}

edited Jun 30, 2023 at 20:53

answered Aug 12, 2015 at 7:25

Skuami

1,6352 gold badges15 silver badges33 bronze badges

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

4 Comments

Daniel Minnaar Over a year ago

It doesn't seem to work. The row renders as: <tr red;'="" style="'color:">

Daniel Minnaar Over a year ago

I fixed it by removing all whitespace from the css properties and values. Strange. Its now: <tr @(item.DataState != DataState.Active ? "style=background-color:rgba(255,0,0,.1)" : "")> Could you please update your answer to note the whitespace? Then I'll mark it as the answer. Thanks a ton.

Skuami Over a year ago

I've fixed the code. I would suggest you to use css classes instead of changing style like this.

Daniel Minnaar Over a year ago

You're right, but for the sake of the example you provided, others might try it verbatim and find it doesn't work off the bat :)

Sender · Accepted Answer · 2015-08-12 08:12:06Z

5

There are multiple way you can write condition.

Option 1:

@foreach (var item in Model)
{
    if (item.DataState != DataState.Active)
    {
        <tr style="background-color: red">
            <td>@item.Name</td>
        </tr>
    }
    else
    {
       <tr>
            <td>@item.Name</td>
       </tr>
    }
}

Option 2:

@foreach (var item in Model)
{
    <tr style="@( item.DataState != DataState.Active ? "background-color: red;" : "" )">
        <td>@item.Name</td>
    </tr>
}

edited Aug 12, 2015 at 8:12

answered Aug 12, 2015 at 7:22

Sender

6,90812 gold badges49 silver badges69 bronze badges

1 Comment

scgough Over a year ago

Def the most thorough answer. #thumbsup @sender

teo van kot · Accepted Answer · 2015-08-12 07:22:22Z

1

Not sure what kind of error you faces right now, but i gess your problem is that Razor don't understand all cases of tricky html render.

You can force him to render html where you need with @: symbol for single string or <text> tag like this:

 @foreach (var item in Model)
 {
    if (item.DataState != DataState.Active)
    {
        @: <tr style="background-color: red">
    }
    else
    { 
        <text><tr></text>
    }
    <td>@item.Name</td>
    </tr>
 }

answered Aug 12, 2015 at 7:22

teo van kot

12.5k10 gold badges40 silver badges73 bronze badges

1 Comment

Rob K. Over a year ago

I know that's an old post but it was just exactly what I needed today. Thank you!

scgough · Accepted Answer · 2015-08-12 07:31:11Z

1

Define the attributes in a variable. The razor parser will omit the attribute if its value is null

@foreach (var item in Model)
{
  var attributes = item.DataState == DataState.Active ? null : "background-color: red";
  <tr style=@attributes>
    <td>@item.Name</td>
  </tr>
}

edited Aug 12, 2015 at 7:31

scgough

5,2723 gold badges33 silver badges56 bronze badges

answered Aug 12, 2015 at 7:25

user3559349

Comments

scgough · Accepted Answer · 2015-08-12 07:24:46Z

0

You're probably going to get compile errors if you start splitting the <tr> tag up in the view and I'd not duplicate large chunks of code. I would do the following:

@foreach(var item in Model) {
    string strStyle=String.Empty;
    if(item.DataState!=DataState.Active) { strStyle = "background-color:red;" }
   <text>
   <tr style="@strStyle">
       <td>@item.Name</td>
   </tr>
   </text>
}

answered Aug 12, 2015 at 7:24

scgough

5,2723 gold badges33 silver badges56 bronze badges

Comments

4b0 · Accepted Answer · 2018-06-06 06:59:16Z

0

 @(item.DataState != DataState.Active  ? "style=" + "background-color:red" : "")

edited Jun 6, 2018 at 6:59

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Jun 6, 2018 at 6:55

Naveen Sharma

112 bronze badges

Comments

Joel Wiklund · Accepted Answer · 2021-11-11 17:29:48Z

0

@(!string.IsNullOrWhiteSpace(Model?.District?.Name) ? Html.Raw($"<span class=\"location\">{Model?.District?.Name}</span>") : string.Empty)

answered Nov 11, 2021 at 17:29

Joel Wiklund

1,9152 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

Writing conditional HTML with razor

7 Answers 7

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related