Integration of jqGrid With MVC4 Application: Part 1

This article is more about integration of jqGrid in MVC 4 applications. Actually I needed to implement it in my project and I encountered many difficulties to do it because I hardly found any help and when I did it was halfway useful.

I have divided my descriptions into parts. This part is more about the integration of jqGrid with MVC 4 applications.in this article we will learn the following topics:

• Adding a jqGrid reference file
• Structure of jqGrid in a View
• Calling a Controller's action to bind a result set with jqGrid
• Return a JSON result from an action in special format from DBContext

To learn more about MVC kindly go to C# Corner MVC Section or My Blog.

I've developed this sample application into Visual Studio 2012 and used Entity Framework to retrieve information from a database. This is the basic layout of a MVC application as depicted below having jqGrid libraries.

Step 1

Add the jqGrid reference file.



Step 2

For the structure of the jqGrid in a View, the structure I used is as shown in the image below:

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

<script type="text/javascript">

    $(document).ready(function myfunction() {

       $('#list').jqGrid({
           caption: "Employee Details",
           url: '/Interview/GetEmployee/',
           datatype: "json",
           contentType: "application/json; charset-utf-8",
           mtype: 'GET',
           colNames: ['Address', 'City', 'Id', 'Name'],
           colModel: [
                 { name: 'Address', index: 'Address', width: 150 },
                 { name: 'City', index: 'City', width: 150 },
                 { name: 'Id', index: 'Id', width: 150 },
                 { name: 'Name', index: 'Name', width: 150 }
           ],
           rowNum: 10,
           loadonce: true

       });

       jQuery("#list").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true });
   });
</script>

Step 3

Call the Controller's action to bind the result set with jqGrid.

In this step we will call the controller's action method from the view, kindly refer to the image shown below:



Step 4

Return the JSON result from the action in special format from DBContext.

After an action is called by the view in a jqGrid segment, it's now action duty to return the JSON collection to the caller to bind the collection with jqGrid. Whenever an action returns a collection as a JsonResult it should be in a special format so that the jqGrid could accept these values, otherwise it will not load the values into the grid. This is a code segment used at the controller level as shown below:

public JsonResult GetEmployee()
{
    EmployeeEntities edb = new EmployeeEntities();
    // UsersContext u = new UsersContext();

    var jsonData = new
    {
        total = 1,
        page = 1,
        records = edb.EmpRegistrations.ToList().Count,
        rows = (
          from emp in edb.EmpRegistrations.ToList()
          select new
          {
             id = emp.Id,
             cell = new string[] {
               emp.Address.ToString(), emp.City.ToString(), emp.Id.ToString(),emp.Name
            }
         }).ToArray()
     };
     return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Please have a look at the image below to understand the result set returned by the action at the controller level.

Here we are nearly done, now run an application and press F5 to see an output:



I developed this application in Visual Studio 2012 due to this, it’s difficult to upload to csharpcorner.com, it doesn’t allow me upload more than 10 MB. Still I am sharing jqGrid reference files and controller.cs, view.cshtml and database .bak file (to create DBContext) as shown below:



Keep yourself ready for Part 2 to see more features of jqGrid.

Thanks

Stay happy stay coding.