Separate items into divs by count (or make secondary list for items by count)
Using razor/cshtml, I want to display items in an rotating display of four items at a time, but I don't know how to break the items into "slides" containing four items.
I think it would basically mimic paging, but I don't want to involve any querystrings. The display is just a small section of a single page, and actual pagination would be too complex for what it's meant to do.
EDIT FOR CLARIFICATION:
If I have 10 items and I want to only show 4 at a time, how to I take the full list of 10 items and:
1. Break the list into three lists;
2. each containing 4, 4, and 2 items;
3. in order, without repeating.
I'm confused about how I would translate these answers to razor .cshtml scripts/files.
I was going to show all the pages in a slider, like a javascript/jquery slider or rotator often used for images, except this would be a rotating display of four items.
Your query is more of a C# one rather than a Umbraco one, but hopefully this will help. In my example myEnumerable is a collection of numbers 1 - 10, which I'll split in to unordered lists of length 4.
Your myEnumerable might well be a collection of pages or something, but hopefully you'll work the rest out.
var batchSize = 4;
var myEnumerable = Enumerable.Range(1, 10).ToArray();
var totalBatches = (int)Math.Ceil((float)myEnumerable.Length/batchSize );
foreach(var i = 0; i < totalBatches; i++){
var batch = myEnumerable.Skip(i * batchSize).Take((i+1)*batchSize);
<ul>
@foreach(var item in batch){
<li>
@item
<li>
}
</ul>
}
I think I must be missing something critical to making your code work in my site, David Peck, but I did manage a use of Skip() and Take() that fits the items into separate lists:
But I don't think this is very dynamic. The setup for the site right now doesn't have the option to add more than ten items, but if that option is ever added it would require editing the file. On top of that, I have to repeat the actual code that writes content to the website for each list. Is there a cleaner way to write the code for separating the items into lists?
//This here is an outter loop that is calculating how many
//sets of 4 exist in your list
for(int i = 0; i < Math.Ceiling(items.Count / 4); i++)
{
//This line here will skip by i * 4 each time, so 0, 4, 8 etc as i increases.
var itemsToProcess = items.Skip(i * 4).Take(4).ToList();
<div>
@foreach(var item in itemsToProcess)
{
//some code here to render out your individual item
}
</div>
}
I'm not 100% the maths in the condition of the for loop is exactly right but it is basically there. What it should be doing is dividing the number of items in your list by 4. Then Math.Ceiling should return the upper end.
So it you have 10 items, 10 / 4 = 2.5. The Math.Ceiling returns 3.
So you for loop will run as if it is written like this for(int i = 0; i < 3; i++)
Does that make sense?
It gives you scope for growth and flexibility. Then you can use any slider front end to display your "slides".
Alternatively, you can look for a slider front end that allows you to specify how many slides to show at once, that might be a better option from a usability point of view.
Separate items into divs by count (or make secondary list for items by count)
Using razor/cshtml, I want to display items in an rotating display of four items at a time, but I don't know how to break the items into "slides" containing four items.
I think it would basically mimic paging, but I don't want to involve any querystrings. The display is just a small section of a single page, and actual pagination would be too complex for what it's meant to do.
EDIT FOR CLARIFICATION: If I have 10 items and I want to only show 4 at a time, how to I take the full list of 10 items and: 1. Break the list into three lists; 2. each containing 4, 4, and 2 items; 3. in order, without repeating.
I'm not sure how you're suggesting page 2 will be shown, but to split a collection in to pages see the solution here: https://stackoverflow.com/questions/13709626/split-an-ienumerablet-into-fixed-sized-chunks-return-an-ienumerableienumerab
Also using Skip() and Take(): https://stackoverflow.com/questions/15385905/linq-with-skip-and-take
I'm confused about how I would translate these answers to razor .cshtml scripts/files.
I was going to show all the pages in a slider, like a javascript/jquery slider or rotator often used for images, except this would be a rotating display of four items.
I've been searching since posting this and still have no answers.
Is there really no way to separate items into frames that could be turned into a slider via javascript?
If I have 10 items in a list
I want to separate the first 4 into a div
And the next 4 into a div
And the last 2 into a div
This doesn't seem like it should be so difficult, but I have no answers. I can't even find any similar questions about separating items by count.
Your query is more of a C# one rather than a Umbraco one, but hopefully this will help. In my example
myEnumerableis a collection of numbers 1 - 10, which I'll split in to unordered lists of length 4.Your
myEnumerablemight well be a collection of pages or something, but hopefully you'll work the rest out.I think I must be missing something critical to making your code work in my site, David Peck, but I did manage a use of Skip() and Take() that fits the items into separate lists:
But I don't think this is very dynamic. The setup for the site right now doesn't have the option to add more than ten items, but if that option is ever added it would require editing the file. On top of that, I have to repeat the actual code that writes content to the website for each list. Is there a cleaner way to write the code for separating the items into lists?
Hi Mizzle,
Try something like this:
I'm not 100% the maths in the condition of the for loop is exactly right but it is basically there. What it should be doing is dividing the number of items in your list by 4. Then
Math.Ceilingshould return the upper end.So it you have 10 items, 10 / 4 = 2.5. The Math.Ceiling returns 3. So you for loop will run as if it is written like this
for(int i = 0; i < 3; i++)Does that make sense?
It gives you scope for growth and flexibility. Then you can use any slider front end to display your "slides".
Alternatively, you can look for a slider front end that allows you to specify how many slides to show at once, that might be a better option from a usability point of view.
Nik
My foreach should be a for.
In my example swap, myEnumerable for items.
Thank you both, you've helped me a lot! I think I finally have everything I need.
is working on a reply...