时间戳

首页 > 解决方案 > Blazor onclick 事件从循环传入计数器

c# - Blazor onclick 事件从循环传入计数器

问题描述

我目前正在通过 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-coresingle-page-applicationblazor

解决方案

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

推荐阅读