EF6 MVC5 C# - How to maintain filters with Querystring page

Question

Good afternoon,

I have several pages where the user can filter through 5 different fields and when the user clicks on the form search button, which is configured with the GET method, the search is passed in the URL as Querystring, a variable for each field.

The problem occurs when I need to create the page of this screen, because when I try to change page, also passing through the URL, the search data is lost.

I know that if I put each variable in the Actionlink of the pagination, I will be able to obtain each of the variables, keeping the search and pagination. The problem is that my paging is being mounted in a generic Partial View (below the code) and would like to continue like this, without having to create a separate page for each screen. It is possible?

<div>
    Página @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
    de @Model.PageCount
    @if (Model.HasPreviousPage)
    {
        @Html.ActionLink("<< Primeira", "Details", null, new { pagina = 1 }, null)
        @Html.Raw(" ");
        @Html.ActionLink("< Anterior", "Details", null, new { pagina = Model.PageNumber - 1 }, null)
    }
    else
    {
        @: [ Você está na primeira página ]
    }

    @if (Model.HasNextPage)
    {
        @Html.ActionLink("Próxima >", "Details", null, new { pagina = Model.PageNumber + 1 }, null)
        @Html.Raw(" ");
        @Html.ActionLink("Última >>", "Details", null, new { pagina = Model.PageCount }, null)
    }
    else
    {
        @: [ Você está na última página ]
    }
</div>

Thank you.

Answer 1

I believe your filter allows pargination and sorting, so one way out is to add both to your model.

for example, a basic crud with filter by title and date range.:

public class EntityModel
{
    public EntityFilter Filtro { get; set; }
    public List<Entity> Entities { get; set; }
}

public class EntityFilter : BaseFilter
{
    public string Titulo { get; set; }
    public DateTime DataInicial { get; set; }
    public DateTime DataFinal { get; set; }
}

public class BaseFilter
{
    public int PaginaAtual { get; set; }
    public int PaginaTamanho { get; set; }
    public string Coluna { get; set; }
    public bool Ascendente { get; set; }
}

your form, can be something like.:

@model EntityModel
@using (Html.BeginForm("Action", "Controller", FormMethod.Get))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Filter.PaginaAtual)
    @Html.HiddenFor(model => model.Filter.PaginaTamanho)
    @Html.HiddenFor(model => model.Filter.Coluna)
    @Html.HiddenFor(model => model.Filter.Ascendente)
    <div>
        @Html.LabelFor(model => model.Filter.Titulo);
        @Html.EditorFor(model => model.Filter.Titulo);
    </div>
    <div>
        @Html.LabelFor(model => model.Filter.DataInicial);
        @Html.EditorFor(model => model.Filter.DataInicial);
    </div>
    <div>
        @Html.LabelFor(model => model.Filter.DataFinal);
        @Html.EditorFor(model => model.Filter.DataFinal);
    </div>
    <div>
        <input type="submit" value="Enviar" />
    </div>
}

already your paging button, basically you will have to set the input[type='hidden'][name='Filter.PaginaAtual'] and force send form.

(function () {
    var form = document.querySelector("form");
    var paginaAtual = document.querySelector("input[type='Filter.PaginaAtual']");
    var paginacao = document.querySelectorAll(".paginacao");

    var onPaginaClick = function (evt) {
        evt.preventDefault();
        paginaAtual.value = evt.target.value;

        var evento = new new Event('submit', { 'bubbles': true, 'cancelable': true });
        form.dispatchEvent(evento);
    };

    [].forEach.call(paginacao, function (pagina, indice) {
        pagina.addEventListener("click", onPaginaClick);
    })
})();

And of course, you will need to add a similar logic in JS to persist the page size, column to sort and whether the order is ascending or not.