使用循环

时间:2016-04-28 13:48:26

标签: html css asp.net asp.net-mvc-4 razor

目前,我可以在循环和文本上方显示文字,使用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等的位置吗?

1 个答案:

答案 0 :(得分:3)

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

@{
    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个项目,则第五个项目将再次为红色,依此类推。