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

【问题标题】：Blazor onclick event passing in counter from loopBlazor onclick 事件从循环传入计数器
【发布时间】：2018-12-28 21:38:17
【问题描述】：

我目前正在通过 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 集合的长度。

为什么会发生这种情况，我该如何克服？

【问题讨论】：

标签： c# .net-core single-page-application blazor

【解决方案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>
}

【讨论】：

【解决方案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>
}

希望这会有所帮助...

【讨论】：