Blazor onclick 事件从循环中传入计数器

Question

我目前正在通过 Blazor 中的自制解决方案实施 table 分页，但遇到了一些困难。麻烦的代码如下（这是用于呈现网格下方的分页按钮）：

@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# 行为，其中 lambda 表达式 @(() => GetTablePage(i)) 可以访问变量而不是变量的值，其结果是 lambda 表达式始终调用 GetTablePage(i) 并且 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>
}

希望这对您有所帮助...

Blazor onclick 事件从循环中传入计数器

Blazor onclick event passing in counter from loop

c#

.net-core

single-page-application

blazor