jquery ajax with asp.net not working

Question

I'm about to pull out any remaining hair that I have, so please help me out if you know what the problem might be... Thanks. All my googling and searching has not paid off either.

First, I'm using jquery-1.7.2.min.js and ASP.net 2.0 web form.

I'm trying to make an ajax call using jquery but keep getting syntax error/parse error messages. I've tried many different ways but they all result in the error when I set the dataType to json.

Here's what I have:

$.ajax({
    type: "POST",
    url: "UserList.aspx/GetTestJson",
    data: {}, //have also tried "{}" and other options such as removing the line
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function(data, textStatus, jqXHR){
        alert('success');
    },
    //Using below instead of above makes no difference either
    //success: function(data){
    //  alert('success');
    //},
    error: function(jqXHR, textStatus, errorThrown){
        alert('errorThrown: ' + errorThrown);
    }
});

and the aspx page method:

[WebMethod]
public static string GetTestJson()
{
    return "Hello My World";
}

I've tried setting up a web service too, but get the same result. It appears that the response coming back is either the full html for the page or xml from the web service and because I set the dataType to json it is not successful in parsing it. If this is the case, how do I set the response to only return json?

Here is something else I've tried without luck:

[WebMethod]
public static string GetTestJson()
{
    HttpContext.Current.Response.ContentType = "application/json";
    string json = JavaScriptConvert.SerializeObject("Hello My World");
    return json;
}

Error messages I get through jQuery:

errorThrown.message = "Syntax error"
errorThrown.number = -2146827286
errorThrown.name = "SyntaxError"
textStatus = "parseerror"
jqXHR.status = 200
jqXHR.statusText = "OK"
jqXHR.readyState = 4
jqXHR.responseText = (the complete html of the page)

Any ideas or suggestions?

Thanks

Answer 1

Thank you @DaveWard and @CodeRoller for your help which led to this solution:

1. Install ASP.NET Ajax Extensions (HERE)
2. Add reference to System.Web.Extensions.dll
3. Modify web.config to include the ScriptModule httpModule (see below)

My jQuery ajax call and the WebMethod are still the same as my original post.

My web.config has been modified as below:

  <system.web>
    <compilation debug="true">
      <assemblies>
        <!-- A bunch of other assemblies here-->
        <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>
    <httpModules>
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </httpModules>
  </system.web>

I hope someone else will find this useful.

Answer 2

You should call a function inside PageLoad Function

If(!Page.IsPostback){
   ...
}