Place items hosted by same ContentArea in seperate divs

Vote:
 

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?

Place first 12 items from ContentArea here
Place items 13 and up here



#151515
Jul 26, 2016 17:53
Vote:
 

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.

#151517
Jul 26, 2016 21:26
Vote:
 
#151549
Jul 28, 2016 11:27
Vote:
 

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>



#151550
Jul 28, 2016 13:21
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.