How to render a matrix correctly in Blazor?

[sam-wheat]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I need to render some objects in a matrix - basically a table with a variable number of columns.
In the case of the example below I need four columns.

The problem code is below. As indicated in the comment rowIndex variable is stuck at 4. I apparently have some
kind of closure problem (?) but IDK what it is. What am I doing wrong here?
Runnable project is attached showing expected output.
This is my first Blazor project for a large client. I hope to impress them favorably with Blazor. Thank you for your assistance with this.

	<table style="border:solid 2px black;">
		@{
			int rowIndex = 0;
			int rowCount = Convert.ToInt32(Math.Ceiling(people.Count / Convert.ToDecimal(ColumnCount)));
		}
		@while (rowIndex <= rowCount)
		{
			<Tr>
				@{
					int colStart = (rowIndex * ColumnCount);  //  rowIndex is always 4.
					int colStop = (rowIndex * ColumnCount + ColumnCount);
				}
				@for (int colIndex = colStart; colIndex <= colStop; colIndex++)
				{
					if (colIndex >= people.Count)
					{
						break;
					}

					<td>
						<PersonInput Name="@people[colIndex].Name"  />
					</td>
				}
			</Tr>
			rowIndex++;
		}
	</table>

Expected Behavior

	<table>
		<Tr>
			<td><PersonInput Name="This is"/></td>
			<td><PersonInput Name="The" /></td>
		</Tr>
		<Tr>
			<td><PersonInput Name="Expected" /></td>
			<td><PersonInput Name="output format" /></td>
		</Tr>
	</table>

Steps To Reproduce

See Index.razor in attached project

Exceptions (if any)

No response

.NET Version

7.0.306

Anything else?

MatrixTest.zip

[bub-bl]

Have you tried to use a for instead of a while ?

Like:
for(var rowIndex = 0; rowIndex <= rowCount; rowIndex++)

I think the main problem is you attempt to increment a value in a while, but basicaly, a while not used in a thread block the mainthread.

[sam-wheat]

@bub-bl Not sure I understand what you mean. I am incrementing rowIndex inside the loop.

[Markz878]

When you pass a loop variable to a child component in a loop, you need to capture that variable in a new parameter:

<table>
    @for (int i = 0; i < 4; i++)
    {
        int x = i;
        <Tr @key=x>
            @for (int j = 0; j < 4; j++)
            {
                <td>
                    <p>Test @x @j</p>
                </td>
            }
        </Tr>
    }
</table>

You should also use a @key attribute, especially if you're going to insert/delete rows.

[sam-wheat]

@Markz878 I got it. Thanks!

[mkArtakMSFT]

Thanks for assisting with this, @Markz878!

@sam-wheat I assume that resolved your problem, didn't it?

[guardrex]

We have this guidance in a few relevant spots where devs ran into it 😈 in the past, for example ...

• https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#child-content-render-fragments
• https://learn.microsoft.com/en-us/aspnet/core/blazor/images?view=aspnetcore-7.0
• https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-7.0#lambda-expressions
• https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#navlink-and-navmenu-components

I'm making a note on one of my tracking issues to call it out in a component parameter example, too.

[sam-wheat]

@mkArtakMSFT Yes many thanks to all.