jqgrid with asp.net mvc

Question

I am using JQGrid with my mvc code.

My controller is

//
        // GET: /Leave/

        public ActionResult CompOff()
        {
            var compoffs = db.RegisterCompOffs.Where(l => l.Employee.Id == this.EmployeeId).ToList();
            return Json(compoffs, JsonRequestBehavior.AllowGet);

        }</code>

compoffs is not null here.. and my view is

@model AGS.Hrms.Models.RegisterCompOff

@{
    ViewBag.Title = "CompOff";
}

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>


<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         $('#jqgProducts').jqGrid({
             //url from wich data should be requested
             url: this.href,
             //type of data
             datatype: 'json',
             //url access method type
             mtype: 'GET',
             //columns names
             colNames: ['CompOffDate', 'IsApproved', 'Description', 'ExpiryDate','IsUtilized'],
             //columns model
             colModel: [
                            { name: 'CompOffDate', index: 'CompOffDate', align: 'left' },
                            { name: 'IsApproved', index: 'IsApproved', align: 'left' },
                            { name: 'Description', index: 'Description', align: 'left' },
                            { name: 'ExpiryDate', index: 'ExpiryDate', align: 'left' }
                            { name: 'IsUtilized', index: 'IsUtilized', align: 'left' }

                          ],
             //pager for grid
             pager: $('#jqgpProducts'),
             //number of rows per page
             rowNum: 10,
             //initial sorting column
             sortname: 'CompOffDate',
             //initial sorting direction
             sortorder: 'asc',
             //we want to display total records count
             viewrecords: true,
             //grid height
             height: '100%'
         });
     });
    </script></code>

While requesting for this view I'm getting this 500 Internal server error in console window of Firebug. Can some one tell me what im doing wrong here?

NetworkError: 500 Internal Server Error - localhost:10659/Leave/CompOff", thats it...its in console window of firebug, wont give anything more than it, my application is taking me localhost:10659/Leave/CompOff with html of shared file in plain text — Piyush Sardana

Darin Dimitrov Darin Dimitrov · Accepted Answer · 2012-06-26T08:24:25

Two possibilities that come to mind:

The following line var compoffs = db.RegisterCompOffs.Where(l => l.Employee.Id == this.EmployeeId).ToList(); throws an exception. To see if this is the case simply put a breakpoint inside the controller action. To fix this error you will have to analyze the exception and what is causing it.
The compoffs object returned by the query contains circular references and cannot be JSON serialized. To see if this is the case explore the Response of the AJAX request in the FireBug console and look for the exact error message contained in the response sent from the server. It will be something along the lines of: Cannot serialize blablah because it contains circular references. To fix this error you will have to use view models and pass to the view only what it actually needs instead of passing your entire domain object graph.

Another thing that is wrong with your code is the follownig line:

url: this.href,

There's no this.href inside a document.ready handler so I guess the AJAX request doesn't even reach the controller. Make sure you have specified the correct url to the controller action that is supposed to return JSON:

url: '@Url.Action("CompOff")',

jqgrid with asp.net mvc

1 Answers