C# ASP.NET MVC/Bootstrap-显示带有导航控件的列表中的选定项

我有一个局部的观点，我正在回到我的家庭观点。我希望能够传入值的字符串数组，然后传回视图。该视图将允许浏览列表并控制页面上的各种内容。我需要“上一步”和“下一步”按钮来遍历列表

在我发布我的尝试之前，这里有一张我想要的图片。我首先展示这一点，因为我几乎可以肯定我的尝试不是前进的方向，我100%愿意接受任何能够实现这一目标的解决方案

我试着用旋转木马来做这件事，运气不好。第一，我甚至不能让它正常工作。第二，我无法获得我想要的外观（见上图）

@型号列表
@foreach（模型中的var项目）
{
字符串c=“”；
var i=0；
如果（i==0）
{
c=“项目活动”；
}
其他的
{
c=“项目”；
}
@项目
i++；
}

另一个想法是使用分页和一些奇特的javascript。我还没有把JS放在一起，但我想我可以管理它。我努力与css的这一个看起来合适

@模型列表

<nav class="av-no-marg">
    <ul class="pagination">
        <li class="col-md-4">
            <div>
                <a class="left carousel-control" href="#" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
            </div>

        </li>
        <li class="col-md-4">
            <div>
                TEST
            </div>
        </li>
        <li class="col-md-4">
            <div>
                <a class="right carousel-control" href="#" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

        </li>
    </ul>
</nav>

试验

我会将@foreach循环更改为for循环。如果在foreach循环内声明i，它将保持为0，除非在foreach循环外声明。下面是未经测试的代码

@for (var i = 0; i < Model.length; i++)
 {
  string c = "item";
  string item = Model.AtElement(i);
  if(i == 0)
  {
   c = "item active";
  }
  <text><div class=@c>@item</text>
}

（变量i=0；i

@for (var i = 0; i < Model.length; i++)
 {
  string c = "item";
  string item = Model.AtElement(i);
  if(i == 0)
  {
   c = "item active";
  }
  <text><div class=@c>@item</text>
}