VisualStudio auto-format doesn't format my razor code correctly

Question

I'm using @:</div> to display some bootstrap columns correctly. This is the my code where i'm using it:

var i = 0;

<div class="container-fluid">
    <div class="row show-grid">
        @foreach (var one in Model)
        {

            if (i % 3 == 0)
            {
                @:<div class="row show-grid">
            }

            <div class="one-element col-md-4">
                @one.Title
            </div>

            if ((i + 1) % 3 == 0)
            {
                @:</div>
            }

            i++;
        }
    </div>
</div>

It formats this (which works fine as long as i don't use the VisualStudio auto-format feature):

@:</div>

to this:

@:
</div>

And then the application doesn't work anymore.

How can this be fixed?

Side note: I think it would be much nicer to group by 3 and render with normal Razor constructs instead of hacking with mismatched tags... But indeed it is an option. — Alexei Levenkov, Aug 20 '15 at 04:58
@AlexeiLevenkov sounds good. Could you provide an example or a link to an example please? — Jo Smo, Aug 20 '15 at 05:00
`items.Select((value, index)=>new { value, index}).GroupBy(x=>x.index / 3)` or many other variants starting http://stackoverflow.com/questions/29606945/how-to-build-batches-buckets-with-linq... Search - https://www.bing.com/search?q=c%23+enumerable+buckets — Alexei Levenkov, Aug 20 '15 at 05:05

score 1 · Answer 1 · answered Aug 20 '15 at 04:20

I fixed it by using @Html.Raw() like this:

var i = 0;

<div class="container-fluid">
    <div class="row show-grid">
        @foreach (var one in Model)
        {

            if (i % 3 == 0)
            {
                @Html.Raw("<div class=\"row show-grid\">")
            }

            <div class="one-element col-md-4">
                @one.Title
            </div>

            if ((i + 1) % 3 == 0)
            {
                @Html.Raw("</div>")
            }

            i++;
        }
    </div>
</div>

I guess that this is as good as it gets.

But if anyone knows of a more elegant way to do it, please let me know.

score 0 · Answer 2 · edited May 23 '17 at 12:14

Ok, i get now, that i was wrong with <text> tag and here is why:

In Razor, tags must be nested properly. <text></div></text> is not proper nesting.

The best way to solve your problem mention by @Alexei Levenkov:

<div class="container-fluid">
    <div class="row show-grid">
        @foreach (var one in Model.Select((value, index) => new { value, index }).GroupBy(x => x.index / 3))
        {
            <div class="row show-grid">
                @foreach (var el in one.Select(x => x.value))
                {
                    <div class="one-element col-md-4">
                        @el.Title
                    </div>
                }
            </div>
        }
    </div>
</div>

But, according to this answer your Html.Raw() approach is good enought.

You just copied `Alexei Levenkov`'s answer/comment. I think that he should get the credit. Maybe he will even write it as an answer. — Jo Smo, Aug 20 '15 at 20:42

Tchaps · Answer 3 · 2015-08-20T21:40:40.587

-2

It's seem like the problem here is that you are opening a <div> on condition if (i % 3 == 0) but you are not closing </div> on the same condition if ((i + 1) % 3 == 0).
This mean that you could have an opening <div> that never close or a closing </div> that never opened.
May be you can try this:

var i = 0;

<div class="container-fluid">
  <div class="row show-grid">
    @foreach (var one in Model)
    {
        <div class="one-element col-md-4">
            @one.Title
        </div>

        if (i % 3 == 0)
        {
           <div class="clear"></div>
        }

        i++;
    }
  </div>
</div>

May be this is where you are having trouble ! I updated on your comment. update on @Alexei Levenkov comment. I'm also looking at a better way of doing this. This solution is how i'm doing it in my projects when i need a 3 columns per row .

edited Aug 20 '15 at 21:40

answered Aug 20 '15 at 04:28

Tchaps

865
7
21

I know... But if i open and close the tag inside the if statement, how should i make the 3 columns per 1 row work? – Jo Smo Aug 20 '15 at 04:48
I updated my code to reflect a 3 columns per line. This code works for me. You can clear row after 3 elements and this bring you back to a new row. – Tchaps Aug 20 '15 at 07:50
Consider removing completely unfair statement about correctness of OP's code... Also not that your change generates completely different markup than OP - so I think downvote is still justified. – Alexei Levenkov Aug 20 '15 at 18:45
Thank you. I guess that this would work too, but it's not by bootstrap standards: http://getbootstrap.com/css/#grid-options i want the bootstrap code to be clean (without hacks). – Jo Smo Aug 20 '15 at 20:41

VisualStudio auto-format doesn't format my razor code correctly

3 Answers3