If Statement (For CSS Class) on Razor Views

Question

I need to switch between a CSS class depending if the message is read.

In simple it should be like this:

if (item.status == "Unread")
{
  <tr style="font-weight:bold">
  ...
}
else
{
  <tr>
  ...
}

I am having trouble achieving this though. Can something tell me a good to get this done? Should I be using a HTML helper or something?

This is the full code so far:

@foreach (var item in Model) {

    if (item.status == "Unread")
    {
        <tr style="font-weight:bold">
            <td>
                @Html.DisplayFor(modelItem => item.timestamp)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.subject)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.message_text)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.user_sender.username)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.user_reciever.username)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.id }) |
                @Html.ActionLink("Details", "Details", new { id = item.id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.id })
            </td>
        </tr>
    }
}

Glissade

Answer 1

A simple solution would be something like this:

@foreach (var item in Model) 
{
    var style = (item.status == "Unread") ? "font-weight:bold" : "";

    <tr style="@style">
        ...
    </tr>
}

But note, it's generally cleaner to have a separate CSS class, then directly decorate the elements the appropriate class based on its status. For example:

/* css */
tr.status-unread { font-weight: bold; }
...

/* razor */
@foreach (var item in Model) 
{
    <tr class="[email protected]()">
        ...
    </tr>
}

Mardellmarden

Oh nice!, I didn't know you can do it like that in razor view. – Glissade

I just want to add that in the first example you can write: var style = (item.status == "Unread") ? "font-weight:bold" : null; and if this evaluates to null, the style attribute will not render at all. This is true for any html attribute in a Razor page. I use it for multiple classes all the time to change the look of the "item". – Dormer

Answer 2

Another simpler solution would be this,

1. With single condition:

   @foreach (var item in Model) 
   {
       <tr style="@Html.Raw(item.status == "Unread" ? "font-weight:bold" : "")">
           ...
       </tr>
   }
   

2. OR you can set CSS class as you asked with multiple conditions if any,

   @foreach (var item in Model) 
   {
       <tr class="@Html.Raw((item.status == "Unread" && item.subject == "Hello World") ? "alert-success" : "")">
           ...
       </tr>
   }
   

Sartorius

I would prefer the coding style of the accepted answer. You mistake code inlining for code simplicity. – Salty

Answer 3

This way I used in my project.

You can use unitary operator like below

<td style="color:'@(item.ChangeRate > 0 ? "red" : "blue")'">
 <i class="fa" class="@(item.ChangeRate > 0 ? "fa-caret-up" : "fa-caret-down")"></i>
</td>

Scilla

Answer 4

Although you have got the answer. I just want to add another line in case it might help someone who is searching for slightly different answer.

@{
var itemIndex = 1;

@foreach (var item in Model)
{
     var needsBorder = (itemIndex % 4 != 0) ? "border-right: 1px solid #e6e7e8;" : "border-right: 0px solid #e6e7e8;";           

     <div class="something" style="@needsBorder ">
     itemIndex++;
}

Above example will only put the border to right when it's fourth index or % by 4.

Eyrir