Place items hosted by same ContentArea in seperate divs

Toke Frostholm

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

Dejan Caric

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

Toke Frostholm

Vote:

#151549

Jul 28, 2016 11:27

Toke Frostholm

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