使用循环格式化

Question

目前，我可以使用i class 和以下代码显示循环中的文本，并在文本上方显示一个红色圆圈：

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

我的目标是让图标变成蓝色、绿色、黄色、橙色等......

我尝试添加一个计数器，但它不起作用。

谁能帮我添加循环/计数器以将 iconred 的位置更改为 iconblue 等...？

Answer 1

您可以将颜色保存在一个数组中，并将其与计数器一起使用。

@{
    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>

如果您的收藏中有超过 4 个项目，则第五个项目将再次变为红色，依此类推。