jQuery & .NET WebMethods: An Introduction

At some point in my programming I began to dislike the .NET page life-cycle. Sometimes I feel as though it was Microsoft's way of trying to impose a structure on something that really didn't need a structure. PHP and Java Servlets have proved this.

Regardless, with the advent of .NET AJAX WebMethods one can skip the life-cycle. For those of you who have been living in a cave for the last few years: 1) Your beard rocks. 2) AJAX (Asynchronous Javascript and XML) basically means that the web browser has a new role. In the old days, the browser would make a request and the server would send it an entirely new page for it to spit at the user. With AJAX, the browser sends a request and the server returns data, and then the browser performs actions on that data (like applying logic to the data and then updating page content). With AJAX the browser is in on the action; it is no longer just a middleman.

Setting Up Your First WebMethod

How do you add a WebMethod to your .NET page-behind code? Check out this code:

[WebMethod]
public static string SayHi()
{
       return "Hi";
}

If you were to add this code as well as import System.Web.Services, you could call this function from your client-side JavaScript. No page life-cycle, no post-back; just a request for some data and a response. Using jQuery, the JavaScript code for this would look something like:

//this is the same as jQuery's $(document).ready([function])
//which means that it will call this function as soon as the page is loaded
$(function() {
      $.ajax({
              type: "POST",
    //notice we put the page name and the function name here
    url: "default.aspx/SayHi",
    //the json data to send to the server (we'll discuss later)
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    //if the request is a success do something with the data
    success: function(msg) {
      //this alert box would say hi
      alert(msg.d);
      //this paragraph with id="hiparagraph" would say hi
      $('p#hiparagraph').html(msg.d);
      //this textbox with class="hitextbox" would say hi
      $('input.hitextbox').val(msg.d);
    },
    //if the request is a failure, blame the user
    error: function(xhr, textStatus, exception) {
      alert('You are a failure.');
    }
  });
});

I know what you're thinking-- wow this is boring. And it is at this point. However, if you were to ask .NET to do this the old fashioned way, with a label and some code-behind assign-age I bet it would take twice as long-- maybe longer. In my experience, I have seen request/response times get cut to 1/10th (even 1/20th) the original time by using jQuery and WebMethods. For real.

What is JSON and What Happened to the XML?

All I know is that I haven't used XML directly yet in an AJAX call. JSON is JavaScript Object Notation. Its simple to learn-- check out this page for a little background.

What can you send or receive in the JSON? Short answer: anything. In our example we sent nothing, and received a string. With AJAX calls you can send any sort of JavaScript object. As for what you can receive, feel free to use any of the .NET generic types and any of your own custom made classes-- .NET will translate them into JSON for you.

In Conclusion

Now that we have a better way of communicating with the server, what can we do with it? In the next post we will get into some advanced scenarios and techniques with jQuery and .NET WebMethods.