by Stian

Call ASP.NET AJAX page methods using jQuery

If you are used to working with MVC.NET and jQuery you might not want to start playing with the ScriptManager when you go back to writing an ASP.NET Web application again. Calling WebMethods using the ScriptManager will automatically add 100kb of Javascript to your page and will add three extra http requests per call! Of course, it is very simple to use, but so is the jQuery way as well, so if you are used to calling your actions directly with .ajax(), there is no reason not to .

To call ASP.NET page methods directly from jQuery without the need of a ScriptManager in your page, use the following:

Your jQuery code

   1:  var params = '{"firstname":"' + $("#firstname").val() + 
   2:               '", "lastname":"' + $("#lastname").val() + '"}';
   3:  $.ajax({
   4:      type: "POST",
   5:       url: "Default.aspx/SavePerson",
   6:       data: params,
   7:        contentType: "application/json; charset=utf-8",
   8:        dataType: "json",
   9:        success: function (msg) {
  10:            alert(msg.d)                      
  11:        }
  12:  });

Your serverside code

   1:  [WebMethod]
   2:  public static string SavePerson(string firstname, string lastename)
   3:  {
   4:      //do saving or wheatever
   5:      return "Some message back to client";
   6:  }

 

If you’re already using the ScriptManager for other purposes, there’s no harm in using its JavaScript proxy to call your page methods. However, if you aren’t using a ScriptManager or have already included jQuery on your page, I think it makes sense to use the more efficient jQuery method.

Comments

5 Comments
thorhalvor Says:

The less use of ScriptManager the better. Amen! :)

Two more programatically details I like to do is to use the shorthand Ajax functions $.post and $.getJSON instead of $.ajax. And also use anonymous types instead of programatically building the json requst. Might not work in older .NET Frameworks though. dunno.

But my way, you example would look like:

var fname = $(“#firstname”).val();
var lname = $(“#lastname”).val();
$.post(‘Default.aspx/SavePerson’, { firstname: fname, lastname: lname },
function (msg) {
alert(msg);
});

Stian Says:

Yes, very good point! I ended up using $.post in my latest project, so my example should have reflected that – it is indeed much neater :) For those unsure about not specifying the dataType; have no fear – it will by default do an “Intelligent Guess”!

vinay Says:

This is really nice article

Hejun Chen Says:

Hi, I have done something similiar for my work project. The project pages worked very well during the debug or release mode in VS2010, but when I published the web app to IIS (windows 7), this json/web method does not work at all. Do u know why?

Stian Says:

Hejun: Have you checked the network traffic (httpFox or any other dev tools in browser) to see if the call is made to the server and that the URL called is correct? If it is, you can check the response of this call to get a pointer to where the problem is.