I am making a table using jqGrid, but I don't know how to add, edit or delete
@{
ViewBag.Title = "Index";
}
<br />
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<link href="~/Content/Theme/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
@section scripts{
<script src="~/Scripts/jqGrid/grid.locale-en.js"></script>
<script src="~/Scripts/jqGrid/jquery.jqGrid.js"></script>
<script>
$(function () {
$grid = $("#jqGrid").jqGrid({
url: '@Url.Action("GetData","Employee")',
mtype: 'GET',
datatype: 'json',
colModel: [
{ label: 'EmployeeID', name: 'EmployeeID', hidden: true },
{ label: 'Name', name: 'Name' , align: 'center'},
{ label: 'DOB', name: 'DOB', formatter: "date", formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y' }, align: 'center' },
{ label: 'City', name: 'City', align: 'center'}
],
height: 'auto',
autowidth:true,
loadonce: true,
pager: '#jqGridPager',
rowNum: 5,
rowList: [5, 10],
viewrecords: true,
caption: 'List of Employees',
emptyrecords: 'No records to display',
multiselect: false
}).navGrid('#jqGridPager', { edit: true, add: true, del: true });
});
</script>
namespace JQGridApp.Models
{
using System;
using System.Collections.Generic;
public partial class Employee
{
public int EmployeeID { get; set; }
public string Name { get; set; }
public System.DateTime DOB { get; set; }
public string City { get; set; }
}
}
namespace JQGridApp.Controllers
{
public class EmployeeController : Controller
{
DBModel db = new DBModel();
// GET: Employee
public ActionResult Index()
{
return View();
}
public ActionResult GetData()
{
using (db)
{
var employeeList = db.Employees.ToList();
return Json(new { rows = employeeList }, JsonRequestBehavior.AllowGet);
}
}
}
}