如何使用Razor通过循环正确生成Bootstrap网格？

Question

我使用ASP.NET MVC和Bootstrap。我有一个包含多个对象(>2)的集合，每个对象都需要一个<div class="col-xs-6">，但是每行只能有两列。如何使用循环实现这一点？有一种方法，但我正在寻找更好的解决方案：

@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>
}

- Vitalii Isaenko

Answer 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>

- user3559349

---

太棒了！从未知道这种构造！ - Vitalii Isaenko

这确实很棒，显示正常，但输出的HTML没有前两个包装在一行DIV中，只有每个后续行。 - Will Strohl

@WillStrohl，是的，它可以（不确定你做了什么不同的）。 - user3559349

Answer 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;
    }                       
}

- Possam