CODEWITHSUNDEEP
c#asp.net.netasp.net-mvclinq
Idrees Khan
Idrees Khan

Reputation: 7752

Repeat Items Horizontally after X No of Items in ASP.Net MVC

i have a partial view for menus which renders menus like this;

@helper RenderNav(CategoryViewModel item)
{

    if (item.ChildCategories.Any())
    {
        <div class="link-block">
            <ul>
                @foreach (var sub in item.ChildCategories)
                {
                    <li><a href="#"><i class="icon-angle-right"></i> @sub.Name</a></li>
                    @RenderNav(sub);
                }
            </ul>
        </div>


    }
}
@foreach (var item in Model)
{
    <li>
        <a href="#" class="label">@item.Name<i class="icon-chevron-down"></i></a>
        <ul class="one" id="links">
            <li>
                @RenderNav(item)
            </li>
        </ul>
    </li>
}


However, the resulted HTML is always repeated in a row, But i would like to get move items to next coloumn after a fix e.g 3 number of items, So that the reslted items should be displayed like this; 

    <div class="link-block">
                <ul>               
                     <li><a href="#"><i class="icon-angle-right"></i> Menu 1</a></li>
 <li><a href="#"><i class="icon-angle-right"></i> Menu 2</a></li>
 <li><a href="#"><i class="icon-angle-right"></i> Menu 3</a></li>
                </ul>
            </div>
    <div class="link-block">
                <ul>               
                          <li><a href="#"><i class="icon-angle-right"></i> Menu 4</a></li>
 <li><a href="#"><i class="icon-angle-right"></i> Menu 5</a></li>
 <li><a href="#"><i class="icon-angle-right"></i> Menu 6</a></li>
                </ul>
            </div>
    <div class="link-block">
                <ul>               
                            <li><a href="#"><i class="icon-angle-right"></i> Menu 7</a></li>
 <li><a href="#"><i class="icon-angle-right"></i> Menu 8</a></li>
 <li><a href="#"><i class="icon-angle-right"></i> Menu 9</a></li>
                </ul>
            </div>

However, the current outup is;

<div class="link-block">
    <ul>
        <li><a href="#"><i class="icon-angle-right"></i> Menu 1</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 2</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 3</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 4</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 5</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 6</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 7</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 8</a></li>
     <li><a href="#"><i class="icon-angle-right"></i> Menu 9</a></li>
    </ul>
</div>

Upvotes: 2

Views: 667

Answers (1)

Timothy Shields
Timothy Shields

Reputation: 79491

Here's an IEnumerable<T> extension method that takes a source like [A,B,C,D,E,F,G,H] and a groupSize of 3 and returns [[A,B,C],[D,E,F],[G,H]].

static IEnumerable<IEnumerable<T>> GroupSequential(
    this IEnumerable<T> source, int groupSize)
{
    return source
        .Select((x, i) => new { x, i })
        .GroupBy(t => t.i / groupSize)
        .Select(g => g.Select(t => t.x));
}

Now, instead of doing this:

<ul>
@foreach (var item in Model)
{
    <li>...render item...</li>
}
</ul>

Do this:

<table>
@foreach (var row in Model.GroupSequential(3))
{
    <tr>
    @foreach (var item in row)
    {
        <td>...render item...</td>
    }
    </tr>
}
</table>

Upvotes: 2

Related Questions