Returning JSON from ASMX, and handling it correctly in Javascript

Question

I realize there are tonnes of similar questions already up here but I cannot figure this one out.

I have a Web Service (C#, .net 3.5). The essential Code you need

Answer 1

It seems to me that your main problem that you try to manually use JavaScriptSerializer().Serialize instead of returning an object. The response from the web service will be double JSON encoded.

You are right! There are a lot of a close questions. Look at here Can I return JSON from an .asmx Web Service if the ContentType is not JSON? and Can't get jQuery Ajax to parse JSON webservice result and you will (I hope) find the answer.

UPDATED: Sorry, but you have a small error somewhere what you didn't posted. To close the problem I created a small project with an old version of Visual Studio (VS2008) which has practically exactly your code and which work. I placed it on http://www.ok-soft-gmbh.com/jQuery/WSMember.zip. You can download it, compile and verify that it works. Then you can compare your code with my and find your error.

Best regards

Answer 2

If you are doing a post to your data, why are you defining UseHttpGet = true? Shouldn't that be false to match the response type from your request? Also, putting a breakpoint in the ws call to see exactly what the serializer returns would help too... I don't think it should return a JSON object if the return value is a string.

HTH.

Answer 3

If you are returning any complex object (relational objects with foreign keys), you have 2 options:

1. Use a DTO object
2. Write your own specific serialization converter

Answer 4

i have bad english, but this is a solution

----- WSMember.asmx ------

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WSMember : System.Web.Services.WebService {

     public WSMember () {   
     }

     [WebMethod]
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
     public string GetMember(int IdMember)
     {
         Member m = new Member();//Get Member from DB, exam Linq to Sql
         m.Surname = "Smith";
         m.FirstName = "John";
         return string.Format("{{ \"Surname\":\"{0}\",\"FirstName\":\"{1}\" }}",m.Surname,m.FirstName);
     }
}

---- Default.aspx ----

<a href="#" id="button1">Just a test</a>
<script type="text/javascript">
    $("#button1").click(function (event) {
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "WSMember.asmx/GetMember",
            data: "{IdMember: 2 }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.hasOwnProperty('d')) {
                    msg = msg.d;
                }
                var json = JSON.parse(msg);
                console.log(json.Surname);
                console.log(json.FirstName);
            },
            error: function (xhr, status, error) {
                //console.log(xhr);
                //console.log(status);
                //console.log(error);
            }
        });
    });
</script>

Answer 5

Yes, definitely do not manually serialize the object. If you return a Member type, the framework will handle the JSON serialization for you.

When you're seeing the [object XMLHttpRequest] alert, that sounds like it's getting into the error handler in your $.ajax() call, where the response passes in its XHR object as the first parameter. You're probably getting a 500 error on the server.

Here's an example of decoding the ASP.NET AJAX error response in jQuery. Most simply, change your error handler to this:

error: function(xhr, status, error) {
  var err = eval("(" + xhr.responseText + ")");

  alert(err.Message);
}

That will give you some insight into what the specific error is.