Forenbeiträge von UNeverNo

Umsetzung von Filtern für DB-queries in Razor Pages

30.04.2019 - 17:27 Uhr

Ich zerbreche mir gerade den Kopf wie ich schönstmöglich Filter darstellen und vom Benutzer befüllen lassen kann, so dass im Anschluss die DB damit gefüttert wird.

Aktuell mache ich es so:

Ich lege mir für die Controls, die als Filter dienen jeweils ein Feld (als string oder string[]) im Model an :

        [BindProperty]
        public string[] FilterSelectedInternalStates { get; set; }

und weise das dann den Controls als Rückgabewert zu:


    <form id="form_Paging" method="post">
        <div id="filtercriteria">
            <!-- die Klasse wird über jQuery entfernt wenn der Wert als Filterkriterium hinzugefügt wird -->
            <div class="hidden">
                <div>X</div>
                @Html.Label("", "Status:")
                <select asp-for="FilterSelectedInternalStates" asp-items="Model.InternalStates"></select>
            </div>
            <!-- hier aktivieren wir die zu verwendenden Filter -->
            <div class="floatleft">
                @Html.Label("", "Filter:")
                <select id="filter" asp-items="Model.Filters" onclick=""></select>
            </div>
        </div>
        <div>
            @Html.HiddenFor(item => Model.CurrentPage)
            @Html.HiddenFor(item => Model.MaxPage)
        </div>
    </form>

Außerdem hier zu sehen die Dropdownlist, über die ich die verwendeten Filter ein- bzw. ausblende. Die Filterwerte definiere ich im Model im Konstruktor wie folgt:

 Filters.Add(new SelectListItem() { Text = "", Value = "" });
 Filters.Add(new SelectListItem() { Text = "Status", Value = nameof(FilterSelectedInternalStates) });

Die Sichtbarkeit steuere ich über jQuery:

$(document).ready(function() {
    $('#filter').change(function () {
        //this returns the value of the list - getting the element by id
        //remove .hidden class        
        $('#' + this.value).parent().removeClass("hidden").addClass("floatleft");
        //hide entry
        $(this).find(':selected').addClass("hidden");
        //set selection
        $(this).val('');
    });

    $('div.hidden > div').click(function() {
        //add .hidden class
        $(this).parent().removeClass("floatleft").addClass("hidden");
        var value = $(this).siblings('select').attr('id');
        $('#filter').find('option[value=' + value + ']').removeClass("hidden");
    });
});

Nun frage ich mich ob es da nicht vielleicht etwas gibt, was so etwas in der Art schon macht, komme mir nämlich gerade so vor, als würde ich das Rad neu erfinden - und besonders schön sieht es aktuell noch nicht aus, abgesehen davon, dass ich noch nicht gelöst habe, wie ich den Filter denn am besten anwende.
Denn ich las von PRG und frage mich, wie ich das jetzt am besten umsetzen würde? Ich habe einen Klick auf den 'Filter anwenden'-Button, löse einen Post aus, der mich auf eine neue Seite leitet, wo dann die Filterung erfolgt und dann (wann/wie?) leitet sie wieder auf die ursprüngliche Seite weiter?

Also eigentlich zwei Fragen - gibt es sowas irgendwo (Nuget/Blog) schon in schön? Kennt ihr was?
Wenn nicht, wie kann ich es mit PRG umsetzen?

Forenbeiträge von UNeverNo Ingesamt 153 Beiträge