Передача события Blazor onclick в счетчике из цикла - PullRequest
0 голосов
/ 29 декабря 2018

В настоящее время я внедряю разбиение на таблицы с помощью собственного решения в 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.

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

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

Это стандартное поведение 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>
}

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

0 голосов
/ 29 декабря 2018

Поскольку 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>
}
...