dimanche 19 avril 2015

dynamically add boostrap rows and columns in mvc

I am having an issue with my foreach loop:

@foreach (var item in Model)
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="@Html.DisplayFor(modelItem => item.UrlSlug)">
<img class="img-responsive" src="http://ift.tt/1yI890U" alt="">
<a href="@Html.DisplayFor(modelItem => item.UrlSlug)">@Html.DisplayFor(modelItem => item.Title)</a>
<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 })

This method displays one big long list, however I only want to display three (3x) <div class="col-md-4 portfolio-item"> inside <div class="row"> after three portfolio items has been populated I then want to create another <div class="row"> and populate the next three <div class="col-md-4 portfolio-item">.

How can I achieve this?

Aucun commentaire:

Enregistrer un commentaire