ASP.NET Razor：在引導行中動態地包裹6個元素

Question

目前在我的viewmodel中，我有一個不同大小的集合，我想創建一個我迭代每6個元素中的一行（因爲生成的html有col-lg-2，所以這應該形成一個等間距的元素行，我正在努力弄清楚我出錯的地方，呈現的HTML在錯誤區域中有行元素（有時每行7個）。幫助表示讚賞

@{int numItemsDisplayed = 0} 

@foreach (var item in Model.SomeCollection) 
{ 
    if (numItemsDisplayed == 0 || numItemsDisplayed % 6 == 0) 
    { 
     @:<div class="row"> 
    } 
    <div class="col-lg-2"> 
     <div class="gridBox" data-id="@item.id"> 
      <div class="logo"> 
       <span class="lightText">@item.Name</span> 
      </div> 
     </div> 
    </div> 
    if (numItemsDisplayed % 6 == 0 && numItemsDisplayed != 0) 
    { 
     @:</div> 
    } 
    numItemsDisplayed++; 
} 

我與此遇到的另一個挑戰是確保最後一行是關閉

Answer 1

使用您當前的代碼，您沒有正確關閉外部div。而不是呈現結束div，你打開另一個div（對於行）。所以基本上爲行生成嵌套的div。 （查看生成的html的查看源代碼）

以下代碼將在每行div內呈現6個col-lg-2 div。

@{ 
    var numberOfColsNeeded = 6; 
    var totalCounter = Model.SomeCollection.Count(); 
    var itemCounter = 1; 
} 

@foreach (var item in Model.SomeCollection) 
{ 
    if (itemCounter % numberOfColsNeeded == 1) 
    { 
     @:<div class="row" > 
    } 
    <div class="col-lg-2"> 
     <div class="gridBox" data-id="@item.Id"> 
      <div class="logo"> 
       <span class="lightText">@item.Name</span> 
      </div> 
     </div> 
    </div>  

    if ((itemCounter % numberOfColsNeeded == 0) || ((itemCounter) == totalCounter)) 
    { 
     @:</div> 
    } 
    itemCounter++; 
}