asmx web service, json, javascript/jquery?

Question

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

Solution 1

I recommend you look my previous answer for the close questions How do I build a JSON object to send to an AJAX WebService? and Can I return JSON from an .asmx Web Service if the ContentType is not JSON?

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)},
    data: JSON.stringify({id: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.

UPDATED: In case of HTTP GET the data parameter should be {id:JSON.stringify(myData)}. In case of HTTP POST: JSON.stringify({id:myData})

Solution 2

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);
  }
});

Comments

[nikib3ro]

And anyone who wants to try this out - do not forget to mark your WebService class with [ScriptService] - just had problem with that.