Blazor dynamically generated table rows

Question

I created an sample c# blazor (server-side) app to practice a little.

I try to generate table rows dynamically for a calendar but i run into a problem there.

<table class="table">
    <thead>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            @* currentDateTimeValues is a list with DateTime objects *@
            @foreach (var item in currentDateTimeValues)
            {
                @if (counter % 7 == 0 && counter > 0)
                {
                    @:</tr><tr>
                }
                counter++;
                <td>@item.ToString("dd.MM.yyyy")</td>
            }
        </tr>
    </tbody>
</table>

After 7 cells a new row should be created but it doesn't. The cells go straight ahead without linebreak.

Maybe you guys have any idea.

UPDATE:

In the meantime I've created a workaround because I think that blazor can't handle the </tr><tr>

My currentDateTimeValues-List now contains week objects

        <tbody>
            @* currentDateTimeValues is a list with Week objects *@
            @foreach (var week in currentDateTimeValues)
            {
            <tr>
                <td>@week.Monday</td>
                <td>@week.Tuesday</td>
                <td>@week.Wednesday</td>
                <td>@week.Thursday</td>
                <td>@week.Friday</td>
                <td>@week.Saturday</td>
                <td>@week.Sunday</td>
            </tr>
            }
        </tbody>

Wouldn't you need two loops? An outer for the rows and an inner for the columns? — Uwe Keim
First of all thanks for your replay however it isn't very helpfull. — JoeGER94

Ruben-J Ruben-J · Accepted Answer · 2020-06-16T08:49:57

I think the solution you are trying isn't possible in Blazor at the moment. Why not use two loops to create the calendar. Something like:

@while (counter < currentDateTimeValues.Length)
{
    <tr>
       @{
            var i = 0;
            if (i < 7 && counter + i < currentDateTimeValues.Length)
            {
                <td>@currentDateTimeValues[counter + i].ToString("dd.MM.yyyy")</td>
                i++;
            }
        }
    </tr>
    counter += 7;
}

Blazor dynamically generated table rows

1 Answers