CRUD operations in jqGrid in ASP.Net MVC

manish.k
 
on Dec 01, 2021 04:14 AM
340 Views

 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);
            }
        }
    }
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download