CURD opration and casecading drop down in angular js and MVC

Controller code :


using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using MvcApplication21.Models;


using System.Data.Entity;


namespace MvcApplication21.Controllers






{


public class HomeController : Controller





{


//


// GET: /Home/

public ActionResult Index()






{


return View();






}


public JsonResult Getc()






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


public JsonResult Gets(int cid)






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


[OutputCache(Duration = 0)]

public JsonResult Gete()






{


using (Database1Entities obj = new Database1Entities())






{


return Json(obj.EMPs.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.";






}


}


public JsonResult Get(int id)






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


public JsonResult Getct(int cid)






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


public JsonResult Getst(int sid)






{


using (Database1Entities obj = new Database1Entities())






{


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






}


}


}


}


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


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


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


</div>


</div>


<div class="form-group">


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


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


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


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


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


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


</select>


</div>


</div>


<div class="row">


<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 class="row">


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


<thead class="bg-primary">


<tr>


<td>EID</td>


<td>NAME</td>


<td>UPDATE</td>


<td>DELETE</td>


</tr>


</thead>


<tbody>


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


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


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


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


<td><a href="#" ng-click="del(f)">Delete</a></td>


</tr>


</tbody>


</table>


</div>


</form>

</div>

<script type="text/javascript">


function emp()






{


EID = null;

NAME = null;

ADDRESS = null;

GENDER = null;

CID = null;

SID = null;






}


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






{





var m;

$scope.EMP = new emp();

function fillc()






{


m = $http({


url: '/Home/Getc',

method:'Get'





});


m.then(function (d) {






$scope.listc = d.data;


});


} fillc();


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

fills($(this).val());






});


function fills(id) {






m = $http({


url: '/Home/Gets',






data:{cid:id},


method: 'post'





});


m.then(function (d) {






$scope.lists = d.data;


});


}


$scope.save = function ()






{


m = $http({


url: '/Home/save',

method: 'Post',






data:{emp:$scope.EMP},


});


m.then(function (d) {






alert(d.data);


fill();


clear();


});


}


$scope.update = function ()






{


m = $http({


url: '/Home/update',

method: 'Post',






data: { emp: $scope.EMP },


});


m.then(function (d) {






alert(d.data);


fill();


clear();


});


}


$scope.reset = function ()






{


clear();


}


function fill()






{


m = $http({


url: '/Home/Gete',

method: 'Get'





});


m.then(function (d) {






$scope.liste = d.data;


});


} fill();


function clear()






{


$scope.EMP = new emp();

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

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

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






} clear();


$scope.edit = function (n)






{


m = $http({


url: '/Home/Get',






data: { id: n },


method: 'post'





});


m.then(function (d) {






$scope.EMP = d.data;


fc(d.data.CID);


fs(d.data.SID);


fills(d.data.CID);


});


}


function fc(n)






{


m = $http({


url: '/Home/Getct',






data: { cid: n },


method: 'post'





});


m.then(function (d) {

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






});


}


function fs(n)






{


m = $http({


url: '/Home/Getst',






data: { sid: n },


method: 'post'





});


m.then(function (d) {

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






});


}


$scope.del = function (n)






{


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






{


m = $http({


url: '/Home/delete',

method: 'Post',






data: { emp: n },


});


m.then(function (d) {






alert(d.data);


fill();


});


}


}


});


</script>