Rendering 2-column layout in an Editor Template - asp.net-mvc

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>

Answer 2

Not sure what exactly you want in the else, but to have but you should declare the parent div before you loop through the other objects. Also if its a two column, they should be col-xs-6 as explained on bootstrap.
#{int i = 0;}
<div class="form-group form-inline">
<div class="row">
#foreach (var property in ViewData.ModelMetadata.Properties)
{
if (property.PropertyName.StartsWith("Z") ||
property.IsReadOnly)
{
continue;
}
if (i++ % 2 == 0)
<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>
}
else
{
<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>
}
}
</div>
</div>

Answer 3

I think they way you are trying to render your form is way too complicated for no reason, col-xs-** already floats left, you do not have to worry about "odd left - even right".
<div class="row form-horizontal">
#foreach (var property in ViewData.ModelMetadata.Properties)
{
if (property.PropertyName.StartsWith("Z") || property.IsReadOnly)
{
continue;
}
<div class="col-xs-6">
<div class="form-group">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-12 col-sm-3" })
<div class="col-xs-12 col-sm-3">
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
</div>
</div>
}
</div>