Using jQuery to Call ASP.NET AJAX Page Methods

I recently wanted to use jQuery to call an ASP.NET AJAX page method. While doing my research on Google I ran across this very helpful post by Dave Ward which shows you how to use jQuery almost exactly as I wanted.

I found as I was using Dave’s technique, though, that with just a little adjustment the function could be a little easier to use. Instead of building an array of key/values and passing them in as an argument I extended his function to use a param array – making it even easier to call an ASP.NET AJAX page method.

Example

Consider the following page method:

[WebMethod]
public static bool IsUniqueEmailAddress(string emailAddress)
{
    // do some processing here
    return true;
}

Normally in order to call this page method you would have to add an ASP.NET ScriptManager control to the page, but with using a jQuery function you can simply add a reference to jQuery to your page an use a method call much like this:

function emailBlur(ctl)
{
    CallPageMethod("IsUniqueEmailAddress", onSuccess, onFail, "emailAddress", ctl.value);
}

To get this all to work consider that the emailBlur function is wired up to the onblur client event handler of an input text box. Then when calling the CallPageMethod function you pass in the name of the page method as a string and references to the "success" and "failure" functions.

To pass in arguments to the page method you just need to pass in first the name of the parameter exactly as you have defined it in the code-behind as a string and then the value for this parameter, separated by a comma. If you have more arguments to send back to the server then you simply add a new argument name/value pair to the parameters of the function.

CallPageMethod Code

To get it all to work you need a reference to jQuery on your page and the following code:

function CallPageMethod(methodName, onSuccess, onFail) {
    var args = '';
    var l = arguments.length;
    if (l > 3) {
        for (var i = 3; i < l - 1; i += 2) {
            if (args.length != 0) args += ',';
            args += '"' + arguments[i] + '":"' + arguments[i + 1] + '"';
        }
    }
    var loc = window.location.href;
    loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "default.aspx" : loc;
    $.ajax({
        type: "POST",
        url: loc + "/" + methodName,
        data: "{" + args + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: onSuccess,
        fail: onFail
    });
}