Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
380
Binding to WCF JSON result
posted

Hi, I'm trying to bind a jQuery grid (Version 2012.2) to a simple WebService that returns a deserialized array in JSON.

 

Unfortunately, it doesn't work

Here is my .aspx (simplified):

$(document).ready(function () {

$url = 'textWebService.svc/getInitialData?$format=json';

$(function () {

        $("#grid").igGrid({

                     columns: [

                                           { headerText: "id", key: "ID", dataType: "number" },

                                           { headerText: "sentence", key: "sentence", dataType: "string" },

                                           { headerText: "textDE", key: "textDE", dataType: "string" },

                                           { headerText: "textIT", key: "textIT", dataType: "string" },

                                           { headerText: "textEN", key: "textEN", dataType: "string" },

                     ],

                     localSchemaTransform: false,

                     autoGenerateColumns: false,

                     responseDataKey: 'd.results',

                     dataSource: $url

                 });
             });

         });

 

And here is my webservice:

 

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  

public class SentencesWebService

{

 

[OperationContract]

[WebGet(ResponseFormat = WebMessageFormat.Json)]      

public string getInitialData()

{

   List<Sentence> results = new List<Sentence>();

      results.Add(new Sentence(1,"test1", "bla", "bla", "bla"));

      results.Add(new Sentence(2,"test2", "bla", "bla", "bla"));

      results.Add(new Sentence(3,"test3", "bla", "bla", "bla"));

 

// Serialize the results as JSON

   DataContractJsonSerializer serializer = new DataContractJsonSerializer(results.GetType());

   MemoryStream memoryStream = new MemoryStream();

      serializer.WriteObject(memoryStream, results);

           

   string json = Encoding.Default.GetString(memoryStream.ToArray());

   return json;

   }

}

I get the following error (inside the _successCallback method of some builtin IG JavaScript code):

JavaScript runtime error: Unable to get property 'length' of undefined or null reference

If I remove the localSchemaTransform proprty, I get: "JavaScript runtime error: The remote request to fetch data has failed:  (parsererror) There was an error parsing the JSON data and applying the defined data schema: The input data doesn't match the schema, the following field couldn't be mapped: ID"


The web method returns the following string, which looks fine to me:

"[{\"ID\":1,\"order\":0,\"sentence\":\"tsn0\",\"textDE\":\"bla\",\"textEN\":\"bla\",\"textIT\":\"bla\"},{\"ID\":2,\"order\":0,\"sentence\":\"tsn1\",\"textDE\":\"bla\",\"textEN\":\"bla\",\"textIT\":\"bla\"},{\"ID\":3,\"order\":0,\"sentence\":\"tsn2\",\"textDE\":\"bla\",\"textEN\":\"bla\",\"textIT\":\"bla\"}]"

Parents
  • 11095
    Verified Answer
    Offline posted

    Hello, 

    Thank you for contacting Infragistics Developer Support!

    Your issue is related with the way you are returning JSON. Actually you are not returning a JSON, but a string. You have to return a JSON object as that 

    [{"ID":1,"order":0,"sentence":"test1","textDE":"bla","textEN":"bla","textIT":"bla"},
    {"ID":2,"order":0,"sentence":"test2","textDE":"bla","textEN":"bla","textIT":"bla"},
    {"ID":3,"order":0,"sentence":"test3","textDE":"bla","textEN":"bla","textIT":"bla"}]

    i.e. without the backslashes and the extra quotes. To do so in your service get method you have yo return a list of sentences. 

    public List<Sentence> GetInitialData() 
    { 
        List<Sentence> results = new List<Sentence>();
        results.Add(new Sentence(1, 0, "test1", "bla", "bla", "bla")); 
        results.Add(new Sentence(2, 0, "test2", "bla", "bla", "bla")); 
        results.Add(new Sentence(3, 0, "test3", "bla", "bla", "bla")); 
        return results; 
    }

    To be able to serialize your data automatically you can set DataContract attribute to your model class and DataMember to each property of the class you want to be exposed. If you do not specify Name value for the DataMember or the DataContract class, the name in the json object will be the same as the class or the property name.

    [DataContract]
    public class Sentence
    {
        [DataMember(Name="ID")]
        public int Id { get; set; }
    
        [DataMember(Name="order")]
        public int Order { get; set; }
    
        [DataMember(Name="sentence")]
        public string OriginalSentence { get; set; }
    
        [DataMember(Name = "textDE")]
        public string TextDE { get; set; }
    
        [DataMember(Name = "textEN")]
        public string TextEN { get; set; }
    
        [DataMember(Name = "textIT")]
        public string TextIT { get; set; }
    
        public Sentence(int id, int order, string sentence, string textDE, string textEN, string textIT)
        {
            this.Id = id;
            this.Order = order;
            this.OriginalSentence = sentence;
            this.TextDE = textDE;
            this.TextEN = textEN;
            this.TextIT = textIT;
        }
    }

    The responseDataKey setting is not required in this case because your JSON response is not wrapped. You can also take a look at the sample I have provided. If you have additional questions please do not hesitate to contact me.

    igGrid-Load-data-from-WCF-service-sample.zip
Reply Children
No Data