Example of NG-GRID in MVC & ANGULARJS

web api code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication22.Models;
namespace WebApplication22.Controllers
{
   
    public class ValuesController : ApiController
    {
        public List<EMP> Gets()
        {

            using(Database1Entities obj=new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP Get(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.SingleOrDefault(m => m.EID == EID);
            }
        }
        [HttpPost]
        public string Post(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.Add(emp);
                obj.SaveChanges();
                return "Data Saved.";
            }
        }
        [HttpPut]
        public string Put(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                emp1.NAME = emp.NAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Delete(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
    }
}

View Code :

@{

    ViewBag.Title = "Index";

}

<style type="text/css">

    .gridStyle {

        border: 1px solid rgb(212,212,212);

        width: 900px;

        height: 300px;

    }

</style>

<link href="~/Content/bootstrap.css" rel="stylesheet" />

<link href="~/Content/ng-grid.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/ng-grid.js"></script>

<h2>Jay Jagannath...</h2>

<div class="container" ng-app="app" ng-controller="ctr">

    <form class="form-horizontal">

        <div class="form-group">

            <label class="control-label col-lg-4">EID</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.EID" id="tb" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4">NAME</label>

            <div class="col-lg-4">

                <input type="text" class="form-control" ng-model="EMP.NAME" />

            </div>

        </div>

        <div class="form-group">

            <label class="control-label col-lg-4"></label>

            <div class="col-lg-4">

                <input type="button" class="btn btn-primary" value="Save" style="width:80px" ng-click="save()" />

                <input type="button" class="btn btn-primary" value="Update" style="width:80px" ng-click="update()" />

                <input type="button" class="btn btn-primary" value="Reset" style="width:80px" ng-click="reset()" />

            </div>

        </div>

        <div class="gridStyle" ng-grid="gridOptions">

        </div>

    </form>

</div>

<script type="text/javascript">

    var app = angular.module("app", ['ngGrid']);

    app.controller("ctr", function ($scope,$http) {

        var m;

        function CLR()

        {

            $scope.EMP = new emp();

        } CLR();

        function fill()

        {

            $scope.filterOptions = {

                filterText: "",

                useExternalFilter: false

            };

            $scope.totalServerItems = 0;

            $scope.pagingOptions = {

                pageSizes: ['5','10','20'],

                pageSize: '5',

                currentPage: 1

            };

            $scope.setPagingData = function (data, page, pageSize) {

                var pagedData = data.slice((page - 1) * pageSize, page * pageSize);

                $scope.DataSource = pagedData;

                $scope.totalServerItems = data.length;

                if (!$scope.$$phase) {

                    $scope.$apply();

                }

            };

            $scope.getPagedDataAsync = function (pageSize, page, searchText) {

                setTimeout(function () {

                    var data;

                    if (searchText) {

                        var ft = searchText.toLowerCase();

                        $http.get('http://localhost:50628/api/Values').success(function (largeLoad) {

                            data = largeLoad.filter(function (item) {

                                return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;

                            });

                            $scope.setPagingData(data, page, pageSize);

                        });

                    } else {

                        $http.get('http://localhost:50628/api/Values').success(function (largeLoad) {

                            $scope.setPagingData(largeLoad, page, pageSize);

                        });

                    }

                }, 100);

            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {

                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {

                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);

                }

            }, true);

            $scope.$watch('filterOptions', function (newVal, oldVal) {

                if (newVal !== oldVal) {

                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);

                }

            }, true);

            $scope.gridOptions = {

                data: 'DataSource',

                multiSelect: false,

                enableCellEdit: false,

                enableRowSelection: true,

                enableColumnResize: false,

                enableCellSelection: false,

                enablePaging: true,

                showFooter: true,

                totalServerItems: 'totalServerItems',

                pagingOptions: $scope.pagingOptions,

                filterOptions: $scope.filterOptions,

                showFilter: true,

                columnDefs:

                 [

          { field: 'EID', displayName: 'Eid', width: '250px', resizable: true },

          { field: 'NAME', displayName: 'Name', width: '250px' },

          

       {

           displayName: 'Actions', cellTemplate:

            '<div class="grid-action-cell">' +

            '<a ng-click="Edit(row.entity);" >Edit</a>' + ' | ' +

            '<a ng-click="Del(row.entity);" >Delete</a>' +

            '</div>'

       }

                 ],

            };

            

        } fill();

        $scope.save = function ()

        {

            m = $http({

                url: 'http://localhost:50628/api/Values/Post',

                method: 'Post',

                data:$scope.EMP

            });

            m.then(function (d) {

                alert(d.data);

                CLR();

                fill();

            });

        }

        $scope.update = function () {

            m = $http({

                url: 'http://localhost:50628/api/Values/Put',

                method: 'Put',

                data: $scope.EMP

            });

            m.then(function (d) {

                alert(d.data);

                CLR();

                fill();

            });

        }

        $scope.Edit = function (s)

        {

          

            m = $http({

                url: 'http://localhost:50628/api/Values/Get?EID='+s.EID,

                method: 'Get',

                

            });

            m.then(function (d) {

               

                $scope.EMP = d.data;

            });

        }

        $scope.reset = function () {

            CLR();

        }

        $scope.Del = function (s) {

            if (confirm('Do you want to delete it ?'))

            {

                m = $http({

                    url: 'http://localhost:50628/api/Values/Delete',

                    method: 'Patch',

                    data: s

                });

                m.then(function (d) {

                    alert(d.data);

                    fill();

                   

                });

            }

        }

    });

    function emp()

    {

        return {

            EID: null,

            NAME:null

        }

    }

</script>