如何在if语句中关闭/重新打开标签

Question

我无法弄清楚这段 Razor 代码的问题所在。

IDE 告诉我，我的第一个 <ul> 没有匹配的结束标记。它还说，结束标记没有匹配的开始标记。此外，它还将几行代码识别为普通文本，而不是 C# 代码。

IDE 对有问题的行进行了注释。

<div class="list-container">
    @{
        int i = 0;   

        <ul> //no matching ending tag
            @foreach (var item in Model.Items)
        {
            if (i % 8 == 0)
            {
        </ul> //no matching start tag
        <ul> //"Text is not allowed between the opening and closing tags for element ul"
            } //IDE doesn't recognize this closing brace as code... see it as text

        <li>@item.ContentItem.Title.Value</li>

            i++; //IDE doesn't recognize this closing brace as code... see it as text
        } //IDE doesn't recognize this closing brace as code... see it as text
        </ul>
    }
</div>

当视图执行时，我得到了预期的编译错误，因为您忘记了一个 }： "代码块缺少闭合 "}" 字符。"。

一旦我从 if 语句内部删除 </ul><ul>，视图就可以编译和执行了。

有趣的是，当我点击其中一个 ul 标签时，正确的起始或结束标签也会被突出显示。

显然我做错了什么。难道我没有正确使用 Razor 吗？

- Justin Self

---

你打开了两个代码块（foreach和if），并在关闭的</ul>标签之前没有将它们关闭。因此，关闭的</ul>标签在与if(i % 8 == 0)开始的同一代码块中没有相应的开放标签。 - Floremin

也许将 ul 标签完全放在 Razor 代码之外会更好？尝试将它们直接放在 div 标签旁边。 - DOK

我不会将这个作为答案，因为我不确定，但有些HTML标记不允许代码在其中正常工作。最近使用 Razor 时，我遇到了这个问题很多次。如果有人有一个好的参考/解决方案，那就太棒了！我最终所做的只是更改我使用的标记。我不记得具体是哪些。另外：我认为范围也很重要。你试图在与之前不同的范围中关闭 <ul> 标记可能也与此有关。 - Ricky Mutschlechner

我已经更改了标题，我认为这更好地反映了问题。如有需要，请随时恢复原标题。 - Alexei Levenkov

@AlexeiLevenkov 是的，这样更好。谢谢。 - Justin Self

Answer 1

你可以使用@:来明确定义内容。以下代码在我的系统上没有编译错误：explicitly define content。

<div class="list-container">
    @{
        int i = 0;   

        @:<ul>
            @foreach (var item in Model.Items)
        {
            if (i % 8 == 0)
            {
        @:</ul>
        @:<ul>
            }

        <li>@item.ContentItem.Title.Value</li>

            i++;
        }
        @:</ul>
    }
</div>

注意：您的帖子中还有错误的注释语法，但我假设那只是SO示例。

- Pat Lillis

Answer 2

你的C#/Razor代码块和HTML（开/闭标签）块交叉，这就是为什么会出现错误的原因。

如果我理解正确，并且你想要将所有项目分组/列表显示为每组8个项目，那么你可能需要像这样的代码：

<div class="list-container">
    @for (int i = 0; i < Model.Items.Count; i = i + 8)
    {
        <ul>
            for (j = 0; j < 8; j++)
            {
                <li>Model.Items[i+j].ContentItem.Title.Value</li>                        
            }
        </ul>
    }
</div>

我没有测试过这个，因为我没有你的模型，但是它应该至少能够通过最小的调整来工作。

- Floremin

Answer 3

如果我理解您要做的事情，您想为模型中每第8个元素发出一个列表项... 您需要发出父元素 - 在这种情况下是UL，然后再考虑LI元素，如下所示。 我认为编辑器会出现问题，因为您正在打开和关闭UL，并且您在LI周围放置了花括号。

<div class="list-container">
    <ul>
      @{
        int i = 0;   
        foreach (var item in Model.Items)
        {
          if (i%8 == 0)
          {
            <li>@item.ContentItem.Title.Value</li>
          }
          i++; 
        } 
      }
    </ul>
  </div>

- LongTallMatt