Getting ArgumentOutOfRangeException using for loop in Blazor component

Question

I\'m trying out Blazor and I\'m getting this exception when I\'m trying to load a list of checkboxes using a for loop.

I\'ve created the list here:

p         


        

Answer 1

You can solve it like this:

@for (int j = 0; j < Months.Count; j++)
{
    int i = j;  // a local copy to solve the capture problem

    <ul>
        <li><label for="@Months[i].MonthId" id="checkboxLabel">@Months[i].MonthName</label></li>
        <li><InputCheckbox id="@Months[i].MonthId" @bind-Value="@Months[i].isMonthChecked"></InputCheckbox></li>
    </ul>
}

Which means this is a new, Blazor specific variation on 'capturing the loop variable'.

When you look at the <pagename>.razor.g.cs file you can see that the checkbox requires two lambda's, here is a snippet:

 __value => Months[i].isMonthChecked = __value

and after the for-loop, when the RenderTree is being built, the value of i will be Count for all months.

Using Count()-1 in the original code (your temporary fix) will prevent the exception but note that the form will not function properly, the wrong month will be checked.

General conclusion: don't mix EditForm with a for-loop. foreach() is safe.

Answer 2

I prefer to use a foreach statement in this case :

@foreach(var month in _months)
{
    <ul>
        <li><label for="@month.MonthId">@month.MonthName</label></li>
        <li><InputCheckbox id="@month.MonthId" @bind-Value="@month.IsMonthChecked" /></li>
    </ul>
}

@code {
    private IEnumerable<Month> _months;

    protected override void OnInitialized()
    {
        _months = new List<Month>
        {
            new Month{ MonthId = 0, MonthName = "All Months", IsMonthChecked = false },
            new Month{ MonthId = 1, MonthName = "Jan", IsMonthChecked = false },
            new Month{ MonthId = 2, MonthName = "Feb", IsMonthChecked = false },
            new Month{ MonthId = 3, MonthName = "Mar", IsMonthChecked = false },
            new Month{ MonthId = 4, MonthName = "Apr", IsMonthChecked = false },
            new Month{ MonthId = 5, MonthName = "May", IsMonthChecked = false },
            new Month{ MonthId = 6, MonthName = "Jun", IsMonthChecked = false },
            new Month{ MonthId = 7, MonthName = "Jul", IsMonthChecked = false },
            new Month{ MonthId = 8, MonthName = "Aug", IsMonthChecked = false },
            new Month{ MonthId = 9, MonthName = "Sep", IsMonthChecked = false },
            new Month{ MonthId = 10, MonthName = "Oct", IsMonthChecked = false },
            new Month{ MonthId = 11, MonthName = "Nov", IsMonthChecked = false },
            new Month{ MonthId = 12, MonthName = "Dec", IsMonthChecked = false }
        };
        base.OnInitialized();
    }
}