Razor View IF to a partial div - asp.net-mvc

Question

The thing is that Im trying to change background color of a div depending on an IF condition inside a foreach and I didnt wanted to make an entire replication of the code for every single condition(3 conditions actually).
My idea was to do something like:
#foreach (var item in Model.Models)
{
#if (item.Status == "COMPLETED")
{
<div class="card teal darken-2 white-text">
}
#if (item.Status == "NOT STARTED")
{
<div class="card grey white-text">
}
#if (item.Status == "RUNNING")
{
<div class="card blue white-text">
}
<div class="card content">
</div>
</div>
</div>
}
But it seems that HTML detects the 3 divs with no closure and it crushes saying that the foreach needs an ending }.
Any ideas?

Answer 1

Your current code is failing because you are trying to mix C# code with plain text.
The if condition opens a C# code block. So if you want to mix plain text or html inside that, you need to use #: prefix. #: tells razor that the following is not C# code, but plain text. It is same as <text></text> tag
You also had an extra closing div.
This should work.
#foreach (var item in Model.SomeCollection)
{
if (item.Status == "COMPLETED")
{
#:div class="card teal darken-2 white-text">
}
if (item.Status == "RUNNING")
{
#:div class="card grey white-text">
}
<div class="card content">#item.Name</div>
#:</div>
}
I personally prefer to add less C# code inside views. I like to keep my views more Htmly. I would create a separate method which can return the css class you need based on the Status value.
Here is an extension method.
public static class UiExtensionMethods
{
public static IHtmlString GetStatusClass(this string item)
{
switch (item)
{
case "COMPLETED":
return MvcHtmlString.Create("teal darken-2 white-text");
case "RUNNING":
return MvcHtmlString.Create("blue white-text");
default:
return MvcHtmlString.Create("gray white-text");
}
}
}
Now all you have to do is, call this method in your view.
<div>
#foreach (var item in Model.Tags)
{
<div class="card #item.Status.GetStatusClass()">
<div class="card content">
#item.Status
</div>
</div>
}
</div>
I created the extension method on string. You can create it on more specific type (Your Status class/Status type(enum?)/ The type of each item in your collection.)