Ad

Is There A Way For Blazor To Stop Auto Closing Html Tags?

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

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.

Ad

Answer

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

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

If your generating render fragments in the @code section why not just make them separate components you can conditionally use.

Ad
source: stackoverflow.com
Ad