I'm trying to build a dynamic table with Blazor, but I encounter an issue with DOM validation.
I'm using Bootstrap for layout to have access to row
and col
css classes. I have a list of item, with a dynamic size (can be 0, 3 or 10, even 100), and I want to display those item within a card, 3 per row.
I did the following thing :
<div class="row profile-row" style="margin-left:10px">
@for (int i = 0; i < myObjectList.Count; i++)
{
if (i % 3 == 0 && i != 0)
{
@((MarkupString)("</div><div class='row profile-row' style='margin-left:10px'>"))
}
<div class="col-4">
<MyObjectComponent item="myObjectList[i]"></MyObjectComponent>
</div>
}
</div>
This seems to be great, but it looks like when doing MarkupString, Blazor ensure valid HTML is produce. So my firt block of ending div is not written and the following div is immediatelly closed, which I don't want.
If I don't use MarkupString, I go a compilation error because of invalid HTML in my syntax. Any ideas how to do so ?