使用 MVC5 在 Foreach 循环中创建不同的类

Question

我正在使用jQuery创建一个轮播，如果您单独编写每个图像，我找到了一些非常简单的代码来实现它，但是我正在尝试使用foreach循环来实现它。问题是，轮播中的第一个div需要类"item-active"，其余的需要类"item"（请参阅：http://www.bootply.com/94444）

这就是我目前所处的位置：

<div class="row" style="background-color: #dfdfdf; padding-top: 50px;">
    @if (Model.CDSContent != null) { foreach (var item in Model.CDSContent) {
    <div class="col-md-6 col-md-offset-3">
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-4">
                        <a href="/service/@item[" ceid "]"><img src="@Html.Raw(item[" serviceimage "])" class="img-responsive"></a>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>
    } }
</div>

只是不太确定从这里开始。

Answer 1

有几种方法可以做到这一点。

1. 改用 for 循环
2. 设置布尔标志
3. 使用 Linq 获取列表。首先（），然后是列表。跳过（1）

Answer 2

我建议使用for循环，而不是foreach循环。像这样：

for(int i=0; i < Model.CDSContent.Count(); i++)
                {
                    <div class="col-md-6 col-md-offset-3">
                        <div class="carousel slide" id="myCarousel">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="col-md-4"><a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a></div>
                                </div>
                            </div>
                            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                        </div>
                    </div>
                }

然后只需使用 if 语句来检查是否i==0（如果它是循环中的第一项），如果它是，则将其类设置为 item 活动，如果不是，则将其类设置为 item：

@if(i == 0)
{
        <div class="item active">
              <div class="col-md-4">
                   <a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a>
              </div>
        </div>
}
else
{
    <div class="item">
          <div class="col-md-4">
               <a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a>
          </div>
    </div>
}

Answer 3

只要这样就足够了;

写 @（项。Equals（Model.CDSContent.First（））？"活动"："） 而不是活动

   ...
      <div class="carousel-inner">
            <div class="item @(item.Equals(Model.CDSContent.First())?"active":"")">
                    ....