在编辑器模板中呈现 2 列布局答案

【问题标题】：Rendering 2-column layout in an Editor Template在编辑器模板中呈现 2 列布局
【发布时间】：2015-05-19 07:28:59
【问题描述】：

我想要一个 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">和结束标签应该在else中。

【问题讨论】：

你想达到什么目的？
2 列布局！ :)
有 2 个相同的列？或者您希望“ViewData.ModelMetadata.Properties”呈现奇数左侧 - 甚至右侧？
奇左 - 偶右。你怎么称呼它！？ :)
我正在尝试使用 I 来实现这一点，这就是为什么我有 if 无论如何。

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

【解决方案1】：

您需要启动一个包含<div>，然后在if 块中，关闭并启动一个新的包含<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>

【讨论】：

【解决方案2】：

不确定你到底想要什么，但你应该在循环其他对象之前声明父 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>

【讨论】：

感谢您的回答，我希望在一列中有奇数属性，而在另一列中有偶数属性。这就是我使用I 的原因。关于col-xs-6，如果我使用它，所有元素都会在彼此之下，这实际上是另一个problem。
您说您想要一侧甚至另一列的奇数属性，这些总是成对的（所以它们属于同一行）还是一列是空的？如果这有意义的话。
有可能。我有很多课程，其中一些可能很奇怪。

【解决方案3】：

我认为您尝试呈现表单的方式无缘无故地太复杂了，col-xs-** 已经向左浮动，您不必担心“奇左 - 甚至右”。

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

【讨论】：