MVC controller return JSON list

Question

I'm trying to return a JSON list in my controller. Not sure where I am going wrong. Any help would be greatly appreciated. I am trying to implement a grid a found online.

Here is my controller:

//[HttpPost]
        public JsonResult JqueryTest()

        {
            var estimateDetails = db.EstimateDetail
                .Include(x => x.EstimationItem)
                .Include(x => x.EstimateHeader);

            return Json(estimateDetails, JsonRequestBehavior.AllowGet);

        }

Here is my view:

@model IEnumerable < EstimationTools.Models.Entities.EstimateDetail >



    ViewBag.Title = "JqueryTest";
}

<h2>JqueryTest</h2>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />


    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.styleUI = 'Bootstrap';
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - JSON</title>
</head>
<body>
    <div style="margin-left:20px">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
    <script type="text/javascript">



        $(document).ready(function () {

            $("#jqGrid").jqGrid({
                url: 'EstimationTool/plugins/jqGrid',
                datatype: "json",
                colModel: [
                   { label: 'Estimate', name: 'Estimate', width: 75 },
                   { label: 'Contingency', name: 'Contingency', width: 90 },
                   { label: 'Comment', name: 'Comment', width: 100 },
                   { label: 'Subactivity', name: 'EstimationItem.Subactivity', width: 100 },
                   { label: 'EstimationArea', name: 'EstimationItem.Area.EstimationArea', width: 100 },
                   { label: 'Description', name: 'EstimationItem.GeneralActivity.Description', width: 100 }
                   // sorttype is used only if the data is loaded locally or loadonce is set to true
                ],
                viewrecords: true, // show the current page, data rang and total records on the toolbar
                width: 780,
                height: 200,
                rowNum: 30,
                loadonce: true, // this is just for the demo
                pager: "#jqGridPager"
            });
        });

    </script>

</body>
</html>

Where do yo expect the JSON data to come ? What is your expected behavior ? What is currently happening ? — Shyju
– Shyju, Commented Sep 9, 2016 at 16:32
your url doesn't seem to match the url of your controller. — steve v
– steve v, Commented Sep 9, 2016 at 17:02

parismiguel · Accepted Answer · 2016-09-09 17:26:19Z

2

First thing first... as stephen.vakil states, there is an error in your url, as you are pointing to an action so called "jqGrid":

 url: 'EstimationTool/plugins/jqGrid'

The usual syntax is: '{Controller}/{Action}/'

Which in your case, the action name is "JqueryTest" as stated above. So, I don't know the name of your Controller, but I hope you've got the idea. Something like this:

url: 'YourController/JqueryTest'

On the other hand, within your Action, you should return a list instead... so, just add .ToList() at the end of the query or append it to your parameter:

return Json(estimateDetails.**ToList()**, JsonRequestBehavior.AllowGet);

Regards,

answered Sep 9, 2016 at 17:26

parismiguel

6167 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Travis J Over a year ago

re: "return a list instead". This is important. Returning just what looks like an EF DbSet is going to cause an exception to be thrown (the context will be disposed prior to trying to access it). ToList needs to be used to materialize the data.

Collectives™ on Stack Overflow

MVC controller return JSON list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related