Retrieving JSON from ASMX Web Service

[idormainParticipant]

Hi All,

I am not having any luck despite following the code examples and documentation provided. I am not able to retrieve data back after successfully calling a Web Service (this Web Service is in debug mode and the breakpoints are not being hit so it’s not even getting from the JS), In my opinion, the support provided is not very good, but I’m going to persist as I really like this suite and don’t really want to buy another like Kendo UI, but I may be left with little choice.

So to summarise, I have an ASMX Web Service code below:

 [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public string GetFileData(string tableName, int recordId)
        {
            try
            {
                using (SMMDataModelContainer model = new SMMDataModelContainer())
                {
                    StringBuilder stringBuilder = new StringBuilder();
                    List<Solomani_MyMembers_Online.Data.File> files = model.Files.Where(f => f.TableName.Equals(tableName) && f.RecordId.Equals(recordId)).ToList();
                    return new JavaScriptSerializer().Serialize(files);
                    //var serializer = new XmlSerializer(typeof(List<Solomani_MyMembers_Online.Data.File>),
                    //                                   new XmlRootAttribute("Files"));
                    //using (var stream = new StringWriter())
                    //{
                    //    serializer.Serialize(stream, files);
                    //    stringBuilder.Append(stream.ToString());
                    //}
                    //StringWriter writer = new StringWriter(stringBuilder);
                    //return writer.ToString();
                }
            }
            catch (Exception ex)
            {
                SMMErrorHandling.LogException(ex);
                return null;
            }
        } 

Instead of returning XML I want to return JSON and instead of using NewtonSoft I am using the .NET JavaScript Libraries. The JS source Code is below:

function SetFileData(tableName, recordId) {
    try
    {
        if (recordId == '') {
            return false;
        }
        source = {
            type: "GET",
            datatype: "json",
            datafields: [
                    { name: 'FileId' },
                    { name: 'FileName' },
                    { name: 'EditLink' },
                    { name: 'DownloadLink' }
            ],
            data: "{'tableName':'" + tableName + "', 'recordId': '" + recordId + "'}",
            url: '../Services/SMMDataManagement.asmx/GetFileData',
            cache: false,
            root: 'data'           
        };
        var dataAdapter = new $.jqx.dataAdapter(source,
            {
                contentType: 'application/json; charset=utf-8',
                loadError: function (jqXHR, status, error) {
                },
            }
        );
        $("#fileDataTable").jqxDataTable({
            source: dataAdapter,
            theme: 'SMM_EnergyBlue',
            pageable: true,
            pagerButtonsCount: 10,
            sortable: true,
            width: '100%',
            height: '100%',
            columns: [
                { text: 'File ID', dataField: 'FileId', width: 100 },
                { text: 'File Name', dataField: 'FileName', width: 180 },
                { text: 'Open', dataField: 'EditLink', width: 250 },
                { text: 'Download', dataField: 'DownloadLink', width: 250 }
            ]
        });
    }
    catch (e) {
        ErrorHandler('Oh No! An Exception has occured and has been logged [SetFileData]. Please try again.');
    }
}

When I call the function I get no fail back from the Data Adapter but the Web Service is not accessed, when I get to the jqxDataTable I generally get the exception: Uncaught TypeError: Cannot read property ‘fileName’ of undefined.

Has anyone got any suggestions, any would be appreciated, thank you all.

[idormainParticipant]

Ok so I fixed the issue:

Removed the Decoration: UseHttpGet = true from the Web Method

Used JQuery AJAX Call to retrieve Data:

$.ajax({
            type: 'POST',
            url: '../Services/SMMDataManagement.asmx/GetFileData',
            data: "{requiredTableName: '" + tableName + "', recordId: '" + recordId + "'}",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            cache: false,
            timeout: 10000,
            success: function (response) {
                if (response.d != null) {
                    sourceData = response.d;
                }
            },
            error: function (xhr, status, error) {
                
            }
        });

Removed the single quotes from the parsed arguments:

data: “{requiredTableName: ‘” + tableName + “‘, recordId: ‘” + recordId + “‘}”,

Set the Source to the following:

   source = {
            localData: sourceData,
            dataType: "json",
            dataFields:
            [
                { name: 'FileId', type: 'number'},
                { name: 'FileName', type: 'string'},
                { name: 'EditLink', type: 'string'},
                { name: 'DownloadLink', type: 'string'}
            ]
        };

Set the Local Data Source to use the returned JSON Object from the AJAX Call.

Changed from GET to POST (as the decoration originally used prohibited the using of POST.

So it all works, and I’m happy to have been able to solve the issue myself; however, can I ask, is this the best solution?

Cheers,

Kind Regards,

Ivan

[HristoParticipant]

Hello Ivan,

Thank you for the interest to our widgets.
It looks fine.
Let me know if you need anything else.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts