Unbalanced DIV Schluss DIV mit MVC Razor für jede Schleife

Question

Ich Bootstrap 3 auf meiner Website verwenden und ich bin mit einem MVC Razor für jede Schleife alle untergeordneten Elemente auf einem Blog Homepage abgerufen werden, wie folgt:

@{int i = 0;} 
@foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending")) 
{ 
    if (i % 2 == 0) 
    { 
     @:<div class="row row-eq-height"> 
    } 

    <div class="col-sm-12 col-md-6"> 
    </div><!-- col-sm-12 col-md-6 --> 

    if (i % 2 != 0) 
    { 
     @:</div><!-- row row-eq-height --> 
    } 
    i++; 
} 

Das funktioniert gut, wenn ich eine gerade Anzahl von untergeordneten Seiten habe, aber wenn ich eine ungerade Anzahl von untergeordneten Seiten habe, trifft es nicht den if% 2! = 0 Block, was bedeutet, dass die letzte Zeile nicht geschlossen wird, die dann bricht der Fluss des Rests der Seite.

Ich versuchte, dies zu beheben, indem ich die folgende if-Anweisung nach der For Each-Schleife hinzufügte und hoffte, dass wenn der Endwert von i nicht 2 wäre, ein schließendes DIV-Tag wie erforderlich hinzugefügt würde, was stattdessen einen nicht ausgeglichenen DIV-Tag-Fehler verursacht .

@if (i !% 2 == 0) 
{ 
    </div><!-- row row-eq-height --> 
} 

Wer hat irgendwelche Gedanken oder Ideen? Wenn ich eine gerade Zahl habe, funktioniert es gut und der Seitenfluss ist wie erwartet.

Answer 1

Ihre foreach Schleife muss innerhalb eines enthaltenden Element (Zeile) und dann withing die Schleife, in der Nähe und beginnen eine neue Zeile für jedes zweite Kind-Element (Spalte)

@{int i = 0;} 
<div class="row row-eq-height"> 
    @foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending")) 
    { 
     if (i > 0 && i % 2 == 0) 
     { 
      @:</div><div class="row row-eq-height"> 
     } 
     <div class="col-sm-12 col-md-6">xxxxx</div> 
     i++; 
    } 
</div> 

Die Ausgabe, vorausgesetzt, Sie sein haben Sie 5 Artikel in der Sammlung, wird

sein

<div class="row row-eq-height"> 
    <div class="col-sm-12 col-md-6">xxxxx</div> 
    <div class="col-sm-12 col-md-6">xxxxx</div> 
</div> 
<div class="row row-eq-height"> 
    <div class="col-sm-12 col-md-6">xxxxx</div> 
    <div class="col-sm-12 col-md-6">xxxxx</div> 
</div> 
<div class="row row-eq-height"> 
    <div class="col-sm-12 col-md-6">xxxxx</div> 
</div>