在循环浏览Razor视图中的列表时,为每2个项创建一个引导行

时间:2016-10-12 16:51:17

标签: c# asp.net-mvc twitter-bootstrap razor

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

@model IEnumerable<VideoViewModel>

我正在努力使每2个视频都在一个引导行中。两者的第一个视频将在第一个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>

1 个答案:

答案 0 :(得分:4)

您需要批量列表,然后循环批量处理。您可以创建这样的扩展方法(来自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>
}