[MVC] Sortering, filtering en paginering

[diabolofan]

Goedendag allen,

Bij mijn vorige werkgever werd er gebruik gemaakt van DevExpress. Deze heeft voor het maken van een grid waarin je wilt sorteren, filteren en paginering mooie oplossing. Het nadeel hiervan is alleen dat het een aardig traag pakket kan zijn en het aardig wat duidten kost. Mede door het geld, maar ook door de performance wil en kan ik hier dus niet altijd gebruik van maken.

Waar ik dus naar op zoek ben is een eenvoudige manier om het mogelijk te maken dat een tabel gesorteerd, gefilterd en gepagineerd kan worden. Hier zijn uiteraard diverse libraries voor te vinden op internet.

Direct valt er dan al de scheiding tussen client side en server side oplossingen.

Voordeel van de client side methode is dat de Action in de Controller zeer eenvoudig is: haal alle records op uit de database en gooi het in een tabel; de client doet de rest. Ook direct een groot nadeel qua performace, omdat clients het parsen van duizenden rows niet echt prettig vinden. Een naar mijn idee grote speler in dit gebied is dataTables(https://www.datatables.net/).

Voordeel van server side is dat de performance veel beter is (en dat is uiteraard gewenst), omdat direct in de database alleen maar de records gepakt worden die voldoen aan de criteria (welke pagina, welk zoekwoord op welk veld). Nadeel van de server side methode is dat een Action in je Controller direct al diverse parameters krijgt (zeker als je filters op meerdere kolommen wilt kunnen handlen), zoals ook hier te zien is: http://www.asp.net/mvc/ov...n-asp-net-mvc-application

Dan bestaat er ook nog een combinatie van beiden (wordt ook ondersteund door datatables): wat rijen laden en de rest via ajax afhandelen. Ook dan krijg je dus Action methodes met diverse parameters.

Waar ik dus naar op zoek ben is een oplossing die dynamisch (lees: voor meerdere tabellen die andere kolommen bevatten) en perfomancetechnisch goed in elkaar zit. Wat gebruiken jullie dus voor oplossingen voor dit probleem? Gewoon DevExpress (of soortgelijke library) en de performance en overhead op de koop toe nemen, of Action methods met diverse parameters? Of zie ik (hopelijk) een goede oplossing over het hoofd?

Alvast bedankt voor het meedenken!

[Alex)]

Persoonlijk vind ik DevExpress de grootste troep die er te vinden is, en loop ik er het liefste met een grote boog omheen. De hybride oplossing vind ik eigenlijk het netste. Je houdt rekening met performance en bandbreedtegebruik, terwijl je toch een snelle en eenvoudige oplossing aanbiedt aan de eindgebruiker.

Als je allerlei Actions gaat maken om maar om te kunnen gaan met de verschillende sort/filter/paging-oplossingen doe je iets verkeerd. Dat kun je best in één action opvangen, waarna je je bewerkingen uitvoert op de dataset.

Heb je al eens gekeken naar OData?

[diabolofan]

Nee, ik gebruik 1 Action per Controller om dit mogelijk te maken. Alleen heeft deze methode dan altijd 3 parameters: paginanummer, sortering van kolommen, filterwaarden van kolommen. Uiteraard kan je dit in een JSON string stoppen, zodat je maar 1 parameter hebt, maar daarna begin het uitpluizen van die JSON..

Dan moet je een string kolom naam uit de JSON string gaan terugherleiden naar een property van een class om daar vervolgens een sortering/filtering op uit te kunnen voeren. En dat dan voor elke kolom en dat dan nog eens voor elk ViewModel wat je hebt. Dat kan toch niet de bedoeling zijn?

OData ziet er interessant uit. Ik heb alleen een nu al bestaande applicatie waarin het geimplementeerd dient te aan worden, waar dus nog geen gebruik wordt gemaakt van REST...

[Alex)]

diabolofan schreef op woensdag 22 juli 2015 @ 19:27:
Nee, ik gebruik 1 Action per Controller om dit mogelijk te maken. Alleen heeft deze methode dan altijd 3 parameters: paginanummer, sortering van kolommen, filterwaarden van kolommen. Uiteraard kan je dit in een JSON string stoppen, zodat je maar 1 parameter hebt, maar daarna begin het uitpluizen van die JSON..

Linksom of rechtsom moet je die data toch over de lijn krijgen. Of je dat nou doet met URL-parameters of met een JSON-object maakt dan ook niet zoveel meer uit.

Dan moet je een string kolom naam uit de JSON string gaan terugherleiden naar een property van een class om daar vervolgens een sortering/filtering op uit te kunnen voeren. En dat dan voor elke kolom en dat dan nog eens voor elk ViewModel wat je hebt. Dat kan toch niet de bedoeling zijn?

Lijkt me wel? Je moet wat werk verzetten om resultaat te bereiken.

Als je Entity Framework gebruikt zou je EntitySQL kunnen gebruiken om queries uit te voeren tegen de dataset. Dan kun je gewoon wat String.Format's gebruiken

OData ziet er interessant uit. Ik heb alleen een nu al bestaande applicatie waarin het geimplementeerd dient te aan worden, waar dus nog geen gebruik wordt gemaakt van REST...

Je zou het kunnen toevoegen?

[frG]

Wat wij zelf gebruiken is KendoUI van Telerik, er zijn verschillende varianten te vinden.

Voor een impressie:
http://demos.telerik.com/kendo-ui/grid/index

Eigenlijk alles wat je wilt zit er in, ook performance technisch is het uitstekend, OData, IQueryable etc..

Filtering, Sortering, etc wordt allemaal voor je geregeld, ze hebben een MVC wrapper (http://www.telerik.com/aspnet-mvc) om KendoUI heengemaakt die je o.a. een fluent API biedt:

C#:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false).Width(100);
        columns.Bound(p => p.Freight).Width(100);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity).Width(150);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

Kost ongeveer 1000$ per developer license per jaar (voor de MVC wrapper versie), maar de pure javascript is volgens mij gratis.

[ Voor 3% gewijzigd door frG op 22-07-2015 22:26 ]

[Alex)]

Het Grid zit niet bij de gratis versie inbegrepen.

[HollowGamer]

+1 voor datatables(), deze ondersteund ook ajax technieken.
Moet er zelf ook naar kijken, want ik heb ook last van performance verlies/hangende browser door veelheid aan data/entries. Maar er is genoeg over te vinden:
https://datatables.net/re...rver-side_processing.html
https://www.datatables.net/examples/server_side/simple.html

[diabolofan]

Telerik is me inderdaad ook bekend, maar ook dan zijnd de kosten het probleem.

Zal dan inderdaad uitkomen op de datatables in combinatie met AJAX, even kijken of ik daar een mooi MVC voorbeeldje bij kan vinden.

[frG]

diabolofan schreef op woensdag 22 juli 2015 @ 23:40:
Telerik is me inderdaad ook bekend, maar ook dan zijnd de kosten het probleem.

Zal dan inderdaad uitkomen op de datatables in combinatie met AJAX, even kijken of ik daar een mooi MVC voorbeeldje bij kan vinden.

Jij hebt het telkens over kosten, maar werk jij gratis dan? de tijd die jij (en of collega's) er in moeten steken om zelf een oplossing te bouwen kost vele malen meer dan een licentie..

[diabolofan]

Ik denk dat ik niet duidelijk ben geweest over het feit dat dit over prive projectjes gaat DevExpress gebruikte ze bij mijn vorige werkgever, maar ik bedoelde dus niet dat ik op zoek ben naar een oplossing voor een project van mijn huidige werkgever.

[InZane]

Ik ben nog steeds enorm fan van datatables. Zoals al gezegd, ondersteunt deze ook gewoon ajax voor het asynchroon ophalen van data

[Tjolk]

Ik gebruik sinds kort jQuery Easy UI met de editable datagrid. Werkt best lekker inderdaad: via AJAX de data ophalen (server side gelimiteerd per pagina en/of zoekopdracht) en de rest aan de client laten.
Voor mijn vorige werkgever hebben we enige tijd naar jTable gekeken. Zag er veelbelovend uit, maar ik heb de implementatie niet meer meegemaakt.

[HollowGamer]

InZane schreef op donderdag 23 juli 2015 @ 10:14:
Ik ben nog steeds enorm fan van datatables. Zoals al gezegd, ondersteunt deze ook gewoon ajax voor het asynchroon ophalen van data

+1

Ger schreef op donderdag 23 juli 2015 @ 13:44:
Ik gebruik sinds kort jQuery Easy UI met de editable datagrid. Werkt best lekker inderdaad: via AJAX de data ophalen (server side gelimiteerd per pagina en/of zoekopdracht) en de rest aan de client laten.
Voor mijn vorige werkgever hebben we enige tijd naar jTable gekeken. Zag er veelbelovend uit, maar ik heb de implementatie niet meer meegemaakt.

Vind dit wel weer te uitgebreid, same voor bootstrap, etc..
Geef mij zo simpel (en doelgericht) als mogelijk, de rest eromheen voeg ik zelf wel toe of gebruik daarvoor plugins/HTML5/scripts.
Waarom? Ik probeer mij zo min mogelijk te afhankelijk te maken van diverse frameworks/extensies.
jQuery heeft/krijgt tegenwoordig veel zelf aan boord. Voor elk project waar ik iets 'meer' nodig heb (dan niet kan met jQuery zelf), zoek ik wel op GitHub.

Stopt de ontwikkeling (van een onderdeel/git), dan maakt dit switchen naar iets anders veel makkelijker.

[ Voor 5% gewijzigd door HollowGamer op 23-07-2015 15:09 ]