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>