Question

I am trying to display a gridview in extjs. That data is collected from sql db. I have a query to get the data from sql db in my GridViewController() but I am not sure on how to save those data in an array and then encode it as JSON and send the data back.

my gridviewcontroller

public string writeRecord()
    {

        Response.Write("Survey Completed!");
        SqlConnection conn = DBTools.GetDBConnection("ApplicationServices2");


        string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM myTable";
        SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);

        DataSet myData = new DataSet();
        cmd.Fill(myData, "myTable");

        JavaScriptSerializer jss = new JavaScriptSerializer();
        string json = jss.Serialize(myData);

        conn.Open();
        conn.Close();
        return "{rows: '+ json +'}";

    } 

and this is my gridviewApp.js. This is where I create the gridview and try to get the data back from my gridviewController.

var store = Ext.create('Ext.data.JsonStore', {


        storeId: 'myData',
        reader: new Ext.data.JsonReader({
            fields:[
            { name: 'Q1', type: 'int' },
            { name: 'Q2', type: 'int' },
            { name: 'Q3', type: 'int' },
            { name: 'Q4', type: 'int' },
            { name: 'Q5', type: 'int' },
            { name: 'Improvements', type: 'string' },
            { name: 'Comments', type: 'string'}]
            }),

            proxy: {
            type: 'json',
            url: 'GridView/writeRecord'
            }

    });  
    this.grid = Ext.create('Ext.grid.Panel', {
        title: 'GridView App',
        url: 'GridView/writeRecord',
        //store: store,
        store: Ext.data.StoreManager.lookup('myData'),
        columns: [
        {header: 'Q1', width: 100,
        sortable: true, dataIndex: 'Q1'},
        { header: 'Q2', width: 100,
            sortable: true, dataIndex: 'Q2'
        },
        { header: 'Q3', width: 100,
            sortable: true, dataIndex: 'Q3'
        },
        { header: 'Q4', width: 100,
            sortable: true, dataIndex: 'Q4'
        },
        { header: 'Improvements', width: 200,
            sortable: true, dataIndex: 'Improvements'
        },
        { header: 'Comments', width: 200,
            sortable: true, dataIndex: 'Comments'
        }
    ],
        stripeRows: true,
        //height:250,
        width: 800,
        renderTo: Ext.getBody()
    });

Any kind of suggestion or input will be highly appreciated… thanks

Update guys:

I get this error
A circular reference was detected while serializing an object of type ‘System.Globalization.CultureInfo’.

when I use

return Json(myData, JsonRequestBehavior.AllowGet);

But I am able to get result from my db when I use

myData.GetXml();

And here’s another tricky part.
I can only access my db result using direct path like

http://localhost:55099/GridView/writeRecord

but my gridView.js still shows blank… any insights?

Answer 1

I’d use MVC’s built in Json functionality like this:

    public ActionResult ActionName()
    {

        DataSet ds = new DataSet();

        // populate ds

        return Json(ds, JsonRequestBehavior.AllowGet);

    }

This will ensure your Json comes out in the right format.

EDIT

Your function would look like this:

    public ActionResult writeRecord()
    {

        Response.Write("Survey Completed!");
        SqlConnection conn = DBTools.GetDBConnection("ApplicationServices2");


        string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM myTable";
        SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);

        DataSet myData = new DataSet();
        cmd.Fill(myData, "myTable");


        conn.Open();
        conn.Close();

        return Json(myData, JsonRequestBehaviour.AllowGet);

    }