在 MVC 中动态添加 Boostrap 行和列

Question

我的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>
}

此方法显示一个很大的长列表，但是我只想在填充三个投资组合项后<div class="row">内显示三个 （3x） 个<div class="col-md-4 portfolio-item">然后我想创建另一个<div class="row">并填充接下来的三个<div class="col-md-4 portfolio-item">。

我怎样才能做到这一点？

Answer 1

您可以使用比

<div class="row"> for (int i = 0; i < Model.Count; i += 3)这样的外部 for 循环，而您的实际 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>
}