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的最后一个值。如果有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绑定的动态方法参数

1 个答案: