AJAX - Calling webservice from Client Side and populating the returned XML in controls

Another interesting and common task you would come across while working with AJAX is to call a service from client side, it is a brilliant thing to work with and a rich experience for the user. In crux, you make repeated calls to the database without postbacks and the entire call happens around the client with a relaxed server side. In a SOA architecture, this is a boon to the ASP.net technology and I just love doing it .


How to approach ....

1) Get your tool kit ready for the AJAX control by referencing AjaxControlToolkit.dll. You can grab a copy anywhere online and create the registration in you page.

2) Place a button which can fire the event to call the service, here the main bit of code is the ShowAmendDetailsModalPopup() - I am using a modal popup extender here to call a modal popup , which in turn will be bound to a panel control populated with the details furnished by the webservice.

OnClientClick="ShowAmendDetailsModalPopup();

3) Create the webservice named webservice.asmx with whatever method you want to use on the button click. Make sure you have marked the webservice with the
[ScriptService] attribute, because script manager will not be able to discover your service otherwise.

4) Get the script manager ready in the below forrmat with the reference to all the services being used by the button, here the Service we will be using in the Webservice.asmx

5) Create a ModalPopup extender like below and set the attributes accodingly.
6) Okie, so now you are almost done with the groundwork to start using the service .

7) ShowAmendDetailsModalPopup() javascript function is to be defined for showing the modal popup and calling the webservice.

If you have noticed above , we pass the method used to handle the turn values from webservice as an argumnet in this case it is called DisplayResult() and is being used to manipulate the XML generated by the webservice.. COOL Stuff !!
That is it , once you click the button everything is done on the client side and you see the details in a modal popup :)