asmx web service, json, javascript/jquery?

Question

Hi, I am using asmx to retrieve some data from DB,

public class TestPage1
{
    public int UserID { get; set; }
    public string UserName { get; set; }
    public string Password { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string MiddleName { get; set; }
}




    [WebMethod]
    public EntityLayer.TestPage1 GetData(int id)
    {
        TestPage1 test = TestPage1.GetData(id).SingleOrDefault();
        return test;
    }


$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "WebService.asmx/GetData",
  data: "{id}",
  dataType: "json"
});

How Do I desrialize test object in javascript?? and is there a better way? thanks

Answer 1

A couple things...

• Your web-service must be marked with a ScriptServiceAttribute to allow it to return JSON (http://msdn.microsoft.com/en-us/library/system.web.script.services.scriptserviceattribute.aspx)
• Your $.ajax method must have a "success" handler (http://api.jquery.com/jQuery.ajax/)
• The returned JavaScript object will have the same property names as the C# object
• A good way to see the JSON serialized object in transit is to use Fiddler (http://www.fiddler2.com/fiddler2/)

Some untested sample code:

$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "WebService.asmx/GetData",
  data: "{id}",
  dataType: "json"
  success: function(data) {
    var str = '' +
      'UserName: ' + data.UserName + '\n' +
      'Password: ' + data.Password + '\n' +
      'FirstName: ' + data.FirstName + '\n' +
      'LastName: ' + data.LastName + '\n' +
      'MiddleName: ' + data.MiddleName;
    alert(str);
  }
});

Answer 2

very good articles helped me with this:

http://www.mikesdotnetting.com/Article/96/Handling-JSON-Arrays-returned-from-ASP.NET-Web-Services-with-jQuery

http://www.andrewrowland.com/article/display/consume-dot-net-web-service-with-jquery

Answer 3

I recommend you look my previous answer for the close questions http://stackoverflow.com/questions/2737525/how-do-i-build-a-json-object-to-send-to-an-ajax-webservice/2738086#2738086 and http://stackoverflow.com/questions/2670147/can-i-return-json-from-an-asmx-web-service-if-the-contenttype-is-not-json/2671583#2671583

The correct code should looks like following

[WebMethod]
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
public EntityLayer.TestPage1 GetData(int id)
{
    TestPage1 test = TestPage1.GetData(id).SingleOrDefault();
    return test;
}

and

var myData = 5;
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "WebService.asmx/GetData",
    data: {id:JSON.stringify(myData)},
    dataType: "json",
    success: function(response){
        alert("UserName=" + response.d.UserName +
              ", FirstName=" + response.d.FirstName +
              ", MiddleName=" + response.d.MiddleName+
              ", LastName=" + response.d.LastName);
    }
})

where JSON.stringify is a function from the script json2.js which you can download from http://www.json.org/js.html.

If the id values are integer JSON.stringify(myData) are the same as myData, but for all more complex examples I strictly recommend you to use this function.

How you can also see from the code the all results of the web method will be saved in the property d, so you should use for example response.d.FirstName syntax to access the first name.