有条件地呈现引导行类答案

【问题标题】：Conditional to render bootstrap row class有条件地呈现引导行类
【发布时间】：2018-03-11 13:42:09
【问题描述】：

我正在使用 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">
}

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

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

问候！

【问题讨论】：

<div class="col-md-4">里面的内容总是静态html？模型项目中没有任何内容???

标签： asp.net-mvc twitter-bootstrap asp.net-mvc-4 razor

【解决方案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++;
    }

【讨论】：

我使用了第二个选项。这正是我想要的。谢谢

【解决方案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>

【讨论】：