Using asp.net C# and jquery to filter a collection of data

Question

I'm developing a webpage where users can filter data and then export the selection to pdf or excel. The website is using ASP .NET C#.

To filter the data I have crated a webpage containing a left column with boxes and drop downs enabling users to enter search criteria and then click a search button. This is the typical search/filter functionality that a lot of websites contains. After filtering the data, the selecting is displayed using an asp listview. This listview generates a table. I've implemented Dragtable , enabling users to alter the sequence of the columns in this table, and also the columnManager enabling users to select which columns to display.

So my problem is that the filter/search functionality is resolved back-end using asp .net C#, while the selecting and rearranging of columns is done client-side using jQuery. When users now click the "export"-button, I'd like to collect the filter done by the asp controls in addition to the filter done by jQuery, and create the file. This file should only contain the columns selected using columnManager, in the same order they are in after being altered using dragtable.

What is best practice when using both server side filter and client side filter? I've also considered to drop all of the server-side filtering and use only ajax.post() to send all filters in JSON format to the server. I also want to enable users to save their current filter for another time.

Update

I've decided to drop the server side and use ajax (getJSON to be more precisely) to get the search result. This way I don't loose the ordering and sorting of columns that is done with jQuery/js, which I would with a post-back (could use cookies'n stuff, of course). I also keep all the logic in one place, and JSON objects can easily be wrapped/unwrapped server-side. Thanks for your answers, though!

Answer 1

It's not at all bad to have Client side and Server side working at same place. All the good applications running in the world have these combination together.

However we need to see the approach.

If you don't want any postbacks , I would recommend to go with Jquery.

If you are ok with roundtrips, go ahead with Server Side and Ajax.

Answer 2

Your approach has another problem: What happens if the user orders the columns first and than filters it? The order of the columns is resetted.

However with the jquery ui draggable you are able to fire ajax calls to notify the server side code about the change. You can bind a function to the stop event: http://api.jqueryui.com/draggable/#event-stop

So I would do the following:

• Fire ajax call when the user changes the order of the columns, but do not refresh the data
• Fire ajax calls when the user adds a filter AND refresh the data

The server side code is always up to date and renders the correct ouput if it has to.