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

View



@{


ViewBag.Title = "Index";






}


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

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

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

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

<script src="~/Scripts/Paging.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="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4">EID</label>


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-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 col-sm-4 col-md-4 col-xs-4">NAME</label>


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


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


</div>


</div>


<div class="form-group">


<label class="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4">ADDRESS</label>


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


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


</div>


</div>


<div class="form-group">


<label class="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4">PASSWORD</label>


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


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


</div>


</div>


<div class="form-group">


<label class="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4">GENDER</label>


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


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

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

</div>


</div>


<div class="form-group">


<label class="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4">DEPARTMENT</label>


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


<select class="form-control" ng-model="EMP.DNAME" ng-options="c for c in listd" ></select>


</div>


</div>


<div class="form-group">


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


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


<input type="checkbox" ng-model="EMP.ISMARRIED" />ISMARRIED

</div>


</div>


<div class="form-group">


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


<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">


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


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


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


</div>


</div>


<div class="form-group">


<label class="control-label col-lg-1 col-sm-1 col-md-1 col-xs-1">SEARCH</label>


<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">


<input type="text" class="form-control" ng-model="search" />


</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()






{


return {

EID: null,

NAME: null,

ADDRESS: null,

PASSWORD: null,

GENDER: null,

DNAME: "X",

ISMARRIED:false





}


}


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

function clear()






{


$scope.EMP = new emp();

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






} clear();


var m;

function fill()






{


m = $http({


url: '/Home/Gets',

method:'Get'





});


m.then(function (d) {






$scope.list = d.data;


});


} fill();


m = $http({


url: '/Home/Getd',

method: 'Get'





});


m.then(function (d) {






$scope.listd = d.data;


});


$scope.save = function ()






{


m = $http({


url: '/Home/Save',

method: 'Post',






data:$scope.EMP


});


m.then(function (d) {






alert(d.data);


clear();


fill();





});


}


$scope.update = function () {






m = $http({


url: '/Home/Update',

method: 'Post',






data: $scope.EMP


});


m.then(function (d) {






alert(d.data);


clear();


fill();


});


}


$scope.del = function (n) {

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






{


m = $http({


url: '/Home/Delete',

method: 'Post',






data: n


});


m.then(function (d) {






alert(d.data);


fill();


});


}


}


$scope.edit = function (n) {






m = $http({


url: '/Home/Get',

method: 'Post',






data: {Id:n}


});


m.then(function (d) {






$scope.EMP= d.data;





});


}


$scope.reset = function () {






clear();


}


$scope.order = function (p) {

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






$scope.predicate = p;


}


　


});


</script>


Controller




using System;


using System.Collections.Generic;


using System.Data.Entity;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using WebApplication4.Models;


namespace WebApplication4.Controllers






{


public class HomeController : Controller





{


// GET: Home


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 Getd()






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.DEPTs.Select(m=>m.DNAME).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())






{


EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);






emp1.NAME = emp.NAME;


emp1.ADDRESS = emp.ADDRESS;


emp1.GENDER = emp.GENDER;


emp1.DNAME = emp.DNAME;


emp1.ISMARRIED = emp.ISMARRIED;


obj.Entry(emp1).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.";






}


}


}


}