MVC格式動態td

Question

我是新的剃鬚刀引擎語法，我有問題的格式添加視圖中的邏輯。這是我想要完成的。我收集了來自模型的物品。 我需要迭代該集合並在一行中對齊6個項目。

這是最後的輸出應該什麼樣子：

<table> 
    <tr> 
    <td>checkbox comes here</td> 
    <td>checkbox comes here</td> 
    <td>checkbox comes here</td> 
    </tr> 
    <tr> 
    <td>checkbox comes here</td> 
    <td>checkbox comes here</td> 
    <td>checkbox comes here</td> 
    </tr> 
    ................. and so on 
</table> 

這是我在視圖中寫道：

<table> 
    @for (int i = 0; i <= Model.checkItems.Count; i++) 
    { 
      if (i % 6 == 0) 
      { <tr> } 

       <td> 
       <input type="checkbox" 
        id="chk_@(Model.checkItems[i].DisplayText)" 
        name="chk" 
        nameVal = "@Model.checkItems[i].DisplayText" 
        value="@Model.checkItems[i].Value"/> 

       <label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText 
       </td>       

      if(i % 6 == 0) 
      { </tr> } 

     }      
</table> 

當頁面終於得到呈現，第一如果條件獲取代碼執行，但不是第二個。 有人可以幫助弄清楚如何做到這一點？

Answer 1

試試這個

<table> 
@{ int count = 0; } 
<tr> 
@foreach (var item in Model.checkItems) 
{ 
    <td> 
     <input type="checkbox" 
       id="chk_@(item.DisplayText)" 
       name="chk" 
       nameVal = "@item.DisplayText" 
       value="@item.Value"/> 
     <label for="chkGroup_@(item.DisplayText)">@item.DisplayText</label> 
    </td> 
    if (++count % 6 == 0) 
    { 
     @:</tr><tr> 
    }  
} 
</tr> 
</table> 

Answer 2

你錯過了你的標籤關閉標籤

<label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText 

應該

<label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText</label> 

Answer 3

將這項工作：

<table> 
    @for (int i = 0; i <= Model.checkItems.Count; i++) 
    { 
      if (i % 6 == 0) 
      { 
      <tr> 
       <td> 
       <input type="checkbox" 
        id="chk_@(Model.checkItems[i].DisplayText)" 
        name="chk" 
        nameVal = "@Model.checkItems[i].DisplayText" 
        value="@Model.checkItems[i].Value"/> 

       <label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText 
       </td>       

      </tr> 
      } 

     }      
</table> 

Answer 4

這是另一種使用2個嵌套循環的行和列的解決方案。我不知道，如果它一定更好（這當然看起來臉更復雜），但它至少可以讓你輕鬆地看到行和單元格的嵌套性質：

<table> 
@{ 
    const int cols = 3; 
    int rows = (Model.checkItems.Count + cols - 1)/cols; 
} 
@for (int rowIndex = 0; rowIndex < rows; rowIndex++) 
{ 
    <tr> 
     @for (int colIndex = rowIndex * cols; colIndex < Math.Min(Model.checkItems.Count, cols * (rowIndex + 1)); colIndex++) 
     { 
      <td> 
      <input type="checkbox" 
       id="chk_@(Model.checkItems[colIndex].DisplayText)" 
       name="chk" 
       nameVal="@Model.checkItems[colIndex].DisplayText" 
       value="@Model.checkItems[colIndex].Value"/> 

      <label for="chkGroup_@(Model.checkItems[colIndex].DisplayText)">@Model.checkItems[colIndex].DisplayText</label> 
      </td> 
     } 
    </tr> 
} 
</table>