Calling ASP.NET server side method via JQuery

Question

Hi,

I'm trying to call a server side method from client side via jQuery, my code is as follows:

Server side:

    using System.Web.Services;
    [WebMethod()]
    //[ScriptMethod()]
    public static void SendMessage(string subject, string message, string messageId, string pupilId)
    {
        //send message
    }

Client side:

$("#btnSendMessage").live("click", function(){
  var subject = $("#tbSubject").val();
  var message = $("#tbMessage").val();
  var messageId = $("#hdnMessageId").val();
  var pupilId = $("#hdnPupilId").val();

  $.ajax({
      type: "POST",
      url: "./MessagePopup.aspx/SendMessage",
      data: ("subject=" + subject + "&message=" + message + "&messageId=" + messageId + "&pupilId=" + pupilId),
      error: function(XMLHttpRequest, textStatus, errorThrown){
          alert(textStatus);
      },
      success: function(result){
         alert("success");
      }
   });
   return false;
});

I've added a break point in the server side SendMessage method but it's never hitting it, but when I run the code the jQuery success method is called. Any ideas what would be causing this?`

Answer 1

You should use web service instead of regular aspx web page. Web pages has no support to call web methods, I believe your jQuery request loads the HTML page instead. I suggest you two things:

1. Use Fiddler2 (with IE) or HttpFox (with Firefox) to debug AJAX requests and responses on client side.
2. Use WCF web service on the server side. in this case you can use SvcConfigEditor and SvcTraceViewer to configure and debug web methods on the server side.

Answer 2

It looks like you're trying to make use of a page method.

Take a look here Page Methods in ASP.NET Ajax for help

Answer 3

To call ASP.NET AJAX "ScriptServices" and page methods, you need to use the full $.ajax() syntax:

$.ajax({
  type: "POST",
  url: "MessagePopup.asmx/SendMessage",
  data: "{subject:'" + subject + "',message:'" + message + ",messageId:'" + messageId + "',pupilId:'" + pupilId +"'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

See this post for details on why that's necessary: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/