Writing a JavaScript client side interface backed by ASP.NET Web Services is a great way to create a rich responsive interface. A previous post on Client Side Binding Using Ajax Page Methods and jQuery demonstrates some of the first steps to do this. It can be a bit tricky when its not working figuring out what is wrong, is it the JavaScript the Web Service or something else. I thought I would extend the post to show how to debug with Firebug.
If you are familiar with Firebug, then this is probably all old news. In my opinion Firebug is hands down the best HTML and CSS web debugging tool you can have in your toolkit.
A quick summary
Some client side action on the web page takes place and requires some sort of server side action. For example retrieving and filling a drop down list with values based on a previous selection, a common way of selecting a category from a tree structure that is to large to render in a single drop down.
Debugging the client side JavaScript interacting with an ASP.NET Web Service
Attached to the button in this example is the JavaScript that queries the web service. You push the button and nothing happens. Open Firebug and select the console you will see the request to the Web Service has thrown an error 500 Internal. Select the HTML tab and you can see the error message returned by the Web Service. In this case its an easy fix, the Web Service class is missing the ScriptService attribute.
After fixing the Web Service I place a break point in the script section of Firebug immediately after the Web Service returns. I select the result variable and add it to the watch, after visually inspecting the JSON in the Watch panel, I can see the data structure is slightly different from what I was expected.
In the response section of Firebug you can see the data passed back from the Web Service.
After fixing the JavaScript it executes without error.
You can see with Firebug it is very easy to see exactly what is wrong.
The benefits of using a Web Service
Its always tempting to use ASP.NET Ajax to do this as it so easy and its still much beater than posting the whole page back to the server. You can achieve the same thing querying an ASP.NET Web Service and then doing something client side with the result. Using an ASP.NET web service to supply the data in JSON format allows you to easily manipulate the result directly in your client side JavaScript. Less data is transferred over the network and on the server side you are not running through the full page life cycle on each request.
Tuesday October 26 2010 04:40 p.m.