Передача события Blazor onclick в счетчике из цикла

Question

В настоящее время я внедряю пейджинговую обработку таблиц с помощью собственного решения в Blazor и сталкиваюсь с некоторыми трудностями. Неприятный кусок кода приведен ниже (это для рендеринга кнопок подкачки под сеткой):

@for (int i = 0; i < vm.TotalPages; i++)
{
    <button id="pg-button-@i" class="btn btn-primary btn-sm" type="button" onclick="@(() => GetTablePage(i))">@i</button>
}

Обратите внимание на событие onclick, я вызываю функцию и передаю i, счетчик текущего взаимодействия цикла.

GetTablePage Метод выглядит следующим образом:

protected async Task GetTablePage(int page)
{
    Console.WriteLine("page number: " + page);
}

Моя проблема в том, что каждая кнопка будет вызывать эту функцию с i установить как длину vm.TotalPages,

Вот пример, чтобы попытаться прояснить это:

Просмотреть разметку (обратите внимание на id каждой кнопки устанавливается соответственно):

<button id="pg-button-0" class="btn btn-primary btn-sm" type="button">0</button>
<button id="pg-button-1" class="btn btn-primary btn-sm" type="button">1</button>
<button id="pg-button-2" class="btn btn-primary btn-sm" type="button">2</button>
<button id="pg-button-3" class="btn btn-primary btn-sm" type="button">3</button>
<button id="pg-button-4" class="btn btn-primary btn-sm" type="button">4</button>
<button id="pg-button-5" class="btn btn-primary btn-sm" type="button">5</button>
<button id="pg-button-6" class="btn btn-primary btn-sm" type="button">6</button>

После нажатия ЛЮБОЙ из этих кнопок мой GetTablePage функция пишет 7 на консоль, которая является длиной vm.TotalPages коллекция.

Почему это происходит и как я могу это преодолеть?

Answer 1

Так как i является переменной, и цикл for всегда завершается, когда вы нажимаете, в этот момент он равен 7

Вам нужно сделать что-то вроде:

@for (int i = 0; i < vm.TotalPages; i++)
{
    var tempint = i;
    <button id="pg-button-@i" class="btn btn-primary btn-sm" type="button" onclick="@(() => GetTablePage(tempint))">@i</button>
}

Answer 2

Это стандартное поведение C#, где лямбда-выражение @(() => GetTablePage(i)) имеет доступ к переменной, а не к значению переменной, в результате чего лямбда-выражение всегда вызывает GetTablePage (i) и я равняюсь 7 в конце цикла. Чтобы решить эту проблему, вы можете определить переменную, локально связанную с циклом, как показано ниже:

@for (int i = 0; i < vm.TotalPages; i++)
{
    var temp = i;
    <button id="pg-button-@temp " class="btn btn-primary btn-sm" type="button" onclick="@(() => GetTablePage(temp ))">@temp </button>
}

Надеюсь это поможет...