Progress Bar

.abc {
    width:50px;
    height:50px;
    border:5px solid #000000;
    border-top-color:red;
    border-radius:100%;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    animation:round 2s linear infinite;
    }
@keyframes round {
    from { transform:rotate(0deg)
    }
    to {
        transform:rotate(360deg)
    }
}


@{
    ViewBag.Title = "Index";
    Layout = null;
}

<link href="~/Content/test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/scripts/jquery-1.10.2.js"></script>
<h2></h2>
<div class="container">
 
    <div class="abc">
    </div>
</div>

DML operation in angularjs

web api code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    [RoutePrefix("api/Empservices")]
    public class EmpservicesController : ApiController
    {
        [HttpGet]
        public IHttpActionResult Gets()
        {
            try
            {
                using (Database1Entities obj = new Database1Entities())
                {
                    var data = obj.EMPs.ToList();
                    return Ok(data);
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }
        [HttpGet]
        [Route("Get/{EID:int}")]
        public IHttpActionResult Get(int EID)
        {
            try
            {
                using (Database1Entities obj = new Database1Entities())
                {
                    var x = obj.EMPs.SingleOrDefault(m => m.EID == EID);
                    var y = obj.EMPMAPINGs.Where(m => m.EID == EID).ToList();
                    var data = new {x.EID,x.NAME,LICD=y };
                    return Ok(data);
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }
        [HttpPost]
        public IHttpActionResult Post(EmpMapping emp1)
        {
            try
            {
                using (Database1Entities obj = new Database1Entities())
                {
                    EMP emp = new EMP();
                    emp.EID = emp1.EID;
                    emp.NAME = emp1.NAME;
                    obj.EMPs.Add(emp);
                    obj.SaveChanges();
                    obj.EMPMAPINGs.AddRange(emp1.CDETL.Select(m=>new EMPMAPING { CID=m.CID, CNAME=m.CNAME,EID=emp1.EID }));
                    obj.SaveChanges();
                    return Ok("Data Saved");
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }
        [HttpPut]
     
        public IHttpActionResult Put(EmpMapping emp1)
        {
            try
            {
                using (Database1Entities obj = new Database1Entities())
                {
                    EMP emp = obj.EMPs.Find(emp1.EID);
                    emp.EID = emp1.EID;
                    emp.NAME = emp1.NAME;
                    obj.SaveChanges();
                    obj.EMPMAPINGs.RemoveRange(obj.EMPMAPINGs.Where(m=>m.EID==emp1.EID));
                    obj.SaveChanges();
                    obj.EMPMAPINGs.AddRange(emp1.CDETL.Select(p => new EMPMAPING { EID=emp1.EID, CID=p.CID, CNAME=p.CNAME }));
                    obj.SaveChanges();
                    return Ok("Data Updated");
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }
        [HttpDelete]
        [Route("Delete/{EID:int}")]
        public IHttpActionResult Delete(int EID)
        {
            try
            {
                using (Database1Entities obj = new Database1Entities())
                {
                    obj.EMPs.Remove(obj.EMPs.Find(EID));
                    obj.SaveChanges();
                    obj.EMPMAPINGs.RemoveRange(obj.EMPMAPINGs.Where(m => m.EID == EID));
                    obj.SaveChanges();
                    return Ok("Data Deleted.");
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }
     
        [HttpDelete]
        [Route("Mdelete")]
        public IHttpActionResult Mdelete([FromUri]List<int> lst)
        {
            try
            {
                using (Database1Entities obj = new Database1Entities())
                {
                    obj.EMPs.RemoveRange(obj.EMPs.Where(m => lst.Contains(m.EID)));
                    obj.SaveChanges();
                    obj.EMPMAPINGs.AddRange(obj.EMPMAPINGs.Where(m =>lst.Contains(m.EID??0)));
                    obj.SaveChanges();
                    return Ok("Data Deleted.");
                }
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }



    }
    public class EmpMapping
    {
        public int EID { get; set; }
        public string NAME { get; set; }
        public List<CONTACT> CDETL { get; set; }
    }
 
}

Angular & HTML code :

<!DOCTYPE html>

<html>

<head>

    <title></title>

<meta charset="utf-8" />

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

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

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

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

</head>

<body ng-controller="Ctrl" ng-app="app">

    <div class="container" style="padding-top:3px">

        <div class="well">

            <form class="form-horizontal" name="frmEmp" novalidate>

                <div class="form-group " ng-class="{'has-error':frmEmp.txtEid.$invalid,'has-success':frmEmp.txtEid.$valid}">

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

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

                        <input type="text" class="form-control" ng-model="EMP.EID" name="txtEid" required />

                    </div>

                    <span class="has-error help-block" ng-show="frmEmp.txtEid.$touched && frmEmp.txtEid.$invalid">

                        Eid should not be blank.

                    </span>

                </div>

                <div class="form-group" ng-class="{'has-error':frmEmp.txtName.$invalid,'has-success':frmEmp.txtName.$valid}">

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

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

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

                    </div>

                    <span class="has-error help-block" ng-show="frmEmp.txtName.$touched && frmEmp.txtName.$invalid">

                        Name should not be blank.

                    </span>

                </div>

                <div class="form-group">

                    <label class="col-lg-4 control-label">ADD CONTACTDETAILS</label>

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

                        <a ng-click="add()" style="color:green">+</a>

                    </div>

                </div>

                <div class="form-group">

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

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

                        <table style="width:600px" class="table table-bordered table-responsive col-lg-8">

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

                                <td >

                                    <select ng-model="c.CID" ng-options="d.CID as d.CNAME for d in c.DDL" class="form-control">

                                        <option value="">Select</option>

                                    </select>

                                </td>

                                <td >

                                    <input type="text" class="form-control" ng-model="c.CNAME" />

                                </td>

                                <td>

                                    <a style="color:red" ng-click="sub(c)">-</a>

                                </td>

                            </tr>

                        </table>

                    </div>

                    </div>

                <div class="form-group">

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

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

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

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

                        <input type="button" value="Update" class="btn btn-primary" ng-click="update(frmEmp.$valid)" 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-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><input type="checkbox" ng-click="mcb()" ng-model="hcb"  /></th>

                                   <th>EID</th>

                                   <th>NAME</th>

                                   <th>ACTION</th>

                               </tr>

                           </thead>

                           <tbody>

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

                                   <td><input type="checkbox" ng-click="cb1()" value="{{c.EID}}" class="cb" /></td>

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

                               <tr ng-show="list1.length==0">

                                   <td colspan="4" style="color:red;text-align:center;font-size:larger">No Record(s)</td>

                               </tr>

                           </tbody>

                       </table>

                    </div>

                </div>

                

            </form>

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    angular.module("app", [])

    .controller("Ctrl", function ($scope, $http) {

        var n = [{ CID: 1, CNAME: "Mobile Number" }, { CID: 2, CNAME: "Land Line" }];

        var  m = [{ CID: null, CNAME: null, DDL: n }];

        $scope.add = function ()

        {

            m.push({ CID: null, CNAME: null, DDL: n });

            fill();

        }

        $scope.sub = function (s)

        {

            if (m.length > 1)

                m.splice(m.indexOf(s), 1);

        }

        function fill()

        {

            $scope.list = m;

        } fill();

        function CLR()

        {

            $scope.EMP = new emp();

           

        } CLR();

        $scope.save = function (isValid)

        {

            if (isValid)

            {

                $scope.EMP.CDETL = m;

                $http.post("http://localhost:51713/api/Empservices/Post", $scope.EMP).then(function (promise) {

                    alert(promise.data);

                    fill1();

                    CLR();

                    m = [{ CID: null, CNAME: null, DDL: n }]

                    fill();

                });

            }

           

        }

        $scope.update = function (isValid) {

            if (isValid)

            {

                $scope.EMP.CDETL = m;

                $http.put("http://localhost:51713/api/Empservices/Put", $scope.EMP).then(function (promise) {

                    alert(promise.data);

                    fill1();

                    CLR();

                    m = [{ CID: null, CNAME: null, DDL: n }]

                    fill();

                });

            }

        }

        $scope.reset = function ()

        {

            CLR();

            m = [{ CID: null, CNAME: null, DDL: n }]

            fill();

        };

        $scope.del = function (s)

        {

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

                $http.delete("http://localhost:51713/api/Empservices/Delete/"+s).then(function (promise) {

                    alert(promise.data);

                    fill1();

                });

            }

        }

        function fill1()

        {

            $http.get("http://localhost:51713/api/Empservices/Gets").then(function (promise) {

                $scope.list1= promise.data;

            });

            

        } fill1();

        $scope.edit = function (id)

        {

           

            m.splice(0);

            $http.get("http://localhost:51713/api/Empservices/Get/" + id).then(function (promise) {

                $scope.EMP = promise.data;

                angular.forEach(promise.data.LICD, function (i) {

                    m.push({ CID: i.CID, CNAME: i.CNAME, DDL: n });

                });

                

            });

        }

        $scope.mcb = function ()

        {

            

            if ($scope.hcb)

                $('.cb').prop("checked", true);

            else

                $('.cb').prop("checked", false);

        }

        $scope.cb1 = function () {

            if ($('.cb:checked').length == $('.cb').length)

                $scope.hcb = true;

            else

                $scope.hcb = false;

        }

        var p ='';

        $scope.Delall = function ()

        {

            $.each($('.cb:checked'), function (i, j) {

                p = p + 'lst=' + $(j).val() + '&';

            });

            p = p.substring(0, n.lastIndexOf('&'));

            $http.delete("http://localhost:51713/api/Empservices/Mdelete?" + p).then(function (promise) {

                alert(promise.data);

                alert(promise.status);

                alert(promise.statusText);

                alert(promise.config);

                fill1();

            });

        }

    });

    function emp()

    {

        return{

            EID:null,

            NAME:null,

            CDETL:[]

        }

    }

</script>

setup for angularjs2

{
  "compileOnSave": true,
  "compilerOptions": {
    "noStrictGenericChecks": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}