使用 Blazor Binding 的动态方法参数

Question

我正在尝试使用 Blazor 制作分页组件。导航 First、Last、Previous 和 Next 已经在运行。问题是：我希望用户能够单击页码并通过传递页码执行 NavigateToPage 操作。

这是我的尝试：

<div class="col-12 col-md-6 col-lg-3 offset-lg-6 text-right">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
            <li class="page-item @PuedeNavegarPrimeraPagina">
                <a class="page-link" tabindex="-1" @onclick="NavegarHaciaPrimeraPagina">Primera</a>
            </li>
            <li class="page-item @PuedeNavegarPaginaAnterior">
                <a class="page-link" tabindex="-1" @onclick="NavegarHaciaPaginaAnterior">Anterior</a>
            </li>
            @for (int i = 1; i <= TotalPaginas; i++)
            {
                var clasePaginacionPaginaActual = (PaginaActual == i) ? "disabled" : "";
                <li class="page-item @clasePaginacionPaginaActual"><a class="page-link" @onclick="(() => NavigateToPage(i))">@i</a></li>
            }
            <li class="page-item  @PuedeNavegarPaginaSiguiente">
                <a class="page-link" @onclick="NavegarHaciaPaginaSiguiente">Siguiente</a>
            </li>
            <li class="page-item  @PuedeNavegarUltimaPagina">
                <a class="page-link" @onclick="NavegarHaciaUltimaPagina">Última</a>
            </li>
        </ul>
    </nav>
</div>

NavigateToPage期望页码，但是当前代码始终为所有链接发送相同的值，对应于i[=26=的最后一个值].如果有4个页面，那么无论点击哪个链接，参数都是5。

知道如何获取不同的参数值吗？

Answer 1

你的 for 循环应该包含一个像这样的局部变量::

@for (int i = 1; i <= TotalPaginas; i++)
            {
                var local = i;
                var clasePaginacionPaginaActual = (PaginaActual == local) ? "disabled" : "";
                <li class="page-item @clasePaginacionPaginaActual"><a class="page-link" @onclick="@(() => NavigateToPage(local))">@i</a></li>
            }

这是标准的 C# 行为，其中 lambda 表达式 @(() => NavigateToPage(local)) 可以访问变量而不是变量的值。您必须定义一个 for 循环的局部变量，否则您的 lambda 表达式将始终调用 NavigateToPage(i) 并且 i 在循环结束时为 5。

使用 Blazor Binding 的动态方法参数

Dynamic method parameter using Blazor Binding

c#

blazor

blazor-server-side