Conditionally change CSS class in Razor view
Solution 1:
@{
int counter=0;
}
@foreach (var item in Model)
{
counter++;
<div class="@(counter<=3 ? "classRed":"classBlue")">
<img src="@item.Blog.Image.img_path" alt="Not Found" />
//other markup also here
</div>
if (counter == 6)
{
counter = 0;
}
}
Where classRed
and classBlue
are the CSS classes
Solution 2:
How we handle this issue:
1) you need to create helper method that will return css class by some code.
string GetDivClass(int code)
{
var classes = new [] {"first", "second", "third"};
return classes[code];
}
2) create counter/index and increment it in the loop each time.
3) invoke helper method like GetDivClass(index % 3)
at the div element.
PS
It is only POC, so don't use it in a real application (you need to add a validation logic and move 'classes' initialization to another place).
Solution 3:
You can write any code you like into a Razor view, so to do what you're thinking of, you could do something like this (I left out most of the inner stuff):
@{
var className = "ForumChild";
}
<div>
@for (int i = 0; i < Model.Count; i++)
{
var item = Model[i];
if (i % 3 == 0)
className = GetNewClassName(); // Or whatever
<div class="@className">
</div>
}
</div>