jqgrid asp net mvc

In this example, I will show to how to displaydata in a grid using jQuery jQGrid in asp.net MVC uses the entity framework. Itis a very lightweight client side grid having multiple functions.

I used employee table

Step 1: Create a table using the following script with data:

/****** Object:  Table[dbo].[Employee]    Script Date:07/01/2016 00:12:42 ******/
SET ANSI_NULLSON
GO
SET QUOTED_IDENTIFIERON
GO
CREATE TABLE[dbo].[Employee](
      [EmployeeID] [int] IDENTITY(1,1) NOT NULL,
      [Name] [nvarchar](50) NULL,
      [Gender] [nvarchar](50) NULL,
      [City] [nvarchar](50) NULL,
 CONSTRAINT[PK_tbl_Employee] PRIMARY KEY CLUSTERED 
(
      [EmployeeID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON[PRIMARY]
GO
SET IDENTITY_INSERT[dbo].[Employee] ON
INSERT [dbo].[Employee] ([EmployeeID], [Name], [Gender], [City]) VALUES (1, N'Mark', N'Male', N'Berlin')
INSERT [dbo].[Employee] ([EmployeeID], [Name], [Gender], [City]) VALUES (2, N'John', N'Male', N'Beijing')
INSERT [dbo].[Employee] ([EmployeeID], [Name], [Gender], [City]) VALUES (3, N'Mary', N'Female', N'Brussels')
INSERT [dbo].[Employee] ([EmployeeID], [Name], [Gender], [City]) VALUES (4, N'Steve', N'Male', N'Luxembourg')
INSERT [dbo].[Employee] ([EmployeeID], [Name], [Gender], [City]) VALUES (5, N'Ben', N'Male', N'Pyongsong')
SET IDENTITY_INSERT[dbo].[Employee] OFF

Step 2: Create an ado.net entity data model using table Employee and generate entityfor that.

Step 3: Right click on the "Controllers" folder and add "Employee" controller. Copy and paste thefollowing code.

public class EmployeeController : Controller
    {
        //
        // GET: /JQGrid/
        models db = new models();
 
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult GetJqGridData()
        {
 
           var studenlist = db.Employees;
            var jsonData = new
            {
               rows = studenlist
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
 
        }
     }

Step 4: Right click on the "Index" action method in the "EmployeeController" and add "Index" view. Copy and paste the followingcode.

@{
    ViewBag.Title= "jqgrid aspnet mvc ";
}
<h2>jqgrid asp net mvc </h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#EmployeeGrid").jqGrid
       ({
           url: "/Employee/GetJqGridData",
          datatype: 'json',
          mtype: 'Get',
          colNames: ['EmployeeCode', 'Name', 'City', 'Gender'],
          colModel: [
               {key: true, name: 'EmployeeID', index: 'EmployeeID', sortable: true },
               {key: false, name: 'Name', index: 'Name', editable: true, sortable: true },
               {key: false, name: 'City', index: 'City', editable: true },
           {key: false, name: 'Gender', index: 'Gender', editable: true }
           ],
          pager: jQuery('#EmployeeGridPager'),
          rowNum: 3,
           rowList: [10, 20, 30, 40, 50],
          height: '100%',
          viewrecords: true,
          caption: 'EmployeesRecords',
          emptyrecords: 'NoEmployees Records are Available to Display',
          jsonReader:
           {
              root: "rows",
              page: "page",
              total: "total",
              records: "records",
              repeatitems: false,
              Id: "0"
           },
          autowidth: true,
          multiselect: false,
      }).navGrid('#EmployeeGridPager',
       {
           edit:false, add: false, del: false, search: false,
          searchtext: "SearchEmployee",refresh: true
       },
            {
                zIndex: 100,
               caption: "SearchEmployees",
               sopt: ['cn']
            });

    });
</script>

<div>

    <table id="EmployeeGrid"></table>

    <div id="EmployeeGridPager"></div>

 

</div>