CODEWITHSUNDEEP
asp.net-mvcrazor
Daniel Minnaar
Daniel Minnaar

Reputation: 6295

Writing conditional HTML with razor

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.

Upvotes: 6

Views: 18977

Answers (7)

Skuami
Skuami

Reputation: 1614

Here's a shorter approach:

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

Upvotes: 22

Joel Wiklund
Joel Wiklund

Reputation: 1875

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

Upvotes: 0

Naveen Sharma
Naveen Sharma

Reputation: 11

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

Upvotes: 0

Sender
Sender

Reputation: 6858

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>
}

Upvotes: 5

user3559349
user3559349

Reputation:

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>
}

Upvotes: 1

scgough
scgough

Reputation: 5252

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>
}

Upvotes: 0

teo van kot
teo van kot

Reputation: 12491

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>
 }

Upvotes: 1

Related Questions