我使用ASP.NET MVC和Bootstrap。我在集合中有许多对象(> 2),每个对象都需要<div class="col-xs-6">
,但只有2个COL。如何使用循环来实现这一目标?有一种方法,但我正在寻找更好的东西:
@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>
}
关闭行div
,并在每2个迭代中启动一个新的循环
<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>
使用此处找到的分裂方法的组合(我变成了辅助方法)
https://www.jerriepelser.com/blog/appleaches-when-rendering-lendering-list-using-bootstrap-grid-system/
和a 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;
}
}