CURD opration and Search Sort and Pagination using anguraljs,MVC & MVVM

Controller :


using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using MvcApplication6.Models;


using System.Data.Entity;


namespace MvcApplication6.Controllers






{


public class HomeController : Controller





{


public ActionResult Index()






{


return View();






}


public string Save(EMP emp)






{


using (Database1Entities obj = new Database1Entities())






{


obj.Entry(emp).State = EntityState.Added;






obj.SaveChanges();


return "Data Saved.";






}


}


public string Update(EMP emp)






{


using (Database1Entities obj = new Database1Entities())






{


obj.Entry(emp).State = EntityState.Modified;






obj.SaveChanges();


return "Data Updated.";






}


}


public string Delete(EMP emp)






{


using (Database1Entities obj = new Database1Entities())






{


obj.Entry(emp).State = EntityState.Deleted;






obj.SaveChanges();


return "Data Deleted.";






}


}


[OutputCache(Duration = 0)]

public JsonResult Gets()






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);






}


}


public JsonResult Get(int Id)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.EMPs.SingleOrDefault(m=>m.EID==Id), JsonRequestBehavior.AllowGet);






}


}


}


}


View :




<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />

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

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

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


<style>


.sort-icon {

font-size: 9px;

margin-left: 5px;






}


th {

cursor:pointer;






}


</style>

<br /><br />

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


<form class="form-horizontal">


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


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


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


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


</div>


</div>


<div class="form-group">


<label class="col-lg-1 control-label">Search</label>


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


<input class="form-control" ng-model="searh" style="width:200px"/>


</div>


</div>


<div class="row">


<table class="table table-bordered table-hover table-striped table-striped">


<thead class="bg-primary">


<tr>


<th ng-click="order('EID')">





EID


<span class="glyphicon sort-icon" ng-show="sortKey=='EID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>


</th>


<th ng-click="order('NAME')">





NAME


<span class="glyphicon sort-icon" ng-show="sortKey=='NAME'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>


</th>


<th>UPDATE</th>


<th>DELETE</th>


</tr>


</thead>


<tbody>


<tr dir-paginate="c in list|filter:searh|orderBy:predicate:reverse|itemsPerPage:2">


<td>{{c.EID}}</td>


<td>{{c.NAME}}</td>


<td><a ng-click="edit(c.EID)">Edit</a></td>


<td><a ng-click="del(c)">Delete</a></td>


</tr>


<tr><td colspan="4">


<dir-pagination-controls max-size="2"


direction-links="true"


boundary-links="true">


</dir-pagination-controls>


</td></tr>


</tbody>


</table>








</div>


</form>

</div>

<script type="text/javascript">


function emp()






{


EID = '';

NAME = '';






}


angular.module("app", ['angularUtils.directives.dirPagination']).controller("Ctr", function ($scope, $http)






{





var m;

$scope.save = function ()






{


m = $http({


url: '/Home/Save',

method: 'Post',






data: {emp:$scope.EMP}


});


m.then(function (d) {






alert(d.data);


clear();


fill();


});


}


$scope.update = function ()






{


m = $http({


url: '/Home/Update',

method: 'Post',






data: { emp: $scope.EMP }


});


m.then(function (d) {






alert(d.data);


clear();


fill();


});


}


$scope.reset = function ()






{


clear();


}


$scope.edit = function (p)






{


m = $http({


url: '/Home/Get',

method: 'Post',






data: { Id: p }


});


m.then(function (d) {






$scope.EMP = d.data;


});


}


$scope.del = function (p)






{


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






{


m = $http({


url: '/Home/Delete',

method: 'Post',






data: { emp: p}


});


m.then(function (d) {






alert(d.data);


fill();


});


}


}


$scope.order = function (p)






{


$scope.reverse = ($scope.predicate === p) ? !$scope.reverse : false;






$scope.predicate = p;


}


function fill()






{


m = $http({


url: '/Home/Gets',

method: 'Get',






data: { emp: $scope.EMP }


});


m.then(function (d) {






$scope.list=d.data;


});


} fill();


function clear()






{


$scope.EMP = new emp();

$('#tb').focus();






} clear();


});


</script>


Press Me