Calling a PageMethod with jQuery

By: Brian Dobberteen

 

This was selected as an ASP.NET Article of the Day for September 29, 2009

This is a quick follow up to the previous post about calling ASP.NET PageMethods in which we used a ScriptManager object with EnablePageMethods set to True.

This time, we won’t even be including a ScriptManager in our page, and instead will use jQuery. Without further ado, here’s what the javascript looks like:

If you’re familiar with jQuery, then this should look pretty familiar. If not, you might be surprised how much this small snippet is accomplishing.

First, there was no need to add an onchange attribute to our asp:TextBox like we did in the previous post. The practice of keeping our HTML markup clear from javascript calls for event handlers and such is known as ‘unobtrusive javascript.’ Personally, I think it’s kinda silly, but will admit that the HTML does look cleaner without being cluttered with extraneous attributes and bits of javascript code.  The reason we don’t have to add the onchange attribute is because we are using jQuery to bind our text box to an onchange event handler:

First, jQuery waits until the DOM (the page’s logical structure) is loaded so that we can be sure to find our text box we want to bind to. In this case, the ID attribute of the text box is ZipCodeTextBox. Using jQuery’s super-easy element selecting capability, we pass the CSS selector #ZipCodeTextBox to the $() function ($() is shorthand for a call to jQuery). We then call bind() on the text box, passing ‘change’ as the event type and as a second parameter, the function we want to execute in response to the firing of the change event. The function takes a parameter, event in this example, but we won’t be using it here.

Once the onchange event fires for our text box, the block of code inside the function will execute. First, we are going to doing a simple inspection of the value of the text box using a little regular expression. To actually retrieve the value of the text box, we can use $(this), which essentially enhances our text box element, giving it access to all pertinent jQuery features. In this case, $(this).val() is all we need – val() returns the value contained within form elements.

Our regular expression

is used to test the value to make sure that it consists of 5 digits – \d{5} – followed by an optional hyphen and four more digits – (-\d{4})?. Obvious examples of valid zip codes would be 01721-8582 or 95060. If the value entered in the text box doesn’t fit this format, we won’t even bother making a call to our PageMethod.

Putting it all together, we end up with:

From here, we call $.ajax(), another jQuery function, which makes an AJAX request using the parameters we specify. ASP.NET requires our request to be POSTed to the server (GET won’t work) as well as have its content type set to ‘application/json.’ The url parameter in our AJAX call is simply the name of the page cotaining the PageMethod (Default.aspx in our sample) followed by a forward slash and the name of the WebMethod in our page’s code-behind file. Our method must be decorated with the WebMethod() attribute in order to respond correctly to the request:

The data that we POST to the page needs to be in JSON format, which boils down to a set of name-value pairs contained within curly braces. Since our PageMethod is expecting ‘zip’ as a parameter, we construct our JSON data to look like {‘zip’: ‘95064’}. We then set the data type of the request to ‘json’. The AJAX parameter list to this point:

Finally, we define the ‘success’ parameter to our AJAX call, setting its value to a function whose parameter is the result of our request.

We can do whatever manipulation of the data we need here, though some would argue that data processing should take place on the server-side. I guess it’s really dependent on the task at hand. At any rate, we are going to do a bit of DOM manipulation here, involving the simple assignment of a pre-defined asp:Label element’s text value to the City and State returned to us from the PageMethod. Again, $() takes a CSS selector as a parameter, returning to us the element we want to modify. And we just want to change the text of the label, so we use the text() function, passing to it the value we’d like set.

Initially, I expected that using msg.City and msg.State would work in the same manner as it did in our Microsoft AJAX callll to the page method. Was rather confusing until I was able to inspect the JSON returned from the PageMethod by using FireBug for Firefox (which if you don’t already have, you need to get right away http://getfirebug.com/). Seems ASP.NET wraps the entire JSON response and assigns it to a key simply named ‘d’. Our JSON response object:

As our JSON object is the parameter msg passed to the success function, to get the City and State values we must include the d in our expression – msg.City will not work, msg.d.City will.

So that’s about it! We managed to call our PageMethod with jQuery rather than the Microsoft AJAX library. I had been thinking that this might even be a suitable application for being moved entirely to the client-side. But then I thought that including an Yahoo Maps Application ID for anyone to view might not be the greatest idea. I think next time I will try and make a simple PHP “web service” to respond to our jQuery AJAX request, taking ASP.NET entirely out of the picture.

UPDATE: Per some requests, I’ve authored a simple demonstration, the source code of which can be found at: Source Code for Calling a PageMethod with jQuery



23 Responses to “Calling a PageMethod with jQuery”

  • feysal Says:

    It would be cool if you guys provided a source code to this article just like other lads do. Honestly some of these things are explained on the surface and until on sees them in action, then we can believe that they are going to save us some menace…..so please work on that…thanx

  • Byron Says:

    This is nice.. thanks for this.

    Is there a way on how to call a method/function in class file?

  • Calling a PageMethod with jQuery « Brian Dobberteen | My Web Development Bookmarks Says:

    […] See the article here: Calling a PageMethod with jQuery « Brian Dobberteen […]

  • Lee Says:

    For HTTP inspection, Fiddler is far richer than firebug, and it works in the world’s most popular Web browser (IE) as well as other browsers.

    http://www.fiddler2.com/

  • crisco Says:

    Your last sentence is the best… I was working with ASP, .Net 1.1, .Net2.0 for 5years and my question is: do I need for web application .Net or Php is better?

  • Dogtown Says:

    Basically, there is no reason to use ASP.Net AJAX. AJAX client interactions can be handled via JQuery without the weight and self-imposed restrictions imposed on ASP.Net AJAX (i.e. calling WS from other domains).

  • brian Says:

    Dogtown :

    Basically, there is no reason to use ASP.Net AJAX. AJAX client interactions can be handled via JQuery without the weight and self-imposed restrictions imposed on ASP.Net AJAX (i.e. calling WS from other domains).

    http://brian.dobberteen.com/code/responding-to-jquery-ajax-request-with-php/

  • Thanigainathan Says:

    Hi There,

    Very nice feature. There are many ways to call server methods. You cna use Page Methods,Webservice,Ado.net data service(Rest protocol),WCF services.

    So why do you want PHP then when you get all you want in ASP.Net.
    Thanks,
    Thani

  • brian Says:

    Well, I don’t really want PHP, I wrote that article to experiment with a language that I am less familiar with. ASP.NET is still my first choice for web development.

  • Shial Says:

    It would be better if you have give source code also

  • brian Says:

    Please see the link at the bottom of the post, which I will repeat here: Calling a PageMethod from jQuery Demonstration Source

  • brian Says:

    Lee :

    For HTTP inspection, Fiddler is far richer than firebug, and it works in the world’s most popular Web browser (IE) as well as other browsers.

    http://www.fiddler2.com/

    Agreed 100% – I use Fiddler quite frequently in my day-to-day work. I chose Firebug here to keep things simple, which I know some people will find objectionable. By all means, those of you unfamiliar with Fiddler, it is more than worth your time to acquire and master it.

  • thanks Says:

    Great work Brian. Simple, coherent & very useful. Complete W/ all the relevant source code & explanation.

  • Lee Says:

    Type your comment here

    Byron :

    This is nice.. thanks for this.
    Is there a way on how to call a method/function in class file?

    Looks like you failed to even read the article.

  • HeartsHacker Says:

    Lee :

    For HTTP inspection, Fiddler is far richer than firebug, and it works in the world’s most popular Web browser (IE) as well as other browsers.
    http://www.fiddler2.com/

    fiddler2 is good. But with firebug u can inspect css. It is very helpful.

  • Lee Says:

    HeartsHacker :

    Lee :
    For HTTP inspection, Fiddler is far richer than firebug, and it works in the world’s most popular Web browser (IE) as well as other browsers.http://www.fiddler2.com/

    fiddler2 is good. But with firebug u can inspect css. It is very helpful.

    With Fiddler, you can inspect *anything* that comes through an HTTP request or response, which certainly includes CSS.

  • ali raza zaidi Says:

    i m new to jquery and ajax, kindly send me complete example where ado.net dataset/datatable send using webservices and bind with jquery at client side
    regards
    Ali raza

  • brian Says:

    Hi Ali,

    I appreciate the suggestion and will definitely consider it for my next post. Thanks!!

    – brian

  • Michael Says:

    Great article. Thank you very much. I’ve been looking for ways to replace the UpdatePanel in ASP.net and this is just what I needed. Saw some other examples w/o jQuery and it definently required many more lines of JavaScript.

  • Viju Says:

    Hi,
    I was trying to implement the same for my project. But its not working.Below is the piece of code I have used .
    function CallService() {

    $(“#LinkButton1″).html(”);
    // var s = 9;
    $.ajax({
    type: “POST”,
    url: “GetComments.asmx/ShowComments”,
    data: “{‘cid’:’9′}”,
    contentType: “application/json; charset=utf-8”,
    dataType: “json”,
    success: OnSuccess,
    error: OnError
    });

    function OnSuccess(data, status) {

    // $(‘#divSimplePopup’).showModal(); return true;
    // $(“.body”).html(data.d);

    }

    function OnError(data, status) {

    $(‘#divSimplePopup’).showModal(); return true;

    }

    }

    It is not giving any error. But always OnError block executes.Can u please suggest me something..I can provide you the full code if you can give me your email id.

    thanks
    Pep

  • brian Says:

    Viju :

    Hi,
    I was trying to implement the same for my project. But its not working.Below is the piece of code I have used .
    function CallService() {

    $(“#LinkButton1″).html(”);
    // var s = 9;
    $.ajax({
    type: “POST”,
    url: “GetComments.asmx/ShowComments”,
    data: “{‘cid’:’9′}”,
    contentType: “application/json; charset=utf-8″,
    dataType: “json”,
    success: OnSuccess,
    error: OnError
    });

    function OnSuccess(data, status) {

    // $(‘#divSimplePopup’).showModal(); return true;
    // $(“.body”).html(data.d);

    }

    function OnError(data, status) {

    $(‘#divSimplePopup’).showModal(); return true;

    }

    }

    It is not giving any error. But always OnError block executes.Can u please suggest me something..I can provide you the full code if you can give me your email id.

    thanks
    Pep

    Have you tried examining the traffic with something like Fiddler or Firebug? That would be my first course of action.

  • Ross Says:

    Thank you for providing an article that POSTs parameters to the page method, rather than being parameterless!

Leave a Reply