Blazor 有没有办法停止自动关闭 html 标签？

Question

我正在尝试使用 Blazor 创建一些动态 html。本质上，我想要一个 bootstrap(5.1) 导航选项卡，其中包含许多通过 for 循环创建的生成的导航选项卡

代码如下：

@:<ul class="nav nav-tabs" id="myTab" role="tablist">
@foreach(var tab in navTabs)
{
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">Tab</button>
  </li>
}
@:</ul>

第一行的 ul 标签似乎自动关闭，因此 li 标签永远不会添加到 nav 标签中。我也试过 MarkupString。

Answer 1

如果你想将<ul></ul>添加到html，并使用tab作为buttons.You的内容可以试试这个：

<ul class="nav nav-tabs" id="myTab" role="tablist">
@foreach(var tab in navTabs)
{
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">@tab</button>
  </li>
}
</ul>

Answer 2

你有 3 行分开到 HTML 所以编译器将关闭该元素。

@:@{
    <ul class="nav nav-tabs" id="myTab" role="tablist">
    @foreach(var tab in navTabs)
    {
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="example" data-bs-toggle="tab" data-bs-target="#example" type="button" role="tab" aria-controls="Example" aria-selected="true">Tab</button>
        </li>
    }
    </ul>
};

如果您在 @code 部分生成渲染片段，为什么不将它们单独制作成您可以有条件地使用的组件。

Blazor 有没有办法停止自动关闭 html 标签？

Is there a way for Blazor to stop auto closing html tags?

c#

razor

twitter-bootstrap

asp.net-core

blazor