[Solved] JsonStore and asp.net web service

**mohaaron** · 14 Jul 2009 2:36 PM

OK, I gave is a height and commented out autoHeight. Still the same thing, now I have a taller empty grid. Screen shot attached.

Updated with height.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JobsGrid.aspx.cs" Inherits="Tests_JobsGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../Common/JavaScript/ext-3.0.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="../Common/JavaScript/ext-3.0.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../Common/JavaScript/ext-3.0.0/ext-all-debug.js"></script>
    <script src="../Common/JavaScript/jobsGrid.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            
            Ext.ux.aspNetJsonReader = Ext.extend(Ext.data.JsonReader,{
                read : function(response){
                    console.log('aspNetJsonReader.read()');
                    var json = response.responseText;
                    var o = eval("("+json+")");
                    o = Ext.decode(o.d);
                    if(!o) {
                        throw {message: "JsonReader.read: Json object not found"};
                    }
                    return this.readRecords(o);
                }
            });

            var grid = new Ext.grid.GridPanel({
                id: 'grid',
                store: new Ext.data.JsonStore({
                    id: 'gridStore',
                    proxy: new Ext.data.HttpProxy({
                        url: '../WebServices/JobsWebService.asmx/GetJobs'
                        ,jsonData: {}
                        ,method: 'post'
                        , headers: { 'Content-Type': 'application/json; charset=utf-8;' }
                    }),
                    reader: new Ext.ux.aspNetJsonReader({
                        root: 'rows'
                        ,totalProperty: 'totalRows'
                        //,idProperty: 'JobId'
                        ,id: 'JobId'
                    }),
                    fields: [
                        { name: 'JobId' },
                        { name: 'BerthFromCode' },
                        { name: 'BerthToCode' },
                        { name: 'JobTypeName' },
                        { name: 'TugName' }
                    ],
                    listeners: {
                        exception: function(misc) {
                            console.log('exception');
                        }
                    }
                }),
                columns: [
                    { header: 'JobId', width: 90, sortable: true, dataIndex: 'JobId' },
                    { header: 'BerthFromCode', width: 90, sortable: true, dataIndex: 'BerthFromCode' },
                    { header: 'BerthToCode', width: 90, sortable: true, dataIndex: 'BerthToCode' },
                    { header: 'JobTypeName', width: 90, sortable: true, dataIndex: 'JobTypeName' },
                    { header: 'TugName', width: 90, sortable: true, dataIndex: 'TugName' }
                ],
                viewConfig: {
                    forceFit: true
                },
                renderTo: 'content',
                title: 'My First Grid',
                width: 600,
                height: 200,
                //autoHeight: true,
                frame: true,
                listeners: {
                    render: function(grid) {
                        console.log('grid.getStore().load()');
                        grid.getStore().load();
                        grid.getStore().on('load', function(store, records, options) {
                            console.log('grid.getStore().on(load, function()');
                            grid.getView().focusEl.focus();
                            grid.getSelectionModel().selectFirstRow();
                        });
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id="content" />

</body>
</html>

**mohaaron** · 14 Jul 2009 2:49 PM

I just commented out the the usage of aspNetJsonReader in the grid and now get an exception event. I now get the error "root is undefined". What's wrong with using d.rows?

Attached is a pic of the debug window in the exception event showing the responseText.

Code:

            var grid = new Ext.grid.GridPanel({
                id: 'grid',
                store: new Ext.data.JsonStore({
                    id: 'gridStore',
                    proxy: new Ext.data.HttpProxy({
                        url: '../WebServices/JobsWebService.asmx/GetJobs'
                        ,jsonData: {}
                        ,method: 'post'
                        , headers: { 'Content-Type': 'application/json; charset=utf-8;' }
                    }),
                    //reader: new Ext.ux.aspNetJsonReader({
                        root: 'd.rows'
                        ,totalProperty: 'd.totalRows'
                        //,idProperty: 'JobId'
                        ,id: 'JobId'
                    //})
                    ,fields: [
                        { name: 'JobId' },
                        { name: 'BerthFromCode' },
                        { name: 'BerthToCode' },
                        { name: 'JobTypeName' },
                        { name: 'TugName' }
                    ],
                    listeners: {
                        exception: function(misc) {
                            console.log('exception');
                        }
                    }
                }),

**Animal** · 14 Jul 2009 11:34 PM

So go back through the call stack and see who threw the exception and why. It's a VERY simple job.

**mohaaron** · 16 Jul 2009 12:48 PM

I've found where in ext-all-debug.js the exception is being thrown but I don't understand why.

Line: 33358
var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;

When "var root = this.getRoot(o)" executes it runs the this function which returns null.

function anonymous(obj) {
return obj.d.rows;
}

When "c = root.length" executes root is undefined and throws "'length' is null or not an object".

I can see what's happening but I don't know how to fix it.

**andycramb** · 16 Jul 2009 2:20 PM

@mohaaron

You are correct you do not need the aspNetJsonReader.
I did it to correct my original attempt at returning JSON from the web service where I was incorretly serializing an object twice resulting in JSON being returned like this.

Code:

"{"d:": "{myJson object}"}"

I don't know if you got to the last post in the first page. I attempted to explain that the aspNetJsonReader was no longer required and to use a JSON reader as follows:

Code:

, reader: new Ext.data.JsonReader({
                    root: 'd.Requests'
                   ,totalProperty: 'd.TotalJars'....

In your code below you no longer have any reader.
It is commented out
If you put it back in as follows and see what happens

Code:

      reader: new Ext.data.JsonReader({
                        root: 'd.rows'
                        ,totalProperty: 'd.totalRows'
                        ,id: 'JobId'
        })

If you look at the correct way to do it(grid at the bottom left of the page on the example site) you can see that I use the following code.
Note that Ext.ux.aspNetJsonReader is commented out and not used

Code:

    AF.myReqStore = new Ext.data.Store({
        id: 'searchReqResultsStore'
            , proxy: new Ext.data.HttpProxy({
                //                url: 'WebService1.asmx/getAFJsonString'
                url: url
                , jsonData: {}//for FF
                , method: 'post'
                , headers: { 'Content-Type': 'application/json;charset=utf-8' }
            })
            //, reader: new Ext.ux.aspNetJsonReader({
               , reader: new Ext.data.JsonReader({
                   root: 'd.Requests'
                , totalProperty: 'd.TotalJars'
            }, [
                { name: 'RequestName', mapping: 'RequestName' }
                , { name: 'RequestType', mapping: 'RequestType' }
                , { name: 'Status', mapping: 'Status' }
                , { name: 'WFID', mapping: 'WFID', type: 'float' }
                , { name: 'WorkFlows', mapping: 'WorkFlows', type: 'float' }
        //,{name:'lastname',mapping:'lastname'} 
            ])
    })

This handles this JSON

Code:

{"d":{"ParentRequestID":1,"TotalJars":8,"Pending":1,"Opened":7,"Status":"All Tasks Complete","WFID":123456
,"Requests":[{"RequestType":"Mortgage"

**mohaaron** · 2 Aug 2009 1:26 PM

andycramb,

Here is my attempt at making this work the way you have. When I run the code (below) I get a "Record is undefined" error at line 33354 of ext-all-debug.js. Can you tell me why this is happening?

html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../Common/Scripts/ext-3.0.0/resources/css/ext-all.css" />
    <!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> -->
    <script type="text/javascript" src="../Common/Scripts/ext-3.0.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../Common/Scripts/ext-3.0.0/ext-all-debug.js"></script>
    <script src="../Common/Scripts/jobsGrid.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            
            var grid = new Ext.grid.GridPanel({
                id: 'grid',
                store: new Ext.data.JsonStore({
                    id: 'gridStore',
                    proxy: new Ext.data.HttpProxy({
                        url: '../WebServices/JobsWebService.asmx/GetJobs'
                        ,method: 'post'
                        ,jsonData: {}
                        ,headers: { 'Content-Type': 'application/json; charset=utf-8;' }
                    }),
                    reader: new Ext.data.JsonReader({
                        root: 'd.rows'
                        ,totalProperty: 'd.totalRows'
                        ,idProperty: 'JobId'
                    }, [
                        { name: 'JobId' },
                        { name: 'BerthFromCode' },
                        { name: 'BerthToCode' },
                        { name: 'JobTypeName' },
                        { name: 'TugName' }
                    ])
//                    ,listeners: {
//                        beforeload: function(gridStore, options) {
//                            console.log('beforeload: gridStore.count = ' + gridStore.getCount());
//                            //console.log(options);
//                        },
//                        load: function(gridStore, records, options) {
//                            console.log('load: ' + gridStore.getCount());
//                            //console.log(options);
//                        },
//                        exception: function(misc) {
//                            console.log('exception:');
//                            console.log(misc);
//                        }
//                    }
                }),
                columns: [
                    { header: 'JobId', width: 90, sortable: true, dataIndex: 'JobId' },
                    { header: 'BerthFromCode', width: 90, sortable: true, dataIndex: 'BerthFromCode' },
                    { header: 'BerthToCode', width: 90, sortable: true, dataIndex: 'BerthToCode' },
                    { header: 'JobTypeName', width: 90, sortable: true, dataIndex: 'JobTypeName' },
                    { header: 'TugName', width: 90, sortable: true, dataIndex: 'TugName' }
                ],
                viewConfig: {
                    forceFit: true
                },
                renderTo: 'content',
                title: 'My First Grid',
                width: 600,
                height: 200,
                frame: true,
                listeners: {
                    render: function(grid) {
                        console.log('grid.render');
                        grid.getStore().load();
                        grid.getStore().on('load', function(grid, records, options) {
                            console.log('grid.getStore().on(load, function()');
                            grid.getSelectionModel().selectFirstRow();
                            grid.getView().focusEl.focus();
                        });
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id="content" />

</body>
</html>

json

Code:

{"d":"{\"totalRows\":18,\"rows\":[{\"JobId\":703,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"ROD 8\",\"JobTypeName\":\"Docking\",\"TugName\":\"DELTA BILLIE\"},{\"JobId\":704,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"ROD 8\",\"JobTypeName\":\"Docking\",\"TugName\":\"DELTA LINDA\"},{\"JobId\":705,\"BerthFromCode\":\"ROD 8\",\"BerthToCode\":\"ROD 8\",\"JobTypeName\":\"Standby\",\"TugName\":\"DELTA LINDA\"},{\"JobId\":706,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"OAK 22\",\"JobTypeName\":\"Docking\",\"TugName\":\"AMNAV LIBERTY\"},{\"JobId\":707,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"SFO 35S\",\"JobTypeName\":\"Docking\",\"TugName\":\"GOLIAH\"},{\"JobId\":708,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"SFO 35S\",\"JobTypeName\":\"Docking\",\"TugName\":\"FOSS AMERICA\"},{\"JobId\":709,\"BerthFromCode\":\"OAK 30\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"STARLIGHT Z-4\"},{\"JobId\":710,\"BerthFromCode\":\"OAK 30\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"FOSS LYNN MARIE\"},{\"JobId\":693,\"BerthFromCode\":\"MRZ 3\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"DELTA BILLIE\"},{\"JobId\":694,\"BerthFromCode\":\"MRZ 8\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"DELTA BILLIE\"},{\"JobId\":695,\"BerthFromCode\":\"MRZ 8\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"GOLIAH\"},{\"JobId\":696,\"BerthFromCode\":\"MRZ 8\",\"BerthToCode\":\"SFO Z1\",\"JobTypeName\":\"Escort\",\"TugName\":\"GOLIAH\"},{\"JobId\":697,\"BerthFromCode\":\"OAK 30\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"DELTA LINDA\"},{\"JobId\":698,\"BerthFromCode\":\"OAK 30\",\"BerthToCode\":\"STREAM\",\"JobTypeName\":\"Undocking\",\"TugName\":\"AMNAV\"},{\"JobId\":699,\"BerthFromCode\":\"SFO Z1\",\"BerthToCode\":\"MRZ 5\",\"JobTypeName\":\"Escort\",\"TugName\":\"DELTA LINDA\"},{\"JobId\":700,\"BerthFromCode\":\"SFO Z6\",\"BerthToCode\":\"MRZ 5\",\"JobTypeName\":\"Escort\",\"TugName\":\"DELTA BILLIE\"},{\"JobId\":701,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"MRZ 5\",\"JobTypeName\":\"Docking\",\"TugName\":\"DELTA BILLIE\"},{\"JobId\":702,\"BerthFromCode\":\"STREAM\",\"BerthToCode\":\"MRZ 5\",\"JobTypeName\":\"Docking\",\"TugName\":\"DELTA LINDA\"}]}"}

**andycramb** · 2 Aug 2009 2:30 PM

Do you have firebug up and running, preferably the version with the JSON tab in the XHR response.
Do you see that your d property is set to a string and not an object.

It should be like this:

Code:

{"d":{"rows":[{"id":"1"},{},{}]}}

You have this:

Code:

{"d":"{\"totalRows\":18,\"rows\":[{\"JobId\":703,\"....

I think this is where the problem lies

**mohaaron** · 2 Aug 2009 4:29 PM

How do I fix this. I'm return the json as a string from the web service and the web service is adding the d and the double quotes. How can I fix this?

**andycramb** · 3 Aug 2009 1:19 AM

Lets have a look at your .NET code that returns the JSON

**mohaaron** · 4 Aug 2009 10:11 AM

Here are two different methods that I have tried that both give the same "Record is undefined" error.

Code:

[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public string GetJobs()
{
    EntityCollection<JobEntity> jobs = ServiceManager.GetJobManager().GetJobs("2009, 6, 12", "2009, 6, 13");
    int count = jobs.Count;
    string json = jobs.ToJSon(
        JobFields.JobId,
        JobFields.BerthFromCode,
        JobFields.BerthToCode,
        JobFields.JobTypeName,
        JobFields.TugName,
        JobOrderFields.ShipName
        );

    string jresult = "{" + (char)(34) + "totalRows" + (char)(34) + ":" + count + "," + (char)(34) + "rows" + (char)(34) + ":" + json + "}";

    return jresult;
}

[WebMethod]
public string GetShips()
{
    System.Text.StringBuilder json = new System.Text.StringBuilder();
    EntityCollection<ShipEntity> ships = ServiceManager.GetMiscDataManager().GetShips();

    json.Append("{rows:[");
    foreach (ShipEntity ship in ships)
    {
        json.Append("{ShipId:" + ship.ShipId + ", ShipName:\"" + ship.ShipName + "\"}");
    }
    json.Append("]}");
    
    return json.ToString();
}

[Solved] JsonStore and asp.net web service

Thread Tools

Search Thread

Display