Facing issue with JQ grid

Question

I am trying JqGrid for our application with asp.Net MVC. I am not able to get the data display.I am not sure what is the issue.

Here is my View Code:

<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script> 

@{
    ViewBag.Title = "SearchEmployee";
}

<h2>SearchEmployee</h2>
<table id="list2"></table>
 <div id="pager2"></div>

<script language="javascript">

    $(document).ready(function () {
        $("#list2").jqGrid({
            url: 'Employee/Employees',
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
            'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
            colModel: [
                { name: 'EMPLOYEEID', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
                { name: 'FIRSTNAME', index: 'FIRSTNAME', width: 90 },
                { name: 'LASTNAME', index: 'LASTNAME', width: 100 },
                { name: 'DOB', index: 'DOB', width: 100 },
                { name: 'AGE', index: 'AGE', width: 100 },
                { name: 'SSN', index: 'SSN', width: 100 },
                { name: 'Gender', index: 'Gender', width: 80 },
                { name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
                { name: 'ADDRESS1', index: 'ADDRESS1', width: 80 },
                { name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
                { name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
                { name: 'STATE', index: 'STATE', width: 80 },
                { name: 'CITYNAME', index: 'CITYNAME', width: 80 },
                { name: 'PINCODE', index: 'PINCODE', width: 80 },
            ],
            rowNum: 5,
            rowList: [5, 10, 15],
            pager: '#pager2',
            //sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption: "JSON Example"
        });
        jQuery("#list2").jqGrid('navGrid', '#pager2',
            { edit: false, add: false, del: false });
    });
</script>  

My Controller Code:

   public ActionResult Employees()
         {

             var employeeList = new List<Employee> 
            { 
                new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
                new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
                new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
             };
             return Json(employeeList, JsonRequestBehavior.AllowGet);
         }

The issue is when i tried to get to display Employee list. In IE,when I tried to run the application,its prompting to download Json file.

Please let me know whats the issue.

I have tried with the source code from the below Link: http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php

Answer 1

JavaScript is Case Sensitive and you forget to add slash at beginning of url so your code will be like below:

    <script language="javascript">

    $(document).ready(function () {
        $("#list2").jqGrid({
            url: '/Employee/Employees',
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
            'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
            colModel: [
                { name: 'EmployeeId', index: 'EmployeeId', width: 55, sorttype: "int" },
                { name: 'FirstName', index: 'FirstName', width: 90 },
                { name: 'LASTNAME', index: 'LASTNAME', width: 100 },
                { name: 'DOB', index: 'DOB', width: 100 },
                { name: 'Age', index: 'Age', width: 100 },
                { name: 'SSN', index: 'SSN', width: 100 },
                { name: 'Gender', index: 'Gender', width: 80 },
                { name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
                { name: 'Address1', index: 'Address1', width: 80 },
                { name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
                { name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
                { name: 'Status', index: 'Status', width: 80 },
                { name: 'CityName', index: 'CityName', width: 80 },
                { name: 'PINCODE', index: 'PINCODE', width: 80 },
            ],
            rowNum: 5,
            rowList: [5, 10, 15],
            pager: '#pager2',
            sortname: 'EmployeeId',
            viewrecords: true,
            sortorder: "asc",
            caption: "JSON Example"
        });
        jQuery("#list2").jqGrid('navGrid', '#pager2',
            { edit: false, add: false, del: false });
    });
</script>

Answer 2

I agree with Abdul Hadi.You need to put a forward slash before the controller name so that your url is - url: '/Employee/Employees', And the column names need to match those in the Employee object(they should be the same case).

In addition to those two changes you have a whole bunch of columns defined that don't have a corresponsing property in the Employee class, so they can be removed. And be careful if you have a _Layout.cshtml page in your MVC application, sometimes this page has script references which will prevent you from using jqGrid.To prevent this from happenening try setting Layout = null; in your view.Here's a complete working example:

Controller:

public class EmployeeController
{
    public ActionResult Index()
    {
        //This will return your Employee page.This should be set as the default action
        return View();
    }

    public ActionResult Employees()
    {
        //This will return the data to bind to jqGrid
        //DON'T CALL THIS DIRECTLY - otherwise you will get a situation where IE prompts you to download the .json file
        var employeeList = new List<Employee> 
        { 
            new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
            new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
            new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
         };
        return Json(employeeList, JsonRequestBehavior.AllowGet);
    }
}

View:

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
    $(function () {

        $("#list2").jqGrid({
            url: '/Employee/Employees',
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            colNames: ['EMPLOYEEID', 'FIRSTNAME', 'AGE', 'GENDER', 'STATUS', 'ADDRESS1', 'CITYNAME'],
            colModel: [
                { name: 'EmployeeId', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
                { name: 'FirstName', index: 'FIRSTNAME', width: 90 },
                { name: 'Age', index: 'AGE', width: 100 },
                { name: 'Gender', index: 'Gender', width: 80 },
                { name: 'Status', index: 'STATUS', width: 80, align: "right" },
                { name: 'Address1', index: 'ADDRESS1', width: 80 },
                { name: 'CityName', index: 'CITYNAME', width: 80 },
            ],
            rowNum: 5,
            rowList: [5, 10, 15],
            pager: '#pager2',
            viewrecords: true,
            sortorder: "asc",
            caption: "JSON Example"
        });
        jQuery("#list2").jqGrid('navGrid', '#pager2',
            { edit: false, add: false, del: false });
    });
</script>
<table id="list2" border="1"></table>
<div id="pager2"></div>

Output:

Answer 3

On top of the comments by the other answers.

See the The answer for how you should format your json for jqgrid

   public ActionResult Employees()
             {

                 var employeeList = new List<Employee> 
                { 
                    new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
                    new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
                    new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
                 };
 var jsonData = new
            {
                total = employeeList.Count,
                page = 1,
                records = 10,
                rows = employeeList.ToArray()
            };
                 return Json(jsonData, JsonRequestBehavior.AllowGet);
             }