从控制器MVC3绑定jqGrid [英] Bind jqGrid from controller MVC3

问题描述

我在MVC3应用程序中使用jqgrid绑定Razor视图(.cshtml)中的数据.值从controller作为JSON发送.但是它没有约束力.

I'm using jqgrid in my MVC3 application to bind the data in Razor view(.cshtml). The values are sent from the controller as JSON. But its not binding.

//控制器:

public JsonResult LoadData()
        {
            Connect objMC = new Connect();//Helper Class
            var collectionEmployee = objMC.LoadAllData();//Gets Employee Collection

            var jsonSerializer = new JavaScriptSerializer();
            return Json(jsonSerializer.Serialize(collectionEmployee.AsQueryable<Product>().ToList<Product>()));
        }

//jqGrid:

jQuery("#jQGridDemo").jqGrid({
        url: '@(Url.Action("LoadData", "Home"))',
        datatype: "json",
        mtype: 'GET',
        colNames: ['ProductId', 'Name', 'AdminContent', 'ProductTemplate', 'CreatedOnUtc'],
        colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left', sorttype: 'int' },
                        { name: 'Name', index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'AdminContent', index: 'AdminContent', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'ProductTemplate', index: 'ProductTemplate', width: 200, editable: true, edittype: "select", editoptions: { value: "1:VariantsInGrid;2:SingleProductVariant;3:MultipleProducts" }, align: 'left' },
                        { name: 'CreatedOnUtc', index: 'CreatedOnUtc', width: 200, align: 'left', edittype: 'text', formatter: 'date', formatoptions: { newformat: 'm-d-Y' }, datefmt: 'm-d-Y',
                            editoptions: {
                                size: 10, maxlengh: 10,
                                dataInit: function (element) {
                                    $(element).datepicker({ dateFormat: 'yy.mm.dd' })
                                }
                            }, sortable: true, editable: true
                        }
            ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#jQGridDemoPager',
        sortname: '_id',
        viewrecords: true,
        sortorder: 'desc',
        caption: "Grid",
        ignoreCase: true

    });


    jQuery("#jQGridDemo").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

//HTML:

<h2>
    New Grid</h2>
<table id="jQGridDemo">
</table>

controller被调用，并且值从controller传递到view.但是这些值没有被绑定.我只是看到一个空的网格.当我使用处理程序(.ashx)加载网格时，此方法非常完美.

The controller is getting called and the values are passed from the controller to view. But the values are not getting bind. Just i'm seeing an empty grid. This works perfect when i'm using a handler(.ashx) to load the grid.

我错了吗?

推荐答案

感谢@Oleg给出的所有建议.已经做了所有这些.但是serializer甚至在进行以下修复后仍阻止了代码.然后我删除了它，以使代码工作完美.

Thanks @Oleg for the all those suggestions given. Have done all those. But the serializer was blocking the code even after the below fix. Then i removed that to make the code work perfect.

我做了这样的工作，

//控制器:

 public JsonResult LoadData()
        {
            MONGOConnect objMC = new MONGOConnect();//Helper Class
            var collectionEmployee = objMC.LoadAllData();//Gets Employee Collection

            return Json(new
            {
                total = collectionEmployee.Count / 10,
                page = 1,
                records = collectionEmployee.Count,
                rows = collectionEmployee.AsQueryable<Product>().ToList<Product>()
            }, JsonRequestBehavior.AllowGet);
        }

//jqGrid:

 jQuery("#jQGridDemo").jqGrid({
        url: '@(Url.Action("LoadData", "Home"))',
        datatype: "json",
        mtype: 'GET',
        colNames: ['ProductId', 'Name', 'AdminContent', 'ProductTemplate', 'CreatedOnUtc'],
        colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left', sorttype: 'int' },
                        { name: 'Name', index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'AdminContent', index: 'AdminContent', width: 200, align: 'left', sortable: true, editable: true },
                        { name: 'ProductTemplate', index: 'ProductTemplate', width: 200, editable: true, edittype: "select", editoptions: { value: "1:VariantsInGrid;2:SingleProductVariant;3:MultipleProducts" }, align: 'left' },
                        { name: 'CreatedOnUtc', index: 'CreatedOnUtc', width: 200, align: 'left', edittype: 'text', formatter: 'date', formatoptions: { newformat: 'm-d-Y' }, datefmt: 'm-d-Y',
                            editoptions: {
                                size: 10, maxlengh: 10,
                                dataInit: function (element) {
                                    $(element).datepicker({ dateFormat: 'yy.mm.dd' })
                                }
                            }, sortable: true, editable: true
                        }
            ],

                        jsonReader: {
                            root: 'rows',
                            total: 'total',
                            page: 'page',
                            records: 'records',
                            cell: 'cell',
                            id: 'id',
                            repeatitems: false
                        },
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#jQGridDemoPager',
        sortname: '_id',
        viewrecords: true,
        loadonce:true,
        sortorder: 'desc',
        caption: "Grid",
        gridview: true,
        autoencode: true,
        ignoreCase: true

    });

在网格代码中添加了JSON reader，当从controller返回时，我分配了该代码.想法来自@NandaIN代码.也感谢他.

Added a JSON reader in the grid code and when returning from the controller i assigned to that. Idea is got from @NandaIN Code. Thanks for him also.

这篇关于从控制器MVC3绑定jqGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！