CURD operation in angularjs using list of checkboxes

I have 3 models those are

API  Code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using MvcApplication6.Models;

using System.Data.Entity;

namespace MvcApplication6.Controllers

{

    public class ValuesController : ApiController

    {

        [HttpGet]

        public List<EMP> Gets(int i)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.EMPs.ToList();

            }

        }

        [HttpGet]

        public List<DEPT> Getd()

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.DEPTs.ToList();

            }

        }

        [HttpGet]

        public EMPMAPING Get(int EID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                EMPMAPING emp = new EMPMAPING();

                var mp = obj.EMPs.SingleOrDefault(m => m.EID == EID);

                emp.EID = mp.EID;

                emp.NAME = mp.NAME;

                emp.IDS = obj.MAPPINGs.Where(m => m.EID == EID).Select(n => n.DID.Value).ToList();

                return emp;

            }

        }

        [HttpPost]

        public string Post(EMPMAPING eMPMAPING)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                EMP emp = new EMP();

                emp.EID = eMPMAPING.EID;

                emp.NAME = eMPMAPING.NAME;

                obj.EMPs.Add(emp);

                obj.SaveChanges();

                for (int i = 0; i < eMPMAPING.IDS.Count(); i++)

                {

                    MAPPING mp = new MAPPING();

                    mp.EID = eMPMAPING.EID;

                    mp.DID = Convert.ToInt32(eMPMAPING.IDS[i]);

                    obj.MAPPINGs.Add(mp);

                    obj.SaveChanges();

                }

                return "Data Saved.";

            }

        }

        [HttpPut]

        public string Put(EMPMAPING eMPMAPING)

        {

            using (Database1Entities obj = new Database1Entities())

            {

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

                emp.NAME = eMPMAPING.NAME;

                obj.SaveChanges();

                for (int i = 0; i < eMPMAPING.IDS.Count; i++)

                {

                    int? j = Convert.ToInt32(eMPMAPING.IDS[i]);

                    var n = obj.MAPPINGs.FirstOrDefault(m => m.DID == j && m.EID == eMPMAPING.EID);

                    if(n!=null)

                    obj.MAPPINGs.Remove(n);

                    obj.SaveChanges();

                }

                for (int i = 0; i < eMPMAPING.IDS.Count(); i++)

                {

                    MAPPING mp = new MAPPING();

                    mp.EID = eMPMAPING.EID;

                    mp.DID = Convert.ToInt32(eMPMAPING.IDS[i]);

                    obj.MAPPINGs.Add(mp);

                    obj.SaveChanges();

                }

                return "Data Updated";

            }

        }

        [HttpDelete]

        public string Delete(int EID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

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

                obj.EMPs.Remove(emp);

                obj.SaveChanges();

                var x=obj.MAPPINGs.Where(m => m.EID == EID).ToList();

                for (int i = 0; i <x.Count; i++)

                {

                    int k=x[i].ID;

                    obj.MAPPINGs.Remove(obj.MAPPINGs.SingleOrDefault(n => n.ID ==k ));

                    obj.SaveChanges();

                }

               

                return "Data Deleted";

            }

        }

    }

    public class EMPMAPING

    {

        public int EID { get; set; }

        public string NAME { get; set; }

        public List<int> IDS { get; set; }

    }

}

View Code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title></title>
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/checklist-model.js"></script>
</head>
<body ng-controller="ctr">
    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-lg-4 control-label">EID</label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" ng-model="EMPMAPING.EID" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">NAME</label>
                <div class="col-lg-4">
                    <input type="text" class="form-control" ng-model="EMPMAPING.NAME" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label">DEPARTMENT NAME</label>
                <div class="col-lg-4">
                    <label ng-repeat="c in list">
                        <input type="checkbox" checklist-model="EMPMAPING.IDS" checklist-value="c.DID" /> {{c.DNAME}}<br />
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4 control-label"></label>
                <div class="col-lg-4">
                    <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-4 control-label"></label>
                <div class="col-lg-4">
                    <table class="table table-bordered table-condensed table-hover table-responsive table-striped">
                        <thead class="bg-primary">
                            <tr>
                                <th>EID</th>
                                <th>NAME</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="c in liste">
                                <td>{{c.EID}}</td>
                                <td>{{c.NAME}}</td>
                                <td><a ng-click="edit(c.EID)">Edit</a>|<a ng-click="del(c.EID)">Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
<script type="text/javascript">
    angular.module("app", ['checklist-model'])
    .controller("ctr", function ($scope, $http) {
        function CLR()
        {
            $scope.EMPMAPING = new emp();
        } CLR();
     
        function fill()
        {
            $http.get("http://localhost:56131/api/Values/Gets?i="+1).then(function (d) {
                $scope.liste = d.data;
            });
        } fill();
        $http.get("http://localhost:56131/api/Values/Getd").then(function (d) {
            $scope.list = d.data;
        });
        $scope.reset = function ()
        {
            CLR();
        }
        $scope.save = function ()
        {
            $http.post("http://localhost:56131/api/Values/Post",$scope.EMPMAPING).then(function (d) {
                alert(d.data);
                fill();
                CLR();
            });
        }
        $scope.update = function () {
            $http.put("http://localhost:56131/api/Values/Put", $scope.EMPMAPING).then(function (d) {
                alert(d.data);
                fill();
                CLR();
            });
        }
        $scope.edit = function (s)
        {
            $http.get("http://localhost:56131/api/Values/Get?EID="+s).then(function (d) {
                $scope.EMPMAPING = d.data;
            });
        }
        $scope.del = function (s)
        {
            if(confirm('Do you want to delete it?'))
            $http.delete("http://localhost:56131/api/Values/Delete?EID=" + s).then(function (d) {
                alert(d.data);
                fill();
            });
        }
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            IDS:[]
        }
    }
</script>