Question

我是razor引擎语法的新手，我在视图中添加逻辑的格式有问题。这是我想要完成的。我收集了来自模特的物品。我需要迭代该集合并连续对齐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>

当页面最终被渲染时，第一个if条件被执行但不是第二个。有人可以帮助弄清楚如何实现这个目标吗？

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>

MVC格式化td动态

4 个答案: