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

这是标准 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>
}

希望这可以帮助...

Answer 2

因为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>
}