This project is read-only.

Setting up a Web Service for AJAX

Settings up a web service in ASP.NET to handle AJAX requests is super easy. First, I highly suggest creating a folder (services works nicely) in your project to host all of the ASMX files. Right click the folder in Visual Studio and add a new Web Service. The ASMX file will be created along with a code behind in the App_Code folder. The code file will look similar to this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService] // - uncomment this line of code!!
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 

    public int AddValues(int a, int b) {
        return a + b;

Note the line that says "uncomment this line of code!!" This is imperative as IIS will reject AJAX requests otherwise. Also, all functions available to AJAX requests must have the [WebMethod] attribute above it. Now the magic begins!


WebServiceRequest is a specialized AjaxRequest that caters to handling Ajax requests to web services hosted in an ASP.NET environment. They have the ability to send any kind of request, but the properties are defaulted to make it easier for ASMX based services. 

First, NinJa assumes that you are hosting your services in the "/services" directory at the root of the site. If not, you can change the default by setting WebServiceRequest.ServicesDirectory (static object and field). Otherwise you can set it individually on each WebServiceRequest by modifying the Url field. NinJa uses these defaults so it can generate the url for the web service easily.

Now let's create a call to the function defined above, AddValues. For web service requests, you must name the parameters exactly as they appear in the code side of the service. Let's look at a call below:

var wsr = new WebServiceRequest("WebService", "AddValues");

Here we create a new WebServiceRequest. The name of the service is WebService (note the name of the class in the code behind at the top). And we provide the name of the function, AddValues. Next we need to provide the parameters to send. We use the Parameters field here, as show next:

var wsr = new WebServiceRequest("WebService", "AddValues");
wsr.Parameters["a"] = 0;
wsr.Parameters["b"] = 0;

So we've defined two parameters, a and b and set them both to 0. Now we just need to send off the request and hand the response:

var wsr = new WebServiceRequest("WebService", "AddValues");
wsr.Parameters["a"] = 0;
wsr.Parameters["b"] = 0;
    alert("Answer: " + e.ResponseObject);

Now that we've tied an event into the OnSuccess to handle the response. The response is handled similar to the AjaxRequest. The only difference is ASMX services will return JSON by default for AJAX enabled functions and thus, WebServiceRequest will deserialize the response as such. We can get the response object (AddValues returns a number) from ResponseObject, where as the raw JSON from ResponseText.

DateTime Deserialization

One thing to note, there is no standard way of deserializing DateTimes with JSON. .NET returns DateTimes as the format: /Date(<ticks>)/. As such, NinJa will deserialize data in this format into a proper DateTime for you.

Last edited Jun 13, 2012 at 7:24 PM by dahrkdaiz, version 2


No comments yet.