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?

Answer 1

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.