分割單式柱分爲三列MVC asp.net（鑑於）

大家好我的看法有婁代碼分割單式柱分爲三列MVC asp.net（鑑於）

@foreach (var group in Model.FieldGroup) 
        { 

         <table class="collapsableTable" style="margin-left: 3%;"> 
          <tr class="collapsibleTitle"> 
           <td width="6%" valign="top"> 
            <span class="accordionIconOff"></span> 
           </td> 
           <td width="94%" valign="top">@group.GroupName</td> 
          </tr> 
          <tr class="collapsibleContent"> 
           <td colspan="2"> 
            <table> 
             @foreach (var field in group.Fields) 
             { 
              <tr> 
               <td> 
                @Html.CheckBox(field.FieldName) 
                @Html.LabelFor(model => field.FieldName, field.FieldName) 
               </td> 
              </tr> 
             } 
            </table> 
           </td> 
          </tr> 
         </table>

我的模型就像

public class FieldGroup 
{ 
    public string GroupName { get; set; } 

    public List<FieldModel> Fields { get; set; } 
}

和領域擁有

public class FieldModel 
{ 
    public int FieldId { get; set; } 

    public string FieldName { get; set; } 
}

並在視圖它產生具有複選框爲單個列中的日提交的列表，但我必須有10場組中的一列和下一個10到下一欄等..所以我的看法似乎像3列布局？

任何一個可以幫助我很快出來了！

即時得到這樣的事情 Actual view like this

，但我想我的觀點是這樣

Expected view

來源

2013-07-17 Backtrack

我敢肯定，你就可以達到這個使用'foreach'，計數器和模運算符（％）。你有沒有具體的問題，你有什麼嘗試嗎？ – CodeCaster

您可以向我們展示它的外觀如何以及想要的形象嗎？ –

@JigarPandya我剛剛添加了繪製的意見圖像.. – Backtrack

希望這將有助於

.col1 
{ 
    width: 33.3%; 
    min-width: 200px; 
    float: left; 
} 

.col2 
{ 
    width: 33.3%; 
    min-width: 200px; 
    float: left; 
} 

.col3 
{ 
    width: 33.3%; 
    min-width: 200px; 
    float: left; 
}

來源

2013-07-30 09:23:36

這聽起來像您使用的是表的佈局，而不是表格數據，這通常被認爲是否定的。

我建議從改變你的內循環：

<table> 
    @foreach (var field in group.Fields) 
    { 
     <tr> 
      <td> 
       @Html.CheckBox(field.FieldName) 
       @Html.LabelFor(model => field.FieldName, field.FieldName) 
      </td> 
     </tr> 
    } 
</table>

到

<div class="field-container"> 
    @foreach (var field in group.Fields) 
    { 
     <div class="field"> 
      @Html.CheckBox(field.FieldName) 
      @Html.LabelFor(model => field.FieldName, field.FieldName) 
     </div> 
    } 
</div>

，然後用CSS來安排的複選框：

.field-container { 
    width: 600px; 
} 

.field-container .field { 
    width: 200px; 
    float: left; 
    margin: 5px 0; 
}

來源

2013-07-17 09:36:13

分割單式柱分爲三列MVC asp.net（鑑於）

回答

相關問題