c# - Frustrated with Json Response

Question

So here is my problem. I'm using Jquery's $.ajax to pass back a series of values to a web method. The web method takes the values, creates an object and then sends it back as json to the calling page. Once I get the response back I am unable to access the response and display it's values.

Can anyone explain what I need to do to make this work?

The jquery script:

$(document).ready(function() {
    $("#create").click(function() {
        var name = $('#name').val();
        var company = $('#company').val();
        var location = $('#location').val();
        var phonenumber = $('#phonenumber').val();
        var country = $('#country').val();

        $.ajax({
            type: "POST",
            url: "WebService.asmx/MakeEmployee",
            data: "{name:'" + name +
                          "',company:'" + company +
                          "',location:'" + location +
                          "',phonenumber:'" + phonenumber +
                          "',country:'" + country +
                          "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                AjaxSucceeded(msg.d);
            }
        });
    });

    function AjaxSucceeded(data) {
        //var item = jQuery.parseJSON(data) // this doesn't work for me.
        $("#response").html(
            "<ul><li> " + data.Name +
            "</li><li> " + data.Company +
            "</li><li> " + data.Address +
            "</li><li> " + data.Phone +
            "</li><li> " + data.Country +
            "</ul> "
            );
        };
  });

The web method:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string MakeEmployee(string name, string company, 
              string location, string phoneNumber, string country)
{
    Employee e = new Employee(name, company, location, phoneNumber, country);
    return new JavaScriptSerializer().Serialize(e);
}

And the response that I'm getting back:

{"d":""Name":"bob",
          "Company":"google",
          "Address":"home",
          "Phone":"123",
          "Country":"usa"}"}

This is what I think I should be getting back:

{"Name":"bob",
     "Company":"google",
      "Address":"home",
      "Phone":"123",
      "Country":"usa"}

The error I get once the pages renders again is this:

?undefined
?undefined
?undefined
?undefined
?undefined

Answer 1

Your response will already be parsed as JSON, so it's already an object...no need to parse it again just use it directly, like this:

function AjaxSucceeded(data) {
    $("#response").html(
        "<ul><li> " + data.Name +
        "</li><li> " + data.Company +
        "</li><li> " + data.Address +
        "</li><li> " + data.Phone +
        "</li><li> " + data.Country +
        "</ul> "
    );
}

The { d: ... } wrapper is added by ASP.Net, that's normal behavior. After that your issue is the element not returned correctly, you need to return an object not a string from ASP.Net, preferably this:

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Employee MakeEmployee(string name, string company, 
  string location, string phoneNumber, string country) {
    return new Employee(name, company, location, phoneNumber, country);
}

...where Employee has the properties you want on the JavaScript side. Let ASP.Net handle the serialization here instead of doing it directly, you'll get a cleaner response overall.