ASP.NET Tips : Getting asynchronous JQuery treeview to work with ASP.NET Webservices

Recently I had to display some hierarchical data in a treeview. I looked around and found JQuery treeview can transforms an unordered list into an expandable and collapsable tree, and supports both location and cookie based persistence.
treeview1
Fig: JQuery Treeview

As I was dealing with a large amount of data I needed something that will allow me to navigate through the data asynchronously, and I found jQuery Treeview fits well for my purpose. I found this demo of Lazy Loading Tree and I needed to implement similar functionality where the JQuety Treeview communicates to a ASP.NET Webservice.

Problem 1: Unfortunately the codes that ships with the demo do not work with ASP.NET Webservice out of the box. First of all if you have downloaded the TreeView plugin from this link http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ you will notice the “jquery.treeview.async.js” file uses $.getJSON method to make AJAX calls to the server. But this is no good for ASP.NET webservice or WCF which expect JSON POST , this function is only useful for simple JSON results returned from arbitrary services.

treeviewasync

Problem 2: However if you download the jquery.treeview.async.js from http://view.jquery.com/trunk/plugins/treeview you will notice the $.getJSON function is commented and an alternative $ajax() method has been used.

treeviewasync2

but this one is still not good for ASP.NET Webservice calls, I am explaining this in a moment.

There are several options available in JQuery to make AJAX calls to the server. They are
1. $.ajax(opt),
2. $(sel).load(url,data,callback)
3. $.get(url,data,callback,type)
4. $.post(url,data,callback,type)
5. $.getJSON(url,data,callback)
6. $.getScript(url,callback)

The complete list of JQuery AJAX “Requests” and “Event” based functions are all listed here. However to get JQuery working with ASP.NET Webservices we should be interested with $.ajax(opt) function, a low level Ajax function which offers to create any kind of Ajax request. This allow us to configure Ajax request with a set of key/value pairs, and all options are optional. We should be aware that ASP.NET AJAX 1.0 includes a number of default settings and built-in features to prevent from JSON hijacking attacks, ASP.NET AJAX webmethods do not enable HTTP GET requests by default. To make a successful call to the ASP.NET webservice using JQuery we need to make sure that the request must be a POST request, and the request’s content-type must be: “application/json; charset=utf-8. By now you have already realized that the above $.ajax() call do not fit any of these two requirements. So I attempted to fulfill these requirements and passed more option paramameters as part of the $.ajax() call.

Problem 3: I modified the script to fit the requirements
- the request must be a POST request
- the request’s content-type must be: “application/json; charset=utf-8

treeviewasync3

However this did not work either. now I started facing another problem, “Invalid JSON primitive: root.”

invalidJSON 

After googling on this issue for a while I found, as the data parameter is a valid JSON object, calling the webservice in this way do not throw any exception, but it also do not produce the desired result either. Instead of passing the data JSON object to the webservice, JQuery automatically serializes and sends it as root = source.

JSONserialize
The solution is to make sure that we pass data parameter as a string instead of a JSON object. Encosia.com has a very good post on this subject “3 mistakes to avoid when using JQuery with ASP.NET AJAX“, a must read. Finally I adjusted the script as follows and it started working as desired.

 treeviewFinal
 

Conclusion

I have discussed how to get JQuery treeview working with ASP.NET Webservice. Out of the box treeview ships with “jquery.treeview.async.js” file that is not compatible with ASP.NET Webservices or WCF. To make a successful call to the ASP.NET webservice using JQuery we need to make sure
- the request must be a POST request, and
- the request’s content-type must be: “application/json; charset=utf-8.
- the data parameter of the $.ajax() method must be passed as a string.

I hope this will save you some time. Thank you for being with me so far.