不平衡 DIV 关闭 DIV 与 MVC Razor For Each Loop [英] Unbalanced DIV Closing DIV with MVC Razor For Each Loop

问题描述

我在我的网站上使用 Bootstrap 3，我使用 MVC Razor For Each Loop 来检索博客主页上的所有子项，如下所示:

@{int i = 0;}@foreach(Model.Content.AncestorOrSelf(2).Children.OrderBy("createDateDescing") 中的 var subPage){如果(我 % 2 == 0){@:<div class="row row-eq-height">}<div class="col-sm-12 col-md-6"></div><!-- col-sm-12 col-md-6 -->如果 (我 % 2 != 0){@:</div><!-- row row-eq-height -->}我++;}

当我有偶数个子页面时这很好用，但是当我有奇数个子页面时，它不会碰到 if % 2 != 0 块，这意味着最后一行没有关闭，然后中断页面剩余部分的流程.

我试图通过在 For Each 循环之后添加以下 if 语句来解决这个问题，希望如果 i 的最终值不是 2，它会根据需要添加一个关闭的 DIV 标签，但会导致不平衡的 DIV 标签错误.

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

有人有任何想法或想法吗?如果我有一个偶数，它就可以正常工作，页面流也符合预期.

解决方案

您的 foreach 循环需要在包含元素(行)内，然后在循环中关闭并开始新行每隔一个子元素(列)

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

假设您在集合中有 5 个项目，输出将是

<div class="col-sm-12 col-md-6">xxxxx</div><div class="col-sm-12 col-md-6">xxxxx</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 class="row row-eq-height"><div class="col-sm-12 col-md-6">xxxxx</div>

I'm using Bootstrap 3 on my site and I am using an MVC Razor For Each Loop to retrieve all of the child items on a blog homepage as follows:

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

This works fine when I have an even number of child pages however when I have an odd number of child pages, it's not hitting the if % 2 != 0 block which means the last row doesn't get closed which then breaks the flow of the remainder of the page.

I tried to fix this by adding the following if statement after the For Each loop hoping that if the final value of i was not 2, it would add a closing DIV tag as needed but instead that causes an inbalanced DIV tag error.

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

Anyone got any thoughts or ideas? If I have an even number, it works just fine and the page flow is as expected.

解决方案

Your foreach loop needs to be inside a the containing element (row) and then withing the loop, close and start a new row for every second child element (column)

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

The output, assuming you have 5 items in the collection, will be

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

这篇关于不平衡 DIV 关闭 DIV 与 MVC Razor For Each Loop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！