在foreach中使用C＃foreach，在每个项目中显示3个项目。圆盘传送带

Question

我正在使用asp.net MVC 4作为我的项目，我有一个模型。 我正在使用Bootstrap Carousel为我的索引页面显示产品（见下图）

现在我的问题是：我想在每个幻灯片项目中显示3个产品。 我应该为此写一个ViewModel吗？

<div class="carousel slide>
  @for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
    {
      <div class="item @if(i==0){<text>active</text>}">
        @foreach(var well in Model)
        {
            <div class="span4">
                <!-- some html here -->
            </div>
        }
      </div>
    }
</div>

Answer 1

您的内心foreach正在遍历整个Model集合 - 您需要将其限制为相关的三个项目。

我猜你想要的东西是：

<div class="carousel slide>
    @for (int i = 0; i <= Model.Count()/3; i++ ) <!-- this works well, paging -->
    {
        <div class="item @if(i==0){<text>active</text>}">
        @foreach(var well in Model.Skip(i*3).Take(3))
        {
            <div class="span4">
                <!-- some html here -->
            </div>
        }
        </div>
    }
</div>

Answer 2

考虑此问题的一种方法是将原始集合拆分为每3个连续元素的组。幸运的是，您可以使用GroupBy LINQ方法，使用“元素索引除以3”作为键。 IMO，这个解决方案的优势在于它更清楚地表达了您的意图，并且比在内循环中使用Skip(x * 3).Take(3)重复集合具有更好的性能。

<div class="carousel slide>
    @foreach (var group in Model.Select((x, index) => new { element = x, index }).GroupBy(x => x.index / 3, x => x.element))
    {
        <div class="item @if( group.Key == 0) {<text>active</text>}">
        @foreach(var well in group)
        {
            <div class="span4">
                <!-- some html here -->
            </div>
        }
        </div>
    }
</div>

我甚至会将模型类型更改为ILookup<int, TElement>并在控制器中执行分组。