Pagedlist: Data Pagination with Ajax

Question

I’m using Pagedlist with Ajax, but I can’t change the page because when I click on the button, which represents the page, the value that is going to the controller is null. I made the following structure:

View:

@model PagedList.IPagedList<MeuProjeto.Web.ViewModels.ClienteViewModel>
@using PagedList.Mvc;
...
<div id="ClientesTableDiv">
    @Html.Partial("_ClientesTable", Model)
</div>

@Html.PagedListPager(Model, pagina => Url.Action("Paginacao","Cliente", pagina ), 
       PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( 
          new AjaxOptions() { 
                              HttpMethod = "POST",
                              UpdateTargetId = "ClientesTableDiv" 
                            }))

Controller:

[HttpPost]
public PartialViewResult Paginacao(int? pagina)
{
    ...
    int numeroPagina = pagina ?? 1; // A pagina está vindo como nula.
    int tamanhoPagina = 5;

    return PartialView("_ClientesTable",
              clientesViewModel.ToPagedList(numeroPagina, tamanhoPagina));
}

The code of the last line of the View must be changed?

Answer 1

There’s an adjustment to be made here:

• Is pagina place new {pagina}:
• Instead of POST, place GET, because in that case it is link:

@Html.PagedListPager(Model, pagina => Url.Action("Paginacao","Cliente", new { pagina }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "ClientesTableDiv" }))

• In the method also change the Verb for GET

---

[HttpGet]
public PartialViewResult Paginacao(int? pagina)
{
    ...
    int numeroPagina = pagina ?? 1; // A pagina está vindo como nula.
    int tamanhoPagina = 5;

    return PartialView("_ClientesTable",
        clientesViewModel.ToPagedList(numeroPagina, tamanhoPagina));
}