Question

我在我的MVC3应用程序中使用jqgrid绑定Razor视图（.cshtml）中的数据。这些值从controller发送为JSON。但它没有约束力。

//控制器：

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）加载网格时，这非常有用。

我哪里错了？

Answer 1

您发布的MVC代码不允许HTTP GET。您必须使用jqGrid的mtype: 'POST'参数或使用Json的JsonRequestBehavior.AllowGet参数。

您不应该使用JavaScriptSerializer进行手动序列化。 Controller.Json方法为您执行序列化。在我看来，JavaScriptSerializer.Serialize的使用是您的主要错误。

您没有发布定义Product类的代码。您应该声明name中列定义的colModel属性的值与Product类的属性或字段的名称相同。

您当前的代码没有任何服务器端分页。您只需一次返回所有数据。在这种情况下，您应该使用jqGrid的loadonce: true选项。

您应该添加gridview: true和autoencode: true。

您应该在页面的某处添加<div id="jQGridDemoPager"></div>（例如在<table id="jQGridDemo"></table>之后直接添加）。

如果ProductId类的Product属性包含唯一值，则应将key: true属性添加到ProductId属性{的定义中{1}}。

Answer 2

我认为你需要绑定控制器中的每个值。试试这个，可能会有效

 public JsonResult LoadData()
        {

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

                if ( null == collectionEmployee || collectionEmployee .Count == 0)
                    return Json(0, JsonRequestBehavior.AllowGet);
                else
                    return Json(new
                    {
                        TotalCount = (collectionEmployee == null) ? 0 : collectionEmployee .Count,
                        Data = (from item in collectionEmployee 
                                select new
                                {
                                    ProductId= item.ProductId,
                                    Name= item.Name,
                                    AdminContent= item.AdminContent,
                                    ProductTemplate= item.ProductTemplate,
                                    CreatedOnUtc=item.CreatedOnUtc
                                }).ToList()

                    }, JsonRequestBehavior.AllowGet);
        }

Answer 3

感谢@Oleg提供的所有建议。完成了所有这些。但即使在下面的修复之后，serializer也阻止了代码。然后我删除它以使代码完美。

我做了这样的工作，

//控制器：

 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 i返回时添加了@NandaIN。想法来自{{1}}代码。也谢谢他。

从控制器MVC3绑定jqGrid

3 个答案: