Formatting using loop - html

Question

Currently at the moment I am able display text from a loop and above the text a red circle displays using the i class and code below:
<div id="testwrap">
#foreach (mainnav mainnav in #Model)
{
if (mainnav.HasSideNav == 0)
{
<a style="color:red" href='#Url.Action("Content", new { id = mainnav.contentID })' class="ajax2">#mainnav.DisplayLabel</a>
}
else
{
<div class="col-sm-3 text-center feature">
<i class="fa fa-tablet iconred"></i>
<a style="color:blue" href='#Url.Action("SideNavLevel1", new { id = mainnav.MNavSubID })' class="ajax2">#mainnav.DisplayLabel</a>
</div>
}
}
</div>
My aim is it to have the icon be blue, green, yellow, orange etc...
I have tried to add in a counter but it doesn't work.
Can anybody help me to add the loop/ counter in to change where is says iconred to iconblue etc...?

Answer 1

You can keep your colors in an array and use that along with a counter.
#{
var counter = 0;
string[] colors = new string[] { "red", "blue", "orange","green" };
}
<div id="testwrap">
#foreach (var mainnav in YourCollection)
{
if (mainnav.HasSideNav == 0)
{
<a style="color: red" href='#' class="ajax2">#mainnav.DisplayLabel</a>
}
else
{
<div class="col-sm-3 text-center feature">
<i class="fa fa-tablet icon#(colors[counter])"></i>
<a style="color: blue" href='#' class="ajax2">#mainnav.DisplayLabel</a>
</div>
}
counter++;
if (counter == 4)
{
counter = 0;
}
}
</div>
If you have more than 4 items in your collection, the fifth item will be again red and so on.