Showing posts with label C#. Show all posts
Showing posts with label C#. Show all posts

Friday, 29 January 2010

Paging Sorting and Filtering using J Query, J-SON and C#

We all have known that the Visual Studio IDE has the Grid View control that gives us inbuilt methods and capabilities to do the customized paging, sorting and filtering of data.


Now, the disadvantages:-

1. Navigation – We would have to write our own custom based procedures or methods to fetch only the required records if we implement paging. Also, we would have to implement the update panel and /or update progress available with AJAX toolkit to give a nice navigation progress feel to the user.

2. Time for Search Results – The time delay for the user would be more, since there are overheads that would be involved by using the GridView control and also more overheads if any row data bound events are written on them. Any other events attached to the page would result in further delay to display the results

3. Page size- Usually higher and complex controls also would be used for any such feature which requires any other person to have atleast a fair bit of understanding on how the page works.

Enter J-Query, where this can be used in all your applications and which is more performance oriented. The need to navigate, page and search records according to a particular search criteria is much simpler and faster.

Before letting you know all the details, please visit the following sites –

Introduction to JSON


For introduction to J-Query:

J-templates


JSON Plugin


So, I will now compare the conventional method v/s the J-query way of writing code.


Taking the example of a cascading drop down effect to be achieved,


Normal style:-

Have 2 dropdowns and have a selected index changed event for the first dropdown and get the selected value of the first dropdown, and then populate the second dropdown by calling a method from your business logic. The better approach would be to use the Cascading dropdown provided by AJAX control toolkit.

Sample code shown below:-

AJAX reference in the page:-

Drop down code-




AJAX Cascading drop down reference written-






















Also, there would be a web service which would fetch relevant records. The web service code can be found from the sample reference link below:-

Reference for AJAX Cascading drop down.

J–Query method –
Download the latest version of J - Query from the J-Query home page and reference that in your page-
Then you would have an inline code of java script or an external file, which does the cascading effect without any hassles. Also, no other references are required on the page, thus making it lightweight and performance oriented.

Page reference to the script -

Drop down HTML –




Document ready code in external JS for the page –




Dropdown change event triggered in J-query –




Manipulating 2nd dropdown values inside the change event for 1st dropdown -



Calling web method in J Query–