EF6 MVC5 C # - How to keep filters with page via QueryString

Question

EF6 MVC5 C # - How to keep filters with page via QueryString

Navigation

#1 by (1 votes)

1

Good afternoon,

I have several pages where the user can filter through 5 different fields and when the user clicks on the search button of the form, 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 for this screen, because when I try to change pages, also going through the URL, the search data is lost.

I know that if I put each variable in the ActionLink's paging, I'll be able to get each of the variables, maintaining the search and paging. The problem is that my pagination is being mounted in a generic Partial View (below the code) and I would like to continue this, without having to create a separate page for each screen. Is it 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.

c# asp.net-mvc

asked by anonymous 08.11.2017 / 19:44

1 answer

Generate background report in php Friendly url does not accept the slash after the link

score 1 · Accepted Answer

I believe your filter allows for parsing and sorting, so one exit is to add the two in your template.

For example, a basic filter with title filter 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 may 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>
}

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

(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);
    })
})();

Of course, you'll have to add a similar logic in JS to persist page size, column to sort, and whether the order is ascending or not.