Click here to Skip to main content
14,218,216 members
Rate this:
Please Sign up or sign in to vote.
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
Posted
Comments
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100