JohnC1 JohnC1 - 3 months ago 29
C# Question

If Statement (For CSS Class) on Razor Views

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

Answer

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="status-@item.status.ToLowerInvariant()">
        ...
    </tr>
}