I am trying to find out what the recommended approach is for adding conditional closing and opening tags HTML into a .NET 8 Blazor Page such as to equally split up database records into 3 <div class="col-md"></div> tags when outputted on the page in this case to display a restaurant menu.

To achieve this in JavaScript for example I would normally divide total records by 3 to get the number required in each row and then conditionally insert </div><div class="col-md"> to break the content at that point and reset the count but with .NET, it checks the order of HTML tags in the code and thinks this will result in an error so the compiler states RZ9981: Unexpected closing tag 'div' with no matching start tag.

However when outputted on the page, as it is closing and then re-opening the tag in the foreach loop the resulting HTML would be valid but the page will not compile.

I have tried various techniques such as using tag helpers or using @: but none of the solutions given seem to work, at least in more recent versions of .NET. Using @: does output extra tags but they appear inside the tag I am trying to close so it doesn’t display as intended.

In the end I ended up splitting the ICollection from the database into 3 ICollections and then iterating through all 3 in separate div tags which has worked in this instance but seems a bit repetitive and would not work if the number of columns could change as this is hard-coded.

This is what worked but doesn’t seem ideal:

int numItems = cat.MenuItem.Count;
int numItemsPerCol = (int)Math.Round((decimal)((decimal)numItems / 3));

@* Split into 3 lists of records  *@
ICollection<MenuItem> col1Items = cat.MenuItem.Take(numItemsPerCol).ToList();
ICollection<MenuItem> col2Items = cat.MenuItem.Skip(numItemsPerCol).Take(numItemsPerCol).ToList();
ICollection<MenuItem> col3Items = cat.MenuItem.Skip(numItemsPerCol * 2).ToList();

<div class="col-md">
@foreach (var item in col1Items)
{

}
</div>

<div class="col-md">
@foreach (var item in col2Items)
{

}
</div>

<div class="col-md">
@foreach (var item in col3Items)
{

}
</div>

Surely there must be a better way than this?