[英]dynamically add boostrap rows and columns in mvc
我的foreach循环有问题:
@for(int i = 0; i < Model.Count(); i += 3)
{
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4 portfolio-item">
<a href="@Html.DisplayFor(modelItem => item.UrlSlug)">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="@Html.DisplayFor(modelItem => item.UrlSlug)">@Html.DisplayFor(modelItem => item.Title)</a>
</h3>
<p>@Html.DisplayFor(modelItem => item.ShortDescription)</p>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</div>
}
</div>
}
这个方法显示了一个很长的列表,但是我只想在填充三个项目组合项目后显示三个(3x) <div class="col-md-4 portfolio-item">
在<div class="row">
里面然后想要创建另一个<div class="row">
并填充接下来的三个<div class="col-md-4 portfolio-item">
。
我怎样才能做到这一点?
您可以使用外部for循环,如for (int i = 0; i < Model.Count; i += 3)
不是<div class="row">
并且您的实际foreach使用Model.Skip(i).Take(3)
。
@for(int i = 0; i < Model.Count(); i += 3)
{
<div class="row">
@foreach (var item in Model.Skip(i).Take(3))
{
<div class="col-md-4 portfolio-item">
<a href="@Html.DisplayFor(modelItem => item.UrlSlug)">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
<a href="@Html.DisplayFor(modelItem => item.UrlSlug)">@Html.DisplayFor(modelItem => item.Title)</a>
</h3>
<p>@Html.DisplayFor(modelItem => item.ShortDescription)</p>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</div>
}
</div>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.