在编辑器模板中渲染2列布局

时间:2015-05-19 07:29:00

标签: asp.net-mvc razor twitter-bootstrap-3 mvc-editor-templates

我想要一个2列布局,但问题是我无法将一半的HTML代码放在else段内。有什么想法吗?

这是编辑器模板:

@{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
    {

    }
}

第二个<div class="col-xs-5">和结束标记应该在其他位置。

3 个答案:

答案 0 :(得分:1)

不确定你在else中究竟想要什么,但是要在你遍历其他对象之前声明父div。如果它是两列,它们应该col-xs-6,如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>

答案 1 :(得分:1)

我认为他们试图渲染你的表格的方式太复杂了,col-xs - **已经漂浮了,你不必担心&#34;奇怪的左边 - 甚至是正确的&#34 ;

<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>

答案 2 :(得分:1)

您需要开始包含((SubClass)s).subClass(),然后在<div>块中,关闭并开始新的包含if

<div>