Nested for loop in blazor – index variable has maximum value?

I wanted to use a nested for loop in a razor file, and use the indexes of these for loops to determine which picture to show. My code looked like this:

        @for (int i = 1; i < 6; i++)
        {
            <MudItem>
                @for (int j = 1; j < 6; j++)
                {  
                    stoel = GereserveerdeStoelen.Where(s => s.XPositionChair == i && s.YPositionChair == j).SingleOrDefault();
                    @if (stoel is null)
                    {
                        <MudImage Width="40" Src="images/chair.png" Alt="chair" Class="d-flex align-center justify-center py-8" />
                    }
                    else
                    {
                        <MudImage Width="40" Src="images/chair_not.png" Alt="chair" Class="d-flex align-center justify-center py-8" />
                    }
                }

            </MudItem>
        }

Sadly this did not seem to work. The value of i seemed to always be 6. I could not find the problem for this exact situation, but found a similar problem with lambdas, and the solution for that worked for me too. I assign the index to a local variable, and then use that local variable.

My new code looks like this:

        @for (int i = 1; i < 6; i++)
        {
            int local = i;
            <MudItem>
                @for (int j = 1; j < 6; j++)
                {
                    stoel = GereserveerdeStoelen.Where(s => s.XPositionChair == local && s.YPositionChair == j).SingleOrDefault();
                    @if (stoel is null)
                    {
                        <MudImage Width="40" Src="images/chair.png" Alt="chair" Class="d-flex align-center justify-center py-8" />
                    }
                    else
                    {
                        <MudImage Width="40" Src="images/chair_not.png" Alt="chair" Class="d-flex align-center justify-center py-8" />
                    }
                }

            </MudItem>
        }

However, I don’t completely understand the issue, and why this solution works. Can someone provide an explanation?

>Solution :

The issue you’re encountering is related to how the C# compiler captures loop variables in closures.

This is a well-known problem when using variables defined in the loop within nested constructs (like lambdas or Razor code blocks).

When you use a loop variable inside a nested construct, the variable isn’t just copied into that construct; instead, the construct captures a reference to the loop variable. This means that all iterations of the loop share the same variable, which leads to unexpected behavior.

In the first code snippet you provided, The variable i is captured by the Razor code block, and since the Razor code block effectively creates a closure, the captured variable’s value at the time of execution will be the last value it had in the loop (which is 6 in this case).

In your second code snippet (the one that worked for you), local is a new variable that holds the current value of i for each iteration. This ensures that each iteration of the outer loop has its own unique value of local, and thus, the nested constructs capture the correct value.

You can check the Capture of outer variables and variable scope in lambda expressions and other sections, I hope they give a better picture for what I am trying to convey.