Use of MVVM in MVC & AngularJs

Controller Code :
using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using MvcApplication13.Models;


using System.Data.Entity;


namespace MvcApplication13.Controllers






{


public class HomeController : Controller





{





public ActionResult Index()






{


return View();






}


public JsonResult Get()






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


[OutputCache(Duration=0)]

public JsonResult Gets()






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


public JsonResult GetById(int id)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.EMPs.Single(m=>m.EID==id), JsonRequestBehavior.AllowGet);






}


}


public JsonResult Getc(int id)






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.COUNTRies.Single(m=>m.CID==id).CNAME, 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 Code :





　


<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-1.8.2.min.js"></script>

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

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


<form class="form-horizontal">


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


<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="control-label col-lg-3">COUNTRY</label>


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


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


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


</select>


</div>


</div>


<div class="row">


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


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


<input type="button" value="Save" class="btn bg-primary" ng-click="save()" />


<input type="button" value="Update" class="btn bg-primary" ng-click="update()" />


<input type="button" value="Reset" class="btn bg-primary" ng-click="reset()" />


</div>


</div>


</form>


<div class="row">


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


<thead class="bg-primary">


<tr>


<th>EID</th>


<th>NAME</th>


<th>ADDRESS</th>


<th>UPDATE</th>


<th>DELETE</th>


</tr>


</thead>


<tbody>


<tr ng-repeat="c in liste">


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


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


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


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


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


</tr>


</tbody>


</table>


</div>

</div>

<script type="text/javascript">


function EMP()






{


EID = null;

NAME = null;

ADDRESS = null;

GENDER = null;

CID = null;






}


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






{


$scope.emp = new EMP();

var m;






m = $http({


url: '/Home/Get',

method:'Get'





});


m.then(function (d) {






$scope.list = d.data;


});


$scope.save = function ()






{


m = $http({


url: '/Home/Save',

method: 'Post',






data: {emp:$scope.emp}


});


m.then(function (d) {






alert(d.data);


fill();


clr();


});


}


$scope.edit = function (n)






{


m = $http({


url: '/Home/GetById',

method: 'Post',






data: { id:n }


});


m.then(function (d) {






$scope.emp = d.data;


fillc(d.data.CID);


});








}


$scope.update = function () {






m = $http({


url: '/Home/Update',

method: 'Post',






data: { emp: $scope.emp }


});


m.then(function (d) {






alert(d.data);


fill();


clr();


});


}


$scope.del = function (n) {






m = $http({


url: '/Home/Delete',

method: 'Post',






data: { emp: n }


});


m.then(function (d) {






alert(d.data);


fill();


});


}





function fill()






{


m = $http({


url: '/Home/Gets',

method:'Get'





});


m.then(function (d) {






$scope.liste = d.data;


});


} fill();


function clr()






{


$scope.emp = new EMP();

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

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






}


$scope.reset = function ()






{


clr();


}


function fillc(d)






{


var mm = $http({

url: '/Home/Getc',

method: 'Post',






data: { id: d }


});


mm.then(function (d) {

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






});


}


});


</script>