Rendering 2-column layout in an Editor Template

Question

I'd like to have a 2 column layout, but the problem is I can't place half my HTML codes inside else segment. Any Idea?

This is the editor template:

@{int i = 0;}
@foreach (var property in ViewData.ModelMetadata.Properties)
{
    if (property.PropertyName.StartsWith("Z") ||
                property.IsReadOnly)
    {
        continue;
    }
    if (i++ % 2 == 0)
    {
        <div class="form-group form-inline col-xs-12">
            <div class="col-xs-5">
                @Html.Label(property.DisplayName, new { @for = property.PropertyName, @class = "control-label col-xs-3" })
                @Html.TextBox(property.PropertyName, new { @class = "form-control" })
            </div>
            <div class="col-xs-5">
                @Html.Label(property.DisplayName, new { @for = property.PropertyName, @class = "control-label col-xs-3" })
                @Html.TextBox(property.PropertyName, new { @class = "form-control" })
            </div>
        </div>
    }
    else
    {

    }
}

The second <div class="col-xs-5"> and the closing tags should be in else.

Answer 1

You need start a containing <div> and then in the if block, close and start a new containing <div>

@{int i = 0;}
<div class="form-group form-inline col-xs-12">
    @foreach (var property in ViewData.ModelMetadata.Properties) {
        if (property.PropertyName.StartsWith("Z") || property.IsReadOnly) {
            continue;
        }
        <div class="col-xs-6">
            @Html.Label(property.DisplayName, new { @for = property.PropertyName, @class = "control-label col-xs-3" })
            @Html.TextBox(property.PropertyName, new { @class = "form-control" })
        </div>
        if (++i % 2 == 0) {
            @:</div><div class="form-group form-inline col-xs-12">
        }
    }
</div>