locked
dynamically building 3 column bootstrap layout RRS feed

  • Question

  • User-1029724153 posted

    HI there, i've got a List<T> with data that i want to display on the page, using the bootstrap 3-column syntax, but i keep having compiler issues trying to implement row start/end conditional logic. Basically what i'm trying to acheieve is to start a div on every first rowcounter item, then add an end div after the 3rd one, to close of the bootstrap row div. Someone wrong with the syntax and the conditional statements are being displayed onto the screen instead. any help appreciated.

     <div class="container">
            @{
                int totalCounter = 0;
                int rowCounter = 1;
                foreach (var item in Model)
                {
                    totalCounter++;
                    if (rowCounter == 1)
                    {
                        <div class="row">
                    }
    
                    <div class="col-sm-4">
                        <div class="item">
                            <h3>@item.Name</h3>
                            <p class="description">@item.Description</p>
                        </div>
                    </div>
    
                    if (rowCounter == 3 || totalCounter == Model.Count)
                    {
                        rowCounter = 0;
                        //row end
                        </div>
                    }
                    else
                    {
                        rowCounter++;
                    }
                }
            }
        </div>
    

    Sunday, February 22, 2015 5:52 PM

Answers

  • User-1029724153 posted

    problem solved, i just moved the logic into the controller to return me lists of 3 items in a list:

    var result = items

    .Select((x, i) => new {Index = i, Value = x})
    .GroupBy(x => x.Index/3)
    .Select(x => x.Select(v => v.Value).ToList())
    .ToList();

    then draw them out in the cshtml with nested for loops, one for the row level, one for the item level.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, February 22, 2015 6:27 PM

All replies

  • User-1029724153 posted

    problem solved, i just moved the logic into the controller to return me lists of 3 items in a list:

    var result = items

    .Select((x, i) => new {Index = i, Value = x})
    .GroupBy(x => x.Index/3)
    .Select(x => x.Select(v => v.Value).ToList())
    .ToList();

    then draw them out in the cshtml with nested for loops, one for the row level, one for the item level.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, February 22, 2015 6:27 PM
  • User-166373564 posted

    HI milsnips,

    problem solved, i just moved the logic into the controller to return me lists of 3 items in a list:

    var result = items

    .Select((x, i) => new {Index = i, Value = x})
    .GroupBy(x => x.Index/3)
    .Select(x => x.Select(v => v.Value).ToList())
    .ToList(); 

    Glad that you have solved this issue, thanks for sharing this to us.

    Best regards,

    Angie

    Monday, February 23, 2015 1:54 AM