c# - 在 Razor View 中循环列表时为每 2 个项目创建 Bootstrap 行

Question

我有一个 IEnumerable 的视频对象作为我的 Razor View 的模型。

@model IEnumerable<VideoViewModel>

我正在努力做到每 2 个视频都在一个 Bootstrap 行中。两个视频中的第一个视频将在第一个 col-md-6 中，两个视频中的第二个视频将在第二个 col-md-6 中。

这是我希望使用 Razor foreach 循环执行的操作的示例:

<div class="row">
    <div class="col-md-6">
        First video in model
    </div>
    <div class="col-md-6">
        Second video in model
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        Third video in model
    </div>
    <div class="col-md-6">
        Fourth video in model
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        Fifth video in model
    </div>
    <div class="col-md-6">
        Sixth video in model
    </div>
</div>

Answer 1

您需要对列表进行批处理，然后遍历这些批处理。您可以创建这样的扩展方法(来自 Create batches in linq ):

public static IEnumerable<IEnumerable<TSource>> Batch<TSource>(
                  this IEnumerable<TSource> source, int size)
{
    TSource[] bucket = null;
    var count = 0;

    foreach (var item in source)
    {
        if (bucket == null)
            bucket = new TSource[size];

        bucket[count++] = item;
        if (count != size)
            continue;

        yield return bucket;

        bucket = null;
        count = 0;
    }

    if (bucket != null && count > 0)
        yield return bucket.Take(count);
}

然后你可以像这样运行批处理:

@foreach(var batch in Model.Batch(2))
{
    <div class="row">
    @foreach(var item in batch)
    {
        <div class="col-md-6">
            Fifth video in model
        </div>

    }
    </div>
}