c# - 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>
}