如何使用JSON和SQL数据放入一个ExtJS网格面板 [英] How to get data into an EXTJS Grid Panel using json and sql

问题描述

我想显示ExtJS的一个gridview。这些数据是从SQL数据库收集。我有一个查询来获取我的GridViewController（从SQL数据库中的数据），但我不知道如何将这些数据保存在一个数组，然后连接code将其作为JSON和数据发回。

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.

我gridviewcontroller

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 +'}";

    } 

这就是我的gridviewApp.js。这是我创建的GridView，并尝试获取数据从我gridviewController回来。

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()
    });

任何一种建议或投入将高度AP preciated ...谢谢

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

更新的家伙：的

Update guys:

我得到这个错误
而序列类型的对象System.Globalization.CultureInfo中检测到循环引用。

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

当我使用

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

但我gridView.js仍然显示为空白......任何见解？

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

推荐答案

我会使用MVC内置在这样的Json功能：

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);

    }

这将确保您的Json出来，在正确的格式。

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

修改

您的功能是这样的：

    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);

    } 

这篇关于如何使用JSON和SQL数据放入一个ExtJS网格面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！