JQgrid Is Not Displaying in MVC4 Razor with EF

See more:

MVC

JQGrid

Razor

entity-framework

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);


          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