c# - Blazor binding to array is one element off?

Question

Edit: I am using Blazor .net

I am trying to bind the selected value of a <select> to a element of an int[] . For some reason it is binding to Role[k+1] instead of Role[k] I have out put the value of k next to the select element to make sure it is correct and implemented a button that when clicked outputs each item in Role[]. Since it is doing Role[k+1] i tried doing Role[k-1] and got the error: "Index was outside the bounds of the array" as expected.

I'm sure I am doing something wrong but can't for the life of me figure out what. Also note that if i bind to Role[0] (which Role[k] should be equivalent to on the first iteration) the value sets to the proper array element.

Here is the relevant part of the code:

 @{ 
        int k = 0;
        for (int i = 1; i < NumberOfPlayers + 1; i++)
        {
            int j = 0; Console.WriteLine(k);

        <p mb-3>
            Player @i - Role:
            <select @bind="Role[k]">
                @foreach (string roleText in RolesText)
                {

                    <option value="@j">@roleText - @j</option>

                    j++;
                }

            </select> @k
        </p>
            k++;
        }
    }

And here is the full code:

 <h1>Player 1 : @Role[0]</h1>
<h1>Player 2 : @Role[1]</h1>
<h1>Player 3 : @Role[2]</h1>
<h1>Player 4 : @Role[3]</h1>
<h1>Player 5 : @Role[4]</h1>
<h1>Player 6 : @Role[5]</h1>
<div class="card">
    <div class="card-header bg-dark text-white">
        <h5 class="font-weight-bold">Random Heroes</h5>
    </div>
    <div class="card-body">
        <select @bind="NumberOfPlayers" class="custom-select cm-lg-4">
            @for (int i = 1; i <= 6; i++)
            {
                @if (i == 1)
                {
                    <option value="@i" selected>@i Player</option>
                }
                else
                {
                    <option value="@i">@i Players</option>
                }

            }
        </select>
        <select @bind="NumberOfRounds" class="custom-select cm-lg-4 my-3">
            @for (int i = 1; i <= 6; i++)
            {
                @if (i == 1)
                {
                    <option value="@i" selected>@i Round</option>
                }
                else
                {
                    <option value="@i">@i Rounds</option>
                }
            }
        </select>

        @{ 
            int k = 0;
            for (int i = 1; i < NumberOfPlayers + 1; i++)
            {
                int j = 0; Console.WriteLine(k);

            <p mb-3>
                Player @i - Role:
                <select @bind="Role[k]">
                    @foreach (string roleText in RolesText)
                    {

                        <option value="@j">@roleText - @j</option>

                        j++;
                    }

                </select> @k
            </p>
                k++;
            }
        }

        <p m-4>
            @NumberOfPlayers players are playing @NumberOfRounds rounds
        </p>
        <button @onclick="GenerateHeroesClick">Generate Comp</button>

    </div>
</div>



@code {
    public int NumberOfPlayers { get; set; }
    public int NumberOfRounds { get; set; }
    public int[] Role = new int[6];
    public List<string> RolesText;

    protected override void OnInitialized()
    {
        NumberOfPlayers = 1;
        NumberOfRounds = 1;
        string[] CharacterRolesText = Enum.GetNames(typeof(CharacterRole));
        RolesText = new List<string>(CharacterRolesText);
        for(int l=0; l<Role.Length; l++)
        {
            Role[l] = 0;
        }
    }

    private void GenerateHeroesClick()
    {
        for(int i = 0; i<6; i++)
        {
            Console.WriteLine("Role Index" + i + " = " + Role[i]);
        }
    }

}

question from:https://stackoverflow.com/questions/65866253/blazor-binding-to-array-is-one-element-off

Answer 1

@bind="Role[k]" is using the current value of k not the value k was when the element was created. I got around it by declaring int test = k in every iteration of the player loop. Here is the working snippet.

@{ 
            int k = 0;
            for (int i = 1; i < 7; i++)//NumberOfPlayers + 1; i++)
            {
                int j = 0; Console.WriteLine(k);
                int test = k;

            <p mb-3>
                Player @i - Role:
                
                <select @bind="Role[test]">
                    @foreach (string roleText in RolesText)
                    {

                        <option value="@j">@roleText - @j</option>

                        j++;
                    }

                </select> @k
            </p>
                k++;
            }
        }