Index out of range blazor checkbox [duplicate] - checkbox

Question

This question already has an answer here:
Calling function from generated button in Blazor [duplicate]
(1 answer)
Closed 2 years ago.
I try to create the user management in blazor.
The check box is check/uncheck when I click on it. but when It showed index out of bound. I don't know what went wrong. just try with blazor wasb. please help check this. it is just a basic component but somehow I don't get used to its usage yet.
I try to create the user management in blazor.
The check box is check/uncheck when I click on it. but when It showed index out of bound. I don't know what went wrong. just try with blazor wasb. please help check this. it is just a basic component but somehow I don't get used to its usage yet.
#page "/manageuserrole/{userId}"
#inject HttpClient client
#inject IJSRuntime js
#inject NavigationManager uriHelper
<h3>User Roles</h3>
#if (manageUserRolesDto == null)
{
<text>Loading...</text>
}
#*else if (manageUserRolesDto.Length == 0)
{
<text>No Records Found.</text>
}*#
else
{
<EditForm Model="#manageUserRolesDto" OnValidSubmit="#UpdateUserRoles">
<table class="table table-striped">
<thead>
<tr>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < manageUserRolesDto.UserRoles.Count(); i++)
{
<tr>
<td>#manageUserRolesDto.UserRoles[i].RoleName</td>
<td>
<div class="form-check m-1">
<input type="checkbox"
#bind="#manageUserRolesDto.UserRoles[i].Selected"
/>
</div>
</td>
</tr>
}
</tbody>
</table>
<button type="submit" class="btn btn-success">
Submit
</button>
</EditForm>
}
#code {
[Parameter]
public string userId { get; set; }
ManageUserRolesDto manageUserRolesDto { get; set; }
protected override async Task OnInitializedAsync()
{
manageUserRolesDto = await client.GetFromJsonAsync<ManageUserRolesDto>("api/userroles/" + userId);
}
private void checkUserRole(int i)
{
manageUserRolesDto.UserRoles[i].Selected = !manageUserRolesDto.UserRoles[i].Selected;
}
async Task UpdateUserRoles()
{
await client.PutAsJsonAsync("api/userroles/" + userId, manageUserRolesDto);
uriHelper.NavigateTo("user");
}
async Task ManagePermission(string roleId)
{
}
}

Answer 1

#for (int i = 0; i < manageUserRolesDto.UserRoles.Count(); i++)
{
int copy = i;
<tr>
<td>#manageUserRolesDto.UserRoles[i].RoleName</td> <-- this 'i' is OK
<td><div class="form-check m-1">
<input type="checkbox"
#bind="#manageUserRolesDto.UserRoles[copy].Selected" <-- i is not OK
/>
</div></td>
</tr>
}
The #bind is compiled to a lambda function that captures the variable.
Another option is to use a foreach() { } instead of a for() { }