Building Bootstrap template with @foreach from asp.net razor not as expected

Question

I have a json with some objects. Using @foreach from Razor, I want to expose the results on a template, along with some filters that will filter my results.

The problem is that I can't render the template correctly. I want my sidebar/widget to be rendered one time one the right, and the results to be rendered one bellow another, and to look as you'd expect.

CODE:

@{int i = 0;}
@{
    var client = new WebClient();
    var json = client.DownloadString("http://example.com/raw/a5N8mJ2Y");
    var results = Json.Decode(json);
}

<div class="container">
    <div class="row">
        @foreach (var result in results)
        {
            i++;
            if (i == 2)
            {
                <!-- Left sidebar goes here -->
                <aside id="sidebar" class="col-sm-3">
                    <section id="filters">
                        <h3>Filtre</h3>
                        ...
                    </section>
                </aside>
            }
            <div style="border-style: groove; " class="col-sm-9">

                <!-- objects from json go here -->

            </div>
        }
    </div>
</div>

Screenshot:

@tmg, worked. But it's no longer reponsive, and it doesnt look so good on mobile :) — Gerald Hughes
– Gerald Hughes, Commented Mar 18, 2016 at 11:30

Matthew Allen · Accepted Answer · 2016-03-18 11:34:10Z

1

If you want your sidebar to appear only once, it's pointless being in the foreach loop. It's getting put to the right and pushing the next item down because you're placing it between the results columns.

I think you should set it out so there is one aside element outside of the foreach loop and one column that contains the json items, e.g.

<div class="container">
    <div class="row">
        <!-- Left sidebar goes here -->
        <aside id="sidebar" class="col-sm-3">
            <section id="filters">
                <h3>Filtre</h3>
                    ...
            </section>
        </aside>
        <div class="col-sm-9">
        @foreach (var result in results)
        {
            <div class="item-result">
                <!-- object result here -->   
            </div>
        }
        </div>
    </div>
</div>

Then just style your .item-result class like:

.item-result{
    border-style: groove;
    display: block;
    margin-bottom: 15px;
}

answered Mar 18, 2016 at 11:34

Matthew Allen

83110 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Allen Over a year ago

That's odd. It looks like the .item-results are collapsing. Could you edit in any relevant styles that you are using so I can get a better idea of what's going on. Did you get rid of the float:right that you previously added onto #sidebar?

Collectives™ on Stack Overflow

Building Bootstrap template with @foreach from asp.net razor not as expected

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related