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")
{
  
  ...
}
else
{
  
  ...
}

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")
    {
        
            
                @Html.DisplayFor(modelItem => item.timestamp)
            
            
                @Html.DisplayFor(modelItem => item.subject)
            
            
                @Html.DisplayFor(modelItem => item.message_text)
            
            
                @Html.DisplayFor(modelItem => item.status)
            
            
                @Html.DisplayFor(modelItem => item.user_sender.username)
            
            
                @Html.DisplayFor(modelItem => item.user_reciever.username)
            
            
                @Html.ActionLink("Edit", "Edit", new { id = item.id }) |
                @Html.ActionLink("Details", "Details", new { id = item.id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.id })
            
        
    }
}

user_4964569 · Answer

This way I used in my project.

You can use unitary operator like below

user_6774666 · Answer

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

     
     itemIndex++;
}

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

If Statement (For CSS Class) on Razor Views

4 Answers