无法将数据从数据库加载到Jquery Grid

时间:2013-12-18 22:37:00

标签: asp.net-mvc-4 jqgrid

我遇到的问题是我无法从数据库填充Jqgrid,它只是以Json格式显示数据。

查看 (ListarDistritos)

@model IEnumerable<Entidades.Base.ENDistrito>

<script src="@Url.Content("~/Scripts/Base/modGrid.js")"></script>
<script src="@Url.Content("~/Content/JqueryGrid/jquery-1.9.0.min.js")"></script>
<link href="@Url.Content("~/Content/JqueryGrid/jquery-ui-1.9.2.custom.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/JqueryGrid/jquery.jqGrid.js")"></script>
<link href="@Url.Content("~/Content/JqueryGrid/ui.jqgrid.css")" rel="stylesheet" />
<script src="@Url.Content("~/Content/JqueryGrid/grid.locale-en.js")"></script>

<link href="@Url.Content("~/Content/estilo.css")" rel="stylesheet" />

<h2>@ViewBag.Message</h2>
<table id="grid">
 </table>
<div id="pager"></div>

ModGrid.JS

var lastsel;
$(document).ready(function()  {
    $("#grid").jqGrid({
        url: '/MantDistritos/ListarDistritos',
        datatype: "json",
        mtype: 'GET',
        colNames: ['Id', 'Descripcion'],
        colModel: [
                        {
                            name: 'IdDistrito', index: 'IdDistrito', sortable: false, align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        },
                        {
                            name: 'DescripcionDistrito', index: 'DescripcionDistrito', sortable: false, align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        }
        ],
        jsonReader: {
            repeatitems: false,
            id: "0"
        },
        pager: jQuery('#pager'),
        sortname: 'DescripcionDistrito',
        rowNum: 10,
        rowList: [10, 20, 25],
        sortorder: "",
        height: 125,
        viewrecords: true,
        rownumbers: true,
        caption: 'Distritos',
        width: 750,
        editurl: "/Home/PerformCRUDAction",  
        onCellSelect: function (rowid, iCol, aData) {


            if (rowid && rowid !== lastsel) {

                if (lastsel)
                    jQuery('#grid').jqGrid('restoreRow', lastsel);
                jQuery('#grid').jqGrid('editRow', rowid, true);
                lastsel = rowid;
            }
        }
    })
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false, refresh: true },
            { closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
            { closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });

});

控制器 (MantDistritos) 公共类MantDistritosController:Controller     {     public JsonResult ListarDistritos()     {                 ViewBag.Message = Resources.Language.Title_Page_MTD_L;                 var distrito = new LNClientes()。DistritoListar();                 返回Json(distrito,JsonRequestBehavior.AllowGet);     } }

当我执行应用程序时,它显示了我

[{"IdDistrito":1,"DescripcionDistrito":"MAGDALENA DEL MAR"},{"IdDistrito":2,"DescripcionDistrito":"JESUS MARIA"},{"IdDistrito":3,"DescripcionDistrito":"PUEBLO LIBRE"},{"IdDistrito":4,"DescripcionDistrito":"LIMA 36"},{"IdDistrito":5,"DescripcionDistrito":"BARRANCO"},{"IdDistrito":6,"DescripcionDistrito":"MIRAFLORES"},{"IdDistrito":7,"DescripcionDistrito":"SAN ISIDRO"},{"IdDistrito":8,"DescripcionDistrito":"SAN JUAN DE LURIGANCHO"},{"IdDistrito":9,"DescripcionDistrito":"SAN JUAN DE MIRAFLORES"},{"IdDistrito":10,"DescripcionDistrito":"LOS OLIVOS"},{"IdDistrito":11,"DescripcionDistrito":"COMAS"},{"IdDistrito":12,"DescripcionDistrito":"SURCO"}]

但它没有向我显示Jquery网格中的任何数据。 如果我使用ActionResult而不是JsonResult,它会向我显示Jquery网格但没有数据。

任何能解决我的问题的线索都会很感激

感谢。

1 个答案:

答案 0 :(得分:0)

您的json数据似乎没问题。我发现没有错误。似乎 jsonReader 中存在错误。 ID是列的名称。它应该是

的形式
jsonReader : {
  root:"data", // Here your posted json data   
  page: "currpage", // shows current page 
  total: "totalpages", // total pages 
  records: "totalrecords" // total records

},

这个网址可能会帮助您更好地理解。 JsonReader wiki

如果你不想打扰页面和总数,你可以简单地

jsonReader : {
  root:"data", 
  page:  function(obj) { return 1; }, // page as 1
  total: function(obj) { return 1; }, // total  as 1
  records: function(obj) { return reponse.length;},  

},