如何使用 json 和 sql 将数据导入 EXTJS 网格面板

Question

我正在尝试在 extjs 中显示网格视图。该数据是从 sql db 收集的。我有一个查询要从 GridViewController() 中的 sql db 获取数据，但我不确定如何将这些数据保存在数组中，然后将其编码为 JSON 并将数据发回。

我的网格视图控制器

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 取回数据的地方。

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

任何形式的建议或意见都将受到高度赞赏......谢谢

更新家伙：

我收到此错误 序列化“System.Globalization.CultureInfo”类型的对象时检测到循环引用。

当我使用时

return Json(myData, JsonRequestBehavior.AllowGet);

但是当我使用时，我可以从我的数据库中获得结果

myData.GetXml();

这是另一个棘手的部分。 我只能使用像

这样的直接路径访问我的数据库结果

http://localhost:55099/GridView/writeRecord

但我的 gridView.js 仍然显示空白...有什么见解吗？

Answer 1

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

    public ActionResult ActionName()
    {

        DataSet ds = new DataSet();

        // populate ds

        return Json(ds, JsonRequestBehavior.AllowGet);

    }

这将确保您的 Json 以正确的格式输出。

编辑

你的函数应该是这样的：

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

    }