Hi guhananth,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetCustomers(int page, int rows, string searchString)
{
using (NorthwindEntities entities = new NorthwindEntities())
{
List<Customer> customers = entities.Customers.ToList();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = customers.Count();
customers = customers.Skip(pageIndex * pageSize).Take(pageSize).ToList();
if (!string.IsNullOrEmpty(searchString))
{
customers = customers.Where(m => m.Country == searchString).ToList();
}
var jsonData = new
{
total = (int)Math.Ceiling((float)totalRecords / (float)rows),
page,
records = totalRecords,
rows = customers
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.0.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#tblCustomers").jqGrid({
url: "/Home/GetCustomers",
datatype: 'json',
mtype: 'Get',
colNames: ['CustomerID', 'ContactName', 'City', 'Country'],
colModel: [
{ name: "CustomerID", editable: true },
{ name: "ContactName", editable: true },
{ name: "City", editable: true },
{ name: "Country", editable: true }
],
height: '100%',
rowNum: 10,
pager: $('#pager'),
rowList: [10, 20, 30, 40],
viewrecords: true,
caption: '',
emptyrecords: 'No records found.',
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
}).navGrid('#pager', {
edit: true,
add: true,
del: true,
search: true,
refresh: true,
closeAfterSearch: true
});
})
</script>
</head>
<body>
<table id="tblCustomers"></table>
<div id="pager"></div>
<hr />
<input id="btnSave" type="button" value="Save" />
</body>
</html>
Screenshot
