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

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

Solution 2

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>

Solution 3

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

Comments

[JohnC1]

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

[Sascha Gottfried]

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

[secretwep]

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".