有条件地呈现 bootstrap 行 class

Question

我正在使用 ASP.Net MVC 开发个人 MVC 项目，其中我有以下代码：

<div class="container">
      @foreach(var item in @Model)
      { 
         <div class="row">
            <div class="col-md-4">
                 //TODO... Render html here
            </div>
         </div>
      }
   </div>

我想要实现的是在每 3 次迭代后渲染行 class。所以，这个想法是这样的：

<div class="row">
   <div class="col-md-4">HTML HERE</div>
   <div class="col-md-4">HTML HERE</div>
   <div class="col-md-4">HTML HERE</div>
</div>
<div class="row">   -->render this if the after the 3th iteration in the foreach
   <div class="col-md-4">HTML HERE</div>
   <div class="col-md-4">HTML HERE</div>
   <div class="col-md-4">HTML HERE</div>
</div>

我试图在 razor @{int i=0;} 中创建一个变量并在 if 语句中使用它，如下所示：

@if(i%3 == 0){
   //render the row class
   <div class="row">
}

但是，我遇到了一些编译错误。

有没有人做过类似的事情？或者您知道是否可以使用 Razor 在 ASP.Net MVC 中做到这一点？

此致！

Answer 1

您可以遍历集合并呈现它。保留一个计数器来检查列数，并在循环中使用它来确定是否应该开始一个新行。

<div>
    @{
        var numberOfColsNeeded = 3;
        var totalCounter = Model.Count();
        var itemCounter = 1;
    }

    @foreach (var item in Model)
    {
        if (itemCounter % numberOfColsNeeded == 1)
        {
            @:<div class="row">
        }
        <div class="col-md-4">
            <span>Some html</span>
            <span> @item.Name</span>
        </div> 
        if ((itemCounter % numberOfColsNeeded == 0) || ((itemCounter) == totalCounter))
        {
            @:</div>
        }
        itemCounter++;
    }
</div>

Answer 2

两个选项

如果要定期渲染整个块及其子块

   @{
     int index = 0;
    }
    @foreach (var item in @Model)
    {
      if(index % 3 == 0)
      { 
       <div class="row">
          <div class="col-md-4">
             @* //TODO... Render html here*@
            </div>
       </div>
      }

      index++;
    }

如果子项每次都要渲染，而只有子项必须定期渲染

    @{
      int index = 0;
     }
     @foreach (var item in @Model)
     {
       if (index % 3 == 0)
       {
          @:  <div class="row">
       }

       <div class="col-md-4">
          @* //TODO... Render html here*@
       </div>

       if (index % 3 == 0)
       {
          @:     </div>
       }        

       index++;
    }

有条件地呈现 bootstrap 行 class

Conditional to render bootstrap row class

asp.net-mvc

razor

asp.net-mvc-4

twitter-bootstrap