Can't load data from database to a Jquery Grid - asp.net-mvc-4

Question

The problem im facing is I can't populate a Jqgrid from database, it just show me the data in Json format.
View (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 });
});
controller(MantDistritos)
public class MantDistritosController : Controller
{
public JsonResult ListarDistritos()
{
ViewBag.Message = Resources.Language.Title_Page_MTD_L;
var distrito = new LNClientes().DistritoListar();
return Json(distrito,JsonRequestBehavior.AllowGet);
}
}
When i execute the application it shows me this
[{"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"}]
But it didn't show me any data inside the Jquery grid.
If i use ActionResult instead of JsonResult it shows me the Jquery grid but with no data.
Any clue to solve my issue would be appreciate
Thanks.

Answer 1

your json data seems to be fine. i find no error. Seems there is an error in your jsonReader. ID is the name of the Column. it should be of the form
jsonReader : {
root:"data", // Here your posted json data
page: "currpage", // shows current page
total: "totalpages", // total pages
records: "totalrecords" // total records
},
this url may help you to understand better. JsonReader wiki
And if you dont want to be bother about pages and total you can simply
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;},
},