如何使用 Razor 通过循环正确生成引导网格？答案

【问题标题】：How properly generate bootstrap grid via loop using Razor?如何使用 Razor 通过循环正确生成引导网格？
【发布时间】：2016-12-09 12:44:29
【问题描述】：

我使用 ASP.NET MVC 和引导程序。我有很多对象（> 2）在集合中，每个对象都需要一个<div class="col-xs-6">，但连续只有 2 个列。如何使用循环来实现这一点？有 1 种方法，但我正在寻找更好的方法：

@model List<Object>
@using (Html.BeginForm("ActionName", "ControllerName"))
{
    <div class="row">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i % 2 != 0) {
        <div class="row">
            <div class="col-xs-6">
                @Html.TextBoxFor(o => o[i].Value)
            </div>
        </div>
        } else {
            <div class="col-xs-6">
            @Html.TextBoxFor(o => o[i].Value)
            </div>
        }
    }
    </div>
}

【问题讨论】：

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

【解决方案1】：

关闭行 div 并在每第二次迭代时在循环内开始一个新行

<div class="row">
    @for (int i = 0; i < Model.Count; i++)
    {
        if (i > 0 && i % 2 == 0)
        {
            @:</div><div class="row"> // close and start new row
        }
        <div class="col-xs-6">
            @Html.TextBoxFor(o => o[i].Value)
        </div>
    }
</div>

【讨论】：

太棒了！从来不知道这个结构！
这确实很棒，显示效果很好，但是输出的 HTML 没有将前两个包裹在一行 DIV 中。只是后面的每一行。
@WillStrohl，是的（不知道你做了什么不同）

【解决方案2】：

使用这里找到的 split 方法的组合（我把它变成了一个辅助方法）

https://www.jerriepelser.com/blog/approaches-when-rendering-list-using-bootstrap-grid-system/

还有一个 for 循环，我设法用索引项实现了网格

public static class SplitListHelper
{        
    public static IEnumerable<IEnumerable<T>> Split<T>(this T[] array, int size)
    {
        for (var i = 0; i < (float)array.Length / size; i++)
        {
            yield return array.Skip(i * size).Take(size);
        }
    }
}

@if (Model != null)
{
    int rowCount = 0;
    foreach (var row in Model.ToArray().Split(4))
    {
        <div class="row">
            @for (int i = 0; i < row.Count(); i++)
            {
                <div class="col-xs-3">
                    @Html.DisplayFor(m => Model[rowCount + i].Name)
                    @Html.CheckBoxFor(m => Model[rowCount + i].Selected)                    
                </div>
            }
        </div>
        rowCount += 4;
    }                       
}

【讨论】：