Click here to Skip to main content
14,826,929 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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>

 <script type="text/javascript">
     jQuery(document).ready(function () {
             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'

 <%-- 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>

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,
              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 }
          return Json(jsonData,JsonRequestBehavior.AllowGet);

My route config is
public static void RegisterRoutes(RouteCollection routes)

               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
NowYouSeeMe 14-Aug-14 5:57am
try simple jqgrid without any connection to controller..check whether its appearing or not..if it isnt then there must be some javascript conflict

1 solution

There might be Jquery conflict issues which is also present in layout page.

Refer article.

Asp.Net MVC-4,Entity Framework and JQGrid Demo with simple Todo List WebApplication[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900