Calling WebService Asynchronously using ScriptManager in just 3 Steps.

This is one the most simple method to call a WebService asynchronously. It is not only simple but its fast and upto the performance is performance is issue. We all know that how webserices pulls data fast from server to client.

Using such asynchronous methods, its help to avoid getting much of the payload we use to get in normal postbacks.So its fast and easy.

I am here showing most simple way to do so.

Step 1: Get one Textbox and Button on form.

<div>
        <asp:TextBox runat="server" ID="name"></asp:TextBox>
        <asp:Button ID="cmd" runat="server" OnClientClick="javascript:return hello();" Text="Click Me" />  
</div>

You can see that I have added a Javascript function hello(), Now lets see what is that function is going to do.

But before that we need to add WebService to our application. So add a simple WebService like we add it normally.

[Note : I have taken simple WebService and not the WCF one.]

Step 2: Add a WebService to the application.

Go to WebService.cs file, Make sure that you had called the Namespace System.Web.Script.Services either with Imports [if VB.NET or Using if C#, I am using C#]

using System.Web.Script.Services;  

Then make sure that you un-comment following line :

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]

This is already uncommented in Visual Studio 2008, I think this is not the case with Visual Studio 2005, I think there you explicitly need to write it.

I have written my own WebMethod for demo, you can replace that with anything you want it as webmethod.

[WebMethod]
    public string Vikram(String str)
    {
        return "Hello "+ str;
    }

Step 3: Consuming WebService in application.

This is most important and final step towards getting a call to webservice asynchronously.

Usually we create a proxy of service either by WSDL tool or in code we simply make object of that. But here we not going to implement any of this. We are going to achieve this by using ScriptManager, like a AJAX call. So we will now look at the final piece of code.

<asp:ScriptManager runat="server">
        <Services>
            <asp:ServiceReference Path ="~/WebService.asmx" />
        </Services>
    </asp:ScriptManager>

This is how I am going to call my Service using Script Manager.I guess many of us till the day used Script Manager for just sake of implementing AJAX. Hope this will encourage all of us to explore more.

<script type="text/javascript">
    function Callback(result)
    {
        alert(result);
    }
    function hello()
    {
        WebService.Vikram($get('name').value,Callback);
    }
   </script> 

This is the final Script which we have, here you can see I have used another function as Callback as we expect a asynchronous call so we need to have some kind of checksum sort of thing to make sure its getting called asynchronously.

In function hello() I have just created a proxy for my service. Well be frank to you. while programming this demo, I saw once name of this service in Intellisense but I never again saw the same..surprise or bug in Visual Studio 2008..I don't know.

I have just passed control id to script as $get statement shows followed by call to Callback function and we are done with it.

This is how you can call any webservice asynchronously, I think this way life will be easier as its very very simple to implement.

Vikram.