Help on this code which tries to: Make a jQuery Ajax call to a webservice that needs to return JSON

Question

Hello,

Actually I am trying to learn jQuery Ajax calls to asp.Net webservices.

I have been trying to call the webmethod below:

public class Person
    {
        public string FirstName { get; set; }
        public string Id { get; set; }
        public string LastName { get; set; }
        public string Department { get; set;}
        public DateTime Birthday { get; set; }
    }

public class PersonWebServices : System.Web.Services.WebService {


    [WebMethod]
    [ScriptMethod]
    public Person GetPerson(Person personToCompare)
    {
        return GetPerson(personToCompare.Id);
    }

    [WebMethod]
    public Person GetPerson(string Id)
    {
        if (string.IsNullOrEmpty(Id))
            return null;

        Id = Id.Trim();

        return PersonCollection.GetCachedPersonList().Find(personToCompare => personToCompare.Id == Id);
    }

}

And my JavaScript is this:

<script type="text/javascript">
    function loadPerson(txtPersonId){

        if(!txtPersonId.length || !(txtPersonId.val().length)){
            return;
            }
        var ajaxCallOptions = {
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "/JQuery/Chapter15-AJAX/PersonWebServices.asmx/GetPerson",
                  data: {FirstName:'',LastName:'', Id:txtPersonId.valueOf(),Birthday:'',Department:''},
                  dataType: "json",
                  success: function(msg){
                    alert('done');
                  },
                  error: function(msg){
                    alert('Error: '+msg.status);
                  }

                            }


        jQuery.ajax(ajaxCallOptions);



    };
    </script>

Which results with a JSON related response saying:

{"Message":"Invalid JSON primitive: FirstName.","StackTrace":" at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}

Do I need to serialize my object in some way before setting the 'data' attribute, so that I can call $.ajax() function?

thanks

Answer 1

Based on the error it seems to be an issue with the JSON data your sending in to the call. I'm not 100% sure, but the error would seem to suggest that it occurs when attempting to deserialize an int, so it is either that or the deserialization of the Datetime that are causing problems. The reason there is an issue is because if either is an empty string, or null/undefined, the deserializer is not going to be able to assign a value to it.

You could make the int and DateTime values nullable (int? and DateTime?) in your Person class, which would allow the deserializer to assign null to the values if they do not exist in the data recieved by the service call. The other option is to assign some valid default value (like 0, and 1/1/1800) on the javascript side prior to sendiing the JSON data with the Ajax call.

Answer 2

You will likely need to make your object into valid JSON, rather than a javascript object.

You can do this via a call to JSON.stringify(), like so:

data: JSON.stringify({FirstName:'',LastName:'', Id:txtPersonId.valueOf(),Birthday:'',Department:''}),

which will turn:

{FirstName:'',LastName:'', Id:txtPersonId.valueOf(),Birthday:'',Department:''}

into:

'{"FirstName":"","LastName":"","Id":"somevalue","Birthday":"","Department":""}'

Not all browsers support JSON, so you will need to include the JSON2 library.

http://www.json.org/json2.js