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

I'm trying to create some dynamic html with Blazor. Essentially I want a bootstrap(5.1) nav tab with a number of generated nav tabs created via a for loop

Code Below:

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

The ul tag on the first line seems to be auto closed so the li tags never get added to the nav tab.. I've also tried MarkupString.

CodePudding user response：

If you want to add <ul></ul> to html,and use tab as content of buttons.You can try this:

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

CodePudding user response：

You have 3 separate lines which break to HTML so the compiler will close the element.

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