AI OnAI Off
I guess the easiest way to solve this is to create a viewmodel that has one property for div1 and one property for div2.
In page controller, you could have some like this:
var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>(); if (currentPage.MyContentArea?.FilteredItems != null) { var firstList = currentPage.MyContentArea .FilteredItems .Select(item => contentLoader.Get<IContent>(item.ContentLink)) .Take(12) .ToList(); var secondList = currentPage.MyContentArea .FilteredItems .Select(item => contentLoader.Get<IContent>(item.ContentLink)) .Skip(12) .ToList(); }
And then it's easy to render divs using the foreach loop.
Thanks a lot Dejan!
My controller looks like this:
var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>(); if (currentBlock.MyContentArea?.FilteredItems != null) { viewModel.FirstList = currentBlock.MyContentArea.FilteredItems.Select(item => contentLoader.Get<MySubBlock>(item.ContentLink)) .Take(12) .ToList(); viewModel.SecondList = currentBlock.MyContentArea.FilteredItems.Select(item => contentLoader.Get<MySubBlock>(item.ContentLink)) .Skip(12) .ToList();
And my viewmodel:
public List<MySubBlock> FirstList { get; set; } public List<MySubBlock> SecondList { get; set; }
Rendering views:
<div class="div1"> @if (Model.FirstList != null && Model.FirstList.Any()) { Html.RenderPartial("/Views/MySubBlock/Index.cshtml", Model.FirstList.ToArray()); } </div> <div class="div2" data-toggle-id="id"> @if (Model.SecondList != null && Model.SecondList.Any()) { Html.RenderPartial("/Views/MySubBlock/Index.cshtml", Model.SecondList.ToArray()); } </div>
How can I place the first and up to the 12th item from a ContentArea in one div while making sure that if more than 12 items exist any item above the 12th must be placed in another div?