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次迭代后渲染行类。所以，想法是这样的：

<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

两个选项

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

   @{
     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++;
    }

Answer 2

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

<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>

有条件地渲染bootstrap行类

2 个答案: