代码之家 › 专栏 › 技术社区 › GregH

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

blazor single-page-application .net-core c#

GregH · 技术社区 · 7 年前

我目前正在通过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);
}

我的问题是每个按钮都会用 我 设置为 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>

单击这些按钮时, 获取表页 函数正在写入 7 控制台的长度为 总页面 收集。

为什么会发生这种情况?我如何克服它?

2 回复 | 直到 7 年前

Flores 7 年前

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

enet 7 年前

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

希望这有帮助…

推荐文章

Sam · 在DateTimeWASM的轮播中嵌入YouTube视频

1 年前

Alireza Noori · 全局配置用于本地化的MudDontext验证消息?

1 年前

Ahmad Salim · 客户端。NET 8 web应用服务器双向绑定未绑定到模型,事件未被触发

1 年前

jessejbweld · 调用WASM任务

1 年前

Frawsty · 上传到Azure存储Blob的文件显示大小为0字节

1 年前

rekcul · Urlweb应用程序(Linux宿主):路径必须是绝对路径。(参数“root”)

1 年前

Frasher Gray · JsonWebapp中的CSS类优先级

1 年前

Isuru · 在两个面板之间拖放组件

1 年前

M.M · 如何在DateTimewith中获取OIDC访问令牌。净值8

1 年前

Apahdos · Argument:绑定一行lambda表达式。调用async Task方法时是否需要异步?

1 年前