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

Controller :




using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using MvcApplication7.Models;


using System.Data.Entity;






　


namespace MvcApplication7.Controllers






{


public class HomeController : Controller





{





public ActionResult Index()






{


return View();






}


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






}


}


public JsonResult Getc()






{


using (Database1Entities obj = new Database1Entities())






{


List<COUNTRY> lst = new List<COUNTRY>() { new COUNTRY() { CID=0, CNAME="Select" } };

return Json(lst.Union(obj.COUNTRies).ToList(), JsonRequestBehavior.AllowGet);






}


}


public JsonResult Getcn(int cid)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.COUNTRies.SingleOrDefault(m=>m.CID==cid).CNAME, JsonRequestBehavior.AllowGet);






}


}


public JsonResult Getsn(int sid)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.STATEs.SingleOrDefault(m => m.SID == sid).SNAME, JsonRequestBehavior.AllowGet);






}


}


public JsonResult Getst(int cid)






{


using (Database1Entities obj = new Database1Entities())






{


List<STATE> lst = new List<STATE>() { new STATE() { SID = 0, SNAME = "Select" } };

return Json(lst.Union(obj.STATEs.Where(m=>m.CID==cid)).ToList(), JsonRequestBehavior.AllowGet);






}


}


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";






}


}


}


}
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 type="text" ng-model="EMP.EID" id="tb" class="form-control" />


</div>


</div>


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


<textarea ng-model="EMP.ADDRESS" class="form-control"></textarea>


</div>


</div>


<div class="form-group">


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


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


<input type="password" ng-model="EMP.PASSWORD" class="form-control" />


</div>


</div>


<div class="form-group">


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


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


<input type="radio" ng-model="EMP.GENDER" value="Male" />Male

<input type="radio" ng-model="EMP.GENDER" value="Female" />Female

</div>


</div>


<div class="form-group">


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


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


<select id="ddl" ng-model="EMP.CID" class="form-control">


<option ng-repeat="c in listc" value={{c.CID}}>{{c.CNAME}}</option>


</select>


</div>


</div>


<div class="form-group">


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


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


<select id="ddl1" ng-model="EMP.SID" class="form-control">


<option ng-repeat="c in lists" value={{c.SID}}>{{c.SNAME}}</option>


</select>


</div>


</div>


<div class="form-group">


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


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


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


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


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


</div>


</div>


<div class="form-group">


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


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


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


</div>


</div>


<div class="row">


<table class="table table-bordered table-hover table-responsive 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:search|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 = '';

ADDRESS = '';

PASSWORD = '';

GENDER = '';

CID = '';

SID = '';






}


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






{


var m;






m = $http({


url: '/Home/Getc',

method: 'Get',






});


m.then(function (d) {






$scope.listc = d.data;


});


function clear()






{


$scope.EMP = new emp();

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

$('#ddl :selected').text('');

$('#ddl1 :selected').text('');









} clear();


$('#ddl').change(function () {

fillddl($(this).val());






});


function fillddl(p)






{


m = $http({


url: '/Home/Getst',

method: 'post',






data: { cid: p }


});


m.then(function (d) {






$scope.lists = d.data;


});


}


function fill()






{


m = $http({


url: '/Home/Gets',

method: 'Get',






});


m.then(function (d) {






$scope.list = d.data;


});


} fill();


$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;


fillc(d.data.CID);;


fillddl(d.data.CID);


fills( d.data.SID);





});


}


function fillc(p)






{


m = $http({


url: '/Home/Getcn',

method: 'post',






data: { cid: p }


});


m.then(function (d) {









$('#ddl :selected').text(d.data);









});


}


function fills(p) {






m = $http({


url: '/Home/Getsn',

method: 'post',






data: { sid: p }


});


m.then(function (d) {

$('#ddl1 :selected').text(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;


}


　


});


</script>