Hi, I started working on MVC Razor, with Entity framework , my aim is to display the details of user in JQgrid. and i am returning json data from my controller. its working fine, it hits the Database, and retriebing the database, but when it comes to view part,i am getting values in arrays, not in grid. grid is not at all displaying in view. what is my issue.
<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<%--jQuery Library--%>
<script src="/Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<%--Must load language tag BEFORE script tag--%>
<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<h2>GetUserDetails</h2>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/User/GetUserDetails',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Name', 'Designation','City'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Name', index: 'Name', width: 40, align: 'left' },
{ name: 'Designation', index: 'Designation', width: 400, align: 'left' },
{ name:'City', index:'City', width:150, align:'left'}
],
pager: jQuery('#pager'),
rowNum: 2,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
caption: 'My first grid'
});
});
</script>
<%-- HTML Required--%>
<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
le="text-align:center;"></div>
and my controller looks like this
public JsonResult GetUserDetails(string sidx="Id", string sord="asc", int page=1, int rows=5)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = db.Users.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var userdata = db.Users.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize).Select(u => new { u.Id, u.Name, u.Designation, u.City });
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from u in userdata.AsEnumerable()
select new
{
i = u.Id,
cell = new string[] { u.Id.ToString(), u.Name, u.Designation, u.City }
}).ToArray()
};
return Json(jsonData,JsonRequestBehavior.AllowGet);
}
}
My route config is
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "User", action = "GetUserDetails", id = UrlParameter.Optional }
);
}
please sort out my issue. i am doing this in my VS 2012 , MVC 4. am i missing any reference here.
Thanks in advance