How To Make Ajax Calls In ASP.NET Using Web Services

1. Using the ScriptManager
2. Creating A WebService
3. Making a Call To A WebService
4. Returning Data To Caller
5. Quick Recap and Summary

Ajax has become common place in almost all websites. Users get a faster web experience, at the cost of a slight bit of complexity to the developer. But it's the users who make the site and not the other way around, so it's totally a good route to take at times. There's tons of different ways to make AJAX requests in ASP.NET, and I'll be covering just one of them here today. It's probably one of the fastest ways to do it, and great if you're in a bit of a time crunch or new to this whole AJAX world. This post will assume that you already know the basics about AJAX, so I'll skip the preliminaries and get right to the fun stuff. I'm using Visual Studio 2013 for all of the screenshots and examples. I created a default test project so everything is right out of the box.

The ScriptManager

The ScriptManager component is what makes it possible to handle AJAX in such a fast and easy manner in .NET. It takes care of making sure the client side libraries are loaded and it manages all ASP.NET AJAX controls and web services in your web form. You can declare it in your web form by placing it directly after your main <form tag with runat="server". Be sure to place it inside the form tag, or you'll receive a runtime error. You can also place it in your MasterPage to avoid repeating it each time a page requires any AJAX functionality.

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    <Services>

        <asp:ServiceReference Path="~/WebService.asmx" />

    </Services>

    </asp:ScriptManager>

The ScriptManager has many more exposed properties that you can set and play around with such as the timeout length for the request, the default error message and lots more stuff that I myself have not yet dove into. But for now, we can leave the control as is, and just set the path to the web service.

Creating The Web Service

To create a Web Service in ASP.NET right click the project and Add New Item.

Select Web Service from the Add New Item dialog, give it a name and you're good to go. This will add two files to your project, the "ServiceName".cs file in your App_Code directory and the "ServiceName".asmx file in whichever directory you added the file to. We're only going to focus on the one in your App_Code directory for this post as that is where the codez go.

Now that we have our Web Service created we need to note a few things about it in order to have it function the way that we want it to. Be sure to uncomment the following line at the top of the newly created service. If you don't you wont receive an error message of any kind, but you won't be able to make any Ajax calls.

Also any functions that you plan to call through an AJAX request must be prefixed with the [WebMethod] directive right before the function declaration. Also note you can have any number of functions within the scope of the Web Service by just not including the [WebMethod] directive.

Calling The Web Service

This is where the ScriptManager makes life a bit easier for us when dealing with AJAX requests. We can call the web service functions like we can call any other function and all in javascript and asynchronously.

Returning Data To The Caller

The callback function that you pass in to your request returns with it the data being sent from the WebService function. The WebService function can return almost any kind of data back to the caller, which makes it really efficient to use the built in .NET classes or your own predefined classes just as you would in any other context in your solutions.

I refer to the tall image on the left here as my next example. Notice the different return types for each WebMethod function. From string to List to even custom defined classes. You can return any normal type of data that you would use when posting the data.

It's this flexibility that makes the ScriptManager and WebService a quick and tidy approach when working with Ajax in ASP.NET. Much of the complexities are removed so that you can focus on the work instead of the usual code boilerplate.

Here you can see the various client calls to the WebService functions listed above. Each function call returns the appropriate. The Car class used in the example can have it's properties referenced as well so that you don't have to worry about serialization.

And here is the output to the above, just as we expect it. So with a tiny bit of initial setup and configuration we end up with a very convenient, and more important quick way, of working with AJAX in our ASP.NET projects. I hope that helped anyone who's new to ASP.NET AJAX or who was just looking for a different way of incorporating AJAX into their work. For any questions, comments, or hello's feel free to send me a message.