[asp.net-mvc]在 mvc 中动态添加自举的行和列

发布时间: 2016/10/7 2:36:34
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个问题与我的 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>
}

此方法显示一个大的长列表,但是我只想要显示三 (3 x) <div class="col-md-4 portfolio-item"><div class="row"> 组合的三个项目已填充后然后想要创建另一个 <div class="row"> 和填充下一个<div class="col-md-4 portfolio-item">

我如何可以做到这一点?

解决方法 1:

您可以使用 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>
}
官方微信
官方QQ群
31647020