The text-Input filed in my Blazor Server side project, is cleared when user gives an input and presses enter. What is wrong with the data binding?

Question

I have a Blazor server side side app. In my razor page I have programmed 10 input fields in a for loop and have binded their values to elements of an string array.

But my problem is that, after I type something into the input field and press enter, the input field is cleared. At this point nowhere in my code I'am writing to the binded variable of the input field. What is wrong with my binding?

@for (int i = 0; i < 10; i++)
{

    <tr height="30px">
        <td class="td_DiagBuff_data" width="200"> <input type="text"  @bind="@PLC_VAR_name[i]"/></td>            
    </tr>
}

@code {
public string[] PLC_VAR_name { get; set; }  = new string[99];
// the variable I have also declared without { get; set; }, but same result.
}

Answer 1

When you are rendering inside a loop in Blazor, you must use a local variable - not the loop variable. You should also use a @key directive on each item in the loop.

@for (int i = 0; i < 10; i++)
{
    int index = i;
    <tr height="30px">
        <td class="td_DiagBuff_data" width="200"> 
            <input @key=index type="text"  @bind="@PLC_VAR_name[index]"/>
        </td>            
    </tr>
}