在两列中动态显示字段答案

【问题标题】：Dynamically display field in two column在两列中动态显示字段
【发布时间】：2020-06-20 11:37:44
【问题描述】：

有什么想法可以动态地将label 和input 元素显示在两列而不是一列中吗？

我无法将它与 foreach 结合使用

<div class="col-sm-12">
@foreach (var group in side)
{
    <div class="panel panel-default">
        <div class="panel-body">
            <h4>
                @group.Key
            </h4>
            @foreach (ModelMetadata col in group)
            {
                if (MetaDataHelper.GetPropertyAttribute<ActiveUiHint>(col) == null || MetaDataHelper.GetPropertyAttribute<ActiveUiHint>(col).DisplayType ==                                         ActiveUiHint.ProperyDisplayType.Field)
                {
                    <div class="form-group">
                        @Html.Label(col.PropertyName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-3">
                            @if (!col.IsReadOnly)
                            {
                                @Html.Editor(col.PropertyName, new { htmlAttributes = new { @class = "form-control" } })
                            }
                            else
                            {
                                @Html.Display(col.PropertyName, new { htmlAttributes = new { @class = "form-control" } })
                            }
                            @Html.ValidationMessage(col.PropertyName, "", new { @class = "text-danger" })
                        </div>
                    </div>
                }
                else
                {
                    @Html.Editor(col.PropertyName, new { htmlAttributes = new { @class = "form-control" } })
                }
            }
        </div>
    </div>
}

【问题讨论】：

标签： c# asp.net-mvc twitter-bootstrap razor asp.net-core-mvc

【解决方案1】：

试试：--

<div class="col-sm-12">
@foreach (var group in side)
{
    <div class="panel panel-default">
        <div class="panel-body">
            <h4>
                @group.Key
            </h4>
 @foreach (var obj in group.Select((item, index) => new {item, index}))
    {
       var col=obj.item;
       if(obj.index==0 ||obj.index%2==0){ @Html.Raw("<div class='row'>") }

        <div class='col-md-6'>
          if (MetaDataHelper.GetPropertyAttribute<ActiveUiHint>(col) == null || MetaDataHelper.GetPropertyAttribute<ActiveUiHint>(col).DisplayType == ActiveUiHint.ProperyDisplayType.Field)
                {
                    <div class="form-group">
                        @Html.Label(col.PropertyName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-3">
                            @if (!col.IsReadOnly)
                            {
                                @Html.Editor(col.PropertyName, new { htmlAttributes = new { @class = "form-control" } })
                            }
                            else
                            {
                                @Html.Display(col.PropertyName, new { htmlAttributes = new { @class = "form-control" } })
                            }
                            @Html.ValidationMessage(col.PropertyName, "", new { @class = "text-danger" })
                        </div>
                    </div>
                }
                else
                {
                    @Html.Editor(col.PropertyName, new { htmlAttributes = new { @class = "form-control" } })
                }
            </div>

         if ((obj.index!=0 && (obj.index%2!=0 ||group.Count == obj.index + 1))
         ||(obj.index==0 && group.Count==1))
         {
           @Html.Raw("</div>")
         }
    }

        </div>
    </div>
}
</div>

【讨论】：