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
});
}
Published Monday, September 29, 2008 6:22 AM by craigshoemaker

Comments

# re: Using jQuery to Call ASP.NET AJAX Page Methods

Thursday, October 2, 2008 1:09 PM by Dave Ward

If you start to get into more complex situations, using the json2.js library available on json.org is a good option.  You can pass your JavaScript object to its JSON.stringify function and it'll build a valid JSON string for you.

# re: Using jQuery to Call ASP.NET AJAX Page Methods

Tuesday, November 4, 2008 11:28 PM by satish

can u please show this with an example... i have grid viewrow i want to send all the row contents to the server side.. how can i do it.. that would be really great

# re: Using jQuery to Call ASP.NET AJAX Page Methods

Friday, November 7, 2008 11:12 AM by craigshoemaker

Satish:

I just created a new post with an example to answer your question...

Using jQuery to Call ASP.NET AJAX Page Methods – By Example

weblogs.asp.net/.../using-jquery-to-call-asp-net-ajax-page-methods-by-example.aspx

hope this helps...

Craig

# re: Using jQuery to Call ASP.NET AJAX Page Methods

Wednesday, July 22, 2009 10:05 AM by Alberto

Good example, but can you tell me if it works also with ASP.NET 1.1? I tryied with no success. My JS function is called but after the ajax post I receive no feedback :(

# re: Using jQuery to Call ASP.NET AJAX Page Methods

Wednesday, April 21, 2010 7:38 AM by BHARAT

want such method in JQuery by which i can call server side user defined function and passing its parameter value from jQuery