ASP.NET AJAX to Code behind function call Error

Question

I am using the following call to send data back to the server:

$.ajax({
  type: "POST",
  url: "MyTestPage.aspx/UpdateData",
  data: updates,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (msg) {
                 alert('Success!');
  },
  error: function (msg) {
                  alert('Failure!');
  }
});

The code behind looks like

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace TestNamespace
{
    public partial class MyTestPage: System.Web.UI.Page
    {
        [WebMethod]
        public static bool UpdateData(string IDs, string Values)
        {
            return true;
        }

    }
}

From Chrome the request pay load i.e. value of the UI updates variable is: { IDS : "21TOK31" , VALUES : "2TOK2"}

The request does not hit the code behind function and the ajax function always goes to the failure block because of the error.

The request hits the code behind function when no data is being passed and the code behind function has no parameters.

I am new to using JSON in ASP.NET. Can someone please guide me to what the problem might be? And how best it might be solved.

Answer 1

modify the error function to be like this:

error: function (xhr, err) { alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status + "\nresponseText: " + xhr.responseText); }

and you will see the exact error.

personally i just put breakpoints inside the function giving me problems and run it locally to debug,