Question

我需要在Razor中有条件地输出HTML。

但是，HTML标记必须“平衡”。这对于简单的循环来说很好：

@foreach (var item in Model)
{
    <div>
        Hello
    </div>
}

但是当我想 - 输出3 <div>个块时，那么每3个<div>块之后的新行就不起作用 - 比如使用这样的Counter int：

@foreach (var item in Model.Eating)
{
    if (Counter == 1)
    {
        <div class="row">
    }

    <div>
        Hello
    </div>

    Counter = Counter +1

    @if (Counter == 4)
    {
        </div>
    }
}

（我意识到这是一个有点缺陷/简化的例子 - 但你明白了）

较低的</div>返回错误“遇到没有匹配的开始标记的结束标记”。

作为一个hackey解决方案，我可以将Response.Write("</div>")用于所有这些条件 - 但它似乎违背了Razor的精神。

有没有一种最好的练习方式这样做/我可以做到这一点而不采用这种hackey战术？

我在谷歌上找不到任何东西（我真的不确定要搜索什么）。

THX。

Answer 1

在代码块中混合普通html代码时使用@:前缀。

这应该有效

@{
    var counter = 1;
    var totalCounter = Model.Eating.Count();
    var itemCounter = 0;
}
@foreach (var item in Model.Eating)
{
    itemCounter++;

    if (counter == 1)
    {
        @:<div class="row">
    }
    <div>Hello @item.Name</div>


    if (counter == 2 || ((itemCounter) ==totalCounter))
    {
        counter = 0;
        @:</div>
    }
    counter = counter + 1;
}

或使用modulas运算符的以下版本并删除计数器变量声明。

@{
    var numberOfRowsNeeded =4;
    var totalCounter = Model.Eating.Count();
    var itemCounter = 1;
}
@foreach (var item in Model.Eating)
{
    if (itemCounter % numberOfRowsNeeded==1)
    {
        @:<div class="row" style="border: 1px solid red; margin: 2px;">
    }
    <div>Helloss @item.Name</div>


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

使用Razor在条件循环中输出html - 引发错误

1 个答案: