Dynamic page in MVC

Controller Code :
 public JsonResult GetQuestion(int Type)
        {
            return Json(_questionnaireManagementService.GetAllQuestionnaireManagement(0, int.MaxValue, Type).Where(n => n.StatusId == 1).OrderBy(p => p.Id).Select(m => new { m.Id, Question = m.Questions, ControlType = m.ControlTypeId, Value = _questionnaireManagementService.GetAllControlTypeMapping(m.Id).Select(n=>n.Value) }), JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult PostAnswer(int equipmentId, List<AnswerList> lst, string status,int sid,int wid,string fromDate,string fromTime,string toDate,string toTime)
        {
            try
            {
                Test test = new Test();
                test.EquipmentId = equipmentId;
                test.Status = status;
                test.PerformedBy = EngineContext.Current.Resolve<IWorkContext>().CurrentCustomer.GetFullName();
                test.TestDate = DateTime.UtcNow;
                _testService.InsertTest(test);
                var m = _testService.GetTests();
                if (m.Count == 0)
                    TestId = 1;
                else
                    TestId = (m.OrderByDescending(t => t.Id)).ToList()[0].Id;
                _testDetailsService.InsertTestDetails(TestId, lst);
                EquipmentLocation equipmentLocation = new EquipmentLocation();
                equipmentLocation.EquipmentId = equipmentId;
                Equipment equipment = _equipmentService.GetEquipmentAsPerId(equipmentId);
                equipmentLocation.ModelId = equipment.ModelID;
                equipmentLocation.ManufacturerId = equipment.ManufacturerID;
                equipmentLocation.EquipmentStatusID = sid;
                equipmentLocation.IsWarehouse = true;
                equipmentLocation.WarehouseId = wid;
                equipmentLocation.FromDate = Convert.ToDateTime(fromDate);
                equipmentLocation.FromTime = fromTime;
                equipmentLocation.ToDate = Convert.ToDateTime(toDate);
                equipmentLocation.ToTime = toTime;
                equipmentLocation.IsDeleted = false;
                int id = _equipmentLocationService.InsertEquipmentLocation(equipmentLocation);
                TempData["isFromBarcodeScanning"] = true;
                return Json("1",JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message, JsonRequestBehavior.AllowGet);
            }
         
        }

View Code :
<form id="frmBenchTest" name="frmBenchTest">
    <div class="form-group">

        <div id="dvbench" class="content">
            <input type="hidden" id="EQID" />
            <table id="tb" border="0" cellpadding="0" cellspacing="0" class="adminContent table-responsive benchQustable table-striped"></table>
            <div class="options submitStyle">
                <input type="button" value="Pass" class="k-button padd-left-right" id="btnSave" />
                <input type="button" id="btnCancel007" value="Fail" class="k-button k-button-cancel padd-left-right" />
            </div>

        </div>
    </div>
</form>
java script code :
For open.
<script>
$('#tb').empty().append('<thead class="k-grid-header" ><tr class="" ><th class="k-header" style="width:80%;"><input type="hidden" name="WID"/><input type="hidden" name="FD"/><input type="hidden" name="FT"/><input type="hidden" name="TD"/><input type="hidden" name="TT"/>Question</th><th class="k-header" style="width:20%;">Answer Type</th></tr></thead>');
            $.ajax({
                url: '/Barcode/GetQuestion',
                type: 'Get',
                data: { Type: 3 },
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].ControlType == 1)
                        {
                            var x = '';
                            $('#tb').append('<tr><td>' + data[i].Question + '</td><td><input type="hidden" name="hf" value="' + data[i].Id + '" /><input type="hidden" name="hfct" value="' + data[i].ControlType + '" /><select name="ddl"><option value="0">Select</option>' + $.each(data[i].Value, function (m, n) {
                               x=x+ '<option value="'+n+'">'+n+'</option>'
                            })
                                +''+x+'</select><span class="field-validation-error" name="sps"></span></td></tr>');
                        }
                        if (data[i].ControlType == 2)
                            $('#tb').append('<tr><td>' + data[i].Question + '</td><td><input type="hidden" name="hf" value="' + data[i].Id + '" /><input type="hidden" name="hfct" value="' + data[i].ControlType + '" /><input type="text" name="txt"  class="form-control"><span class="field-validation-error"  name="spt"></span></td></tr>');
                        if (data[i].ControlType == 3)
                            $('#tb').append('<tr><td>' + data[i].Question + '</td><td><input type="hidden" name="hf" value="' + data[i].Id + '" /><input type="hidden" name="hfct" value="' + data[i].ControlType + '" /> <textarea name="txtarea"  class="form-control"></textarea><span class="field-validation-error"  name="spta"></span></td></tr>');
                        if (data[i].ControlType == 4)
                            $('#tb').append('<tr class="k-alt" ><td>' + data[i].Question + '</td><td><input type="hidden" name="hf" value="' + data[i].Id + '" /><input type="hidden" name="hfct" value="' + data[i].ControlType + '" /><input type="text" name="txtc" ><span  name="spc" class="field-validation-error"></span></td></tr>');
                        if (data[i].ControlType == 5)
                            $('#tb').append('<tr class="k-alt" ><td>' + data[i].Question + '</td><td><input type="hidden" name="hf" value="' + data[i].Id + '" /><input type="hidden" name="hfct" value="' + data[i].ControlType + '" /><input type="text" name="txttime" ><span  name="spct" class="field-validation-error"></span></td></tr>');

                    }


                }
            });
 $('#PerformBenchTest').on('click', '#btnPerformBenchTestSave', function () {
                    var mark = 0;
                    $('#WarehouseIdm').text('');
                    $('#FromDatem').text('');
                    $('#FromTimem').text('');
                    $('#Todatem').text('');
                    if ($('#WarehouseId').val() == 0)
                    {
                        $('#WarehouseIdm').text('Please select a warehouse');
                        mark = 1;
                    }
                    if ($('#StartDate').val() == "")
                    {
                        $('#FromDatem').text('From date should not be blank.');
                        mark = 1;
                    }
                    if ($('#StartTime').val() == "")
                    {
                        $('#FromTimem').text('From time should not be blank.');
                        mark = 1;
                    }
                    if (Date.parse($('#StartDate').val()) > Date.parse($('#EndDate').val()))
                    {
                        alert('sankar');
                        $('#Todatem').text('From_date should be less than to_date.');
                        mark = 1;
                    }
                    if (mark == 1)
                        return false;
                    else
                    {
                        var window007 = $('#BenchTestdv');
                        if (!window007.data('kendoWindow')) {

                            window007.kendoWindow({
                                modal: true,
                                title: 'Bench Test Questionnaire',
                                actions: ['Close'],
                                scrollable: true,
                                draggable: false,
                                resizable: false,
                                visible: false,
                            });
                            $('#BenchTestdv').parent('.k-window').addClass('responsivewidth-Bench');
                        }
                        $('#frmBenchTest').trigger("reset");
                        $('.field-validation-error').empty();
                        $('.field-validation-valid').empty();
                        window007.data('kendoWindow').center().open();
                        $('#tb').find('tr').each(function (i, j) {
                            $(j).find('td').find("input[name=txtc]").kendoDatePicker();
                        });
                        $('#tb').find('tr').each(function (i, j) {
                            $(j).find('td').find("input[name=txttime]").kendoTimePicker({ format: "HH:mm" });
                        });
                        $('#tb').find('tr th input[name=WID]').val($('#WarehouseId').val());
                        $('#tb').find('tr th input[name=FD]').val($('#StartDate').val());
                        $('#tb').find('tr th input[name=FT]').val($('#StartTime').val());
                        $('#tb').find('tr th input[name=TD]').val($('#EndDate').val());
                        $('#tb').find('tr th input[name=TT]').val($('#EndTime').val());
                    }
            });
        });

</script>
For save
<script type="text/javascript">
    $(function () {
        var Wid, fd, ft, td, tt;
        function save(s, Sid) {
            var answer = "";
            var datasave = [];
            var mark = 0;
            $('#tb').find('tr td').find("[name='spt']").text('');
            $('#tb').find('tr td').find("[name='spc']").text('');
            $('#tb').find('tr td').find("[name='sps']").text('');
            $('#tb').find('tr td').find("[name='spta']").text('');
            $('#tb').find('tr td').find("[name='spct']").text('');
            $('#tb').find('tr').each(function (i, j) {
                if (i != 0) {
                    if ($(j).find('td').find("input[name='txt']").val() == "") {
                        $(j).find('td').find("[name='spt']").text('This field should be not blank.');
                        mark = 1;
                    }
                    if ($(j).find('td').find("[name='txtarea']").val() == "") {
                        $(j).find('td').find("[name='spta']").text('This field  should not be blank.');
                        mark = 1;
                    }
                    if ($(j).find('td').find("input[name='txtc']").val() == "") {
                        $(j).find('td').find("[name='spc']").text('This date field should not be blank.');
                        mark = 1;
                    }
                    if ($(j).find('td').find("input[name='txttime']").val() == "") {
                        $(j).find('td').find("[name='spct']").text('This time field should not be blank.');
                        mark = 1;
                    }
                    if ($(j).find('td').find("select[name='ddl']").val() == 0) {
                        $(j).find('td').find("[name='sps']").text('Please select a answer from the dropdown.');
                        mark = 1;
                    }
                    if ($(j).find('td').find("input[name='hfct']").val() == 1)
                        answer = $(j).find('td').find("select[name='ddl']").val();
                    else if ($(j).find('td').find("input[name='hfct']").val() == 2)
                        answer = $(j).find('td').find("input[name='txt']").val();
                    else if ($(j).find('td').find("input[name='hfct']").val() == 3)
                        answer = $(j).find('td').find("[name='txtarea']").val();
                    else if ($(j).find('td').find("input[name='hfct']").val() == 4)
                        answer = $(j).find('td').find("[name='txtc']").val();
                    else if ($(j).find('td').find("input[name='hfct']").val() == 5)
                        answer = $(j).find('td').find("[name='txttime']").val();
                    datasave.push({ QuestionId: $(j).find('td').find("input[name='hf']").val(), ANSWER: answer });
                }
            });

            if (mark == 1)
                return false;
            else {

                $.ajax({
                    url: '/Barcode/PostAnswer',
                    data: { equipmentId: $('#landingPageEquipmentId').val(), lst: datasave, status: s, sid: Sid, wid: Wid, fromDate: fd, fromTime: ft, toDate: td, toTime: tt },
                    type: 'Post',
                    success: function (data) {
                        if (data == 1) {
                            $('#frmBenchTest').trigger("reset");
                            $('.field-validation-error').empty();
                            $('.field-validation-valid').empty();
                            window.location.href = "/Admin/Equipment/ListLocation/" + $('#landingPageEquipmentId').val();
                        }
                        else
                            alert(data);

                    }
                });
            }
        }

        $('#btnSave').click(function () {

            Wid = $('#tb').find('tr th').find("[name='WID']").val();
            fd = $('#tb').find('tr th').find("[name='FD']").val();
            ft = $('#tb').find('tr th').find("[name='FT']").val();
            td = $('#tb').find('tr th').find("[name='TD']").val();
            tt = $('#tb').find('tr th').find("[name='TT']").val();
            save('Bench test Successful', 12);

        });
        $('#btnCancel007').click(function () {
            Wid = $('#tb').find('tr th').find("[name='WID']").val();
            fd = $('#tb').find('tr th').find("[name='FD']").val();
            ft = $('#tb').find('tr th').find("[name='FT']").val();
            td = $('#tb').find('tr th').find("[name='TD']").val();
            tt = $('#tb').find('tr th').find("[name='TT']").val();
            save('Bench test Failed', 11);
        });
    });
</script>

File control & DML operation in angular js

Controller Code :

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication39.Models;

namespace WebApplication39.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Save(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
             
                var file = Request.Files[0];
                file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
                emp.PATH = Path.GetFileName(file.FileName);
                obj.Entry(emp).State = EntityState.Added;
                obj.SaveChanges();
                return Json("Data Saved.", JsonRequestBehavior.AllowGet);
            }
         
        }
        [HttpPost]
        public JsonResult Update(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {

                var file = Request.Files[0];
                file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
                emp.PATH = Path.GetFileName(file.FileName);
                obj.Entry(emp).State = EntityState.Modified;
                obj.SaveChanges();
                return Json("Data Updated.", JsonRequestBehavior.AllowGet);
            }

        }
        [HttpGet]
        public JsonResult Delete(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return Json("Data Deleted.", JsonRequestBehavior.AllowGet);
            }
        }
        [HttpGet]
        [OutputCache(Duration=0)]
        public JsonResult Gets()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.ToList(),JsonRequestBehavior.AllowGet);
            }
        }
        [HttpGet]
        public JsonResult Get(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.SingleOrDefault(m=>m.EID==EID), JsonRequestBehavior.AllowGet);
            }
        }
    }
}

View Code :

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Service.js"></script>

<h2>Jay Jagannath...</h2>
<div class="container" ng-app="app" ng-controller="ctr">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-4">EID</label>
            <div class="col-lg-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">NAME</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EMP.NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">PHOTE</label>
            <div class="col-lg-4">
                <img id="ph" src="#" alt="Upload Image" height="100" width="100" />
                <input type="file" class="form-control" ng-model="EMP.PATH" id="PATH" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
               <input type="button" value="Save" class="btn btn-primary" ng-click="save()" style="width:80px" />
                <input type="button" value="Update" class="btn btn-primary" ng-click="update()" style="width:80px" />
                <input type="button" value="Reset" class="btn btn-primary" ng-click="reset()" style="width:80px" />
            </div>
        </div>
        <div class="row">
            <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>PHOTO</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="c in list">
                        <td>{{c.EID}}</td>
                        <td>{{c.NAME}}</td>
                        <td><img height="50" width="50" src="~/Image/{{c.PATH}}" /></td>
                        <td>
                            <a ng-click="edit(c)">Edit</a>|<a ng-click="del(c)">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>

angular code :
/// <reference path="jquery-1.10.2.js" />
/// <reference path="angular.js" />
angular.module("app", [])
.controller("ctr", function ($scope, EmpService) {
    function CLR()
    {
        $scope.EMP = new emp();
        $('#ph').attr('src', '');
        $('#PATH').val('');
        $('#tb').focus();
    } CLR();
    function fill()
    {
        EmpService.Gets().then(function (d) {
            $scope.list = d.data;
        });
    } fill();
    $scope.save = function ()
    {
        var formData = new FormData();
        var file = document.getElementById("PATH").files[0];
        formData.append("PATH", file);
        formData.append("EID", $scope.EMP.EID);
        formData.append("NAME", $scope.EMP.NAME);
        EmpService.Save(formData).then(function (d) {
            alert(d.data);
            CLR();
            fill();
        });
    }
    $scope.update = function () {
        var formData = new FormData();
        var file = document.getElementById("PATH").files[0];
        formData.append("PATH", file);
        formData.append("EID", $scope.EMP.EID);
        formData.append("NAME", $scope.EMP.NAME);
        EmpService.Update(formData).then(function (d) {
            alert(d.data);
            CLR();
            fill();
        });
    }
    $scope.del = function (s)
    {
        if (confirm('Do you want to delte it ?'))
        {
            EmpService.Delete(s.EID).then(function (d) {
                alert(d.data);
                fill();
            });
        }
     
    }
    $scope.edit = function (s)
    {
        EmpService.Get(s.EID).then(function (d) {
            $scope.EMP = d.data;
            $('#ph').attr('src', '/Image/' + d.data.PATH);
            $('#PATH').val(d.data.PATH);
        });
     
    }
$scope.reset = function ()
    {
        CLR();
    }
    $('#PATH').change(function () {
        DispyaImg(this);
    });
    function DispyaImg(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#ph').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

})
.factory("EmpService", function ($http) {
    var fac = {};
    fac.Save=function(EMP)
    {
        var config = {
            headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8;'
            }
        }
        return $http.post("/Home/Save", EMP, config);
    }
    fac.Update = function (EMP) {
     
        var config = {
            headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8;'
            }
        }
        return $http.post("/Home/Update", EMP, config);
    }
    fac.Delete = function (EID)
    {
     
        return $http.get("/Home/Delete?EID="+EID);
    }
    fac.Gets = function ()
    {
        return $http.get("/Home/Gets");
    }
    fac.Get = function (EID)
    {
        return $http.get("/Home/Get?EID="+EID);
    }
    return fac;
});
function emp()
{
    return {
        EID: null,
        NAME: null,
        PATH:null
    }
}

File control & DML operation in angular js

Controller Code :

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication39.Models;

namespace WebApplication39.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Save(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
             
                var file = Request.Files[0];
                file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
                emp.PATH = Path.GetFileName(file.FileName);
                obj.Entry(emp).State = EntityState.Added;
                obj.SaveChanges();
                return Json("Data Saved.", JsonRequestBehavior.AllowGet);
            }
         
        }
        [HttpPost]
        public JsonResult Update(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {

                var file = Request.Files[0];
                file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
                emp.PATH = Path.GetFileName(file.FileName);
                obj.Entry(emp).State = EntityState.Modified;
                obj.SaveChanges();
                return Json("Data Updated.", JsonRequestBehavior.AllowGet);
            }

        }
        [HttpGet]
        public JsonResult Delete(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return Json("Data Deleted.", JsonRequestBehavior.AllowGet);
            }
        }
        [HttpGet]
        [OutputCache(Duration=0)]
        public JsonResult Gets()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.ToList(),JsonRequestBehavior.AllowGet);
            }
        }
        [HttpGet]
        public JsonResult Get(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.SingleOrDefault(m=>m.EID==EID), JsonRequestBehavior.AllowGet);
            }
        }
    }
}

View Code :

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Service.js"></script>

<h2>Jay Jagannath...</h2>
<div class="container" ng-app="app" ng-controller="ctr">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-4">EID</label>
            <div class="col-lg-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">NAME</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EMP.NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">PHOTE</label>
            <div class="col-lg-4">
                <img id="ph" src="#" alt="Upload Image" height="100" width="100" />
                <input type="file" class="form-control" ng-model="EMP.PATH" id="PATH" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
               <input type="button" value="Save" class="btn btn-primary" ng-click="save()" style="width:80px" />
                <input type="button" value="Update" class="btn btn-primary" ng-click="update()" style="width:80px" />
                <input type="button" value="Reset" class="btn btn-primary" ng-click="reset()" style="width:80px" />
            </div>
        </div>
        <div class="row">
            <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>PHOTO</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="c in list">
                        <td>{{c.EID}}</td>
                        <td>{{c.NAME}}</td>
                        <td><img height="50" width="50" src="~/Image/{{c.PATH}}" /></td>
                        <td>
                            <a ng-click="edit(c)">Edit</a>|<a ng-click="del(c)">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>

angular code :
/// <reference path="jquery-1.10.2.js" />
/// <reference path="angular.js" />
angular.module("app", [])
.controller("ctr", function ($scope, EmpService) {
    function CLR()
    {
        $scope.EMP = new emp();
        $('#ph').attr('src', '');
        $('#PATH').val('');
        $('#tb').focus();
    } CLR();
    function fill()
    {
        EmpService.Gets().then(function (d) {
            $scope.list = d.data;
        });
    } fill();
    $scope.save = function ()
    {
        var formData = new FormData();
        var file = document.getElementById("PATH").files[0];
        formData.append("PATH", file);
        formData.append("EID", $scope.EMP.EID);
        formData.append("NAME", $scope.EMP.NAME);
        EmpService.Save(formData).then(function (d) {
            alert(d.data);
            CLR();
            fill();
        });
    }
    $scope.update = function () {
        var formData = new FormData();
        var file = document.getElementById("PATH").files[0];
        formData.append("PATH", file);
        formData.append("EID", $scope.EMP.EID);
        formData.append("NAME", $scope.EMP.NAME);
        EmpService.Update(formData).then(function (d) {
            alert(d.data);
            CLR();
            fill();
        });
    }
    $scope.del = function (s)
    {
        if (confirm('Do you want to delte it ?'))
        {
            EmpService.Delete(s.EID).then(function (d) {
                alert(d.data);
                fill();
            });
        }
     
    }
    $scope.edit = function (s)
    {
        EmpService.Get(s.EID).then(function (d) {
            $scope.EMP = d.data;
            $('#ph').attr('src', '/Image/' + d.data.PATH);
            $('#PATH').val(d.data.PATH);
        });
     
    }
$scope.reset = function ()
    {
        CLR();
    }
    $('#PATH').change(function () {
        DispyaImg(this);
    });
    function DispyaImg(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#ph').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

})
.factory("EmpService", function ($http) {
    var fac = {};
    fac.Save=function(EMP)
    {
        var config = {
            headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8;'
            }
        }
        return $http.post("/Home/Save", EMP, config);
    }
    fac.Update = function (EMP) {
     
        var config = {
            headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8;'
            }
        }
        return $http.post("/Home/Update", EMP, config);
    }
    fac.Delete = function (EID)
    {
     
        return $http.get("/Home/Delete?EID="+EID);
    }
    fac.Gets = function ()
    {
        return $http.get("/Home/Gets");
    }
    fac.Get = function (EID)
    {
        return $http.get("/Home/Get?EID="+EID);
    }
    return fac;
});
function emp()
{
    return {
        EID: null,
        NAME: null,
        PATH:null
    }
}

DML operation in angular js using factory

Factory

A factory is a simple function which allows you to add some logic before creating the object. It returns the created object.

web api code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using WebApplication38.Models;

namespace WebApplication38.Controllers

{

    public class ValuesController : ApiController

    {

        [HttpGet]

        public List<EMP> Gets()

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.EMPs.ToList();

            }

        }

        [HttpGet]

        public EMP Get(int EID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.EMPs.SingleOrDefault(m => m.EID == EID);

            } 

        }

        [HttpPost]

        public string Post(EMP emp)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                obj.EMPs.Add(emp);

                obj.SaveChanges();

                return "Data Saved.";

            }

        }

        [HttpPut]

        public string Put(EMP emp)

        {

            using (Database1Entities obj = new Database1Entities())

            {

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

                emp1.NAME = emp.NAME;

                obj.SaveChanges();

                return "Data Updated.";

            }

        }

        [HttpDelete]

        public string Mdelete([FromUri]List<int> lst)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                obj.EMPs.RemoveRange(obj.EMPs.Where(m => lst.Contains(m.EID)));

                obj.SaveChanges();

                return "Data Deleted.";

            }

        }

        [HttpGet]

        public string Delete(int EID,int i)

        {

            using (Database1Entities obj = new Database1Entities())

            {

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

                obj.EMPs.Remove(emp1);

                obj.SaveChanges();

                return "Data Deleted.";

            }

        }

    }

}

View Code :

@{

    ViewBag.Title = "Index";

}

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

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

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

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

<h2>Jay Jagannath...</h2>

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

    <form class="form-horizontal">

        <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="EMP.EID" id="tb" />

            </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="EMP.NAME" />

            </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" style="width:80px" class="btn btn-primary" ng-click="da()" />

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

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

                <thead class="bg-primary">

                    <tr>

                        <th><input type="checkbox" id="hcb" /></th>

                        <th>EID</th>

                        <th>NAME</th>

                        <th>UPDATE</th>

                        <th>DELETE</th>

                    </tr>

                </thead>

                <tbody>

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

                        <td><input type="checkbox" class="cb" value="{{c.EID}}" /></td>

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

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

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

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

                    </tr>

                </tbody>

            </table>

        </div>

    </form>

</div>

Angular Js Code :(service.js)

/// <reference path="jquery-1.9.1.js" />

/// <reference path="angular.js" />

angular.module("app", [])

.controller("ctr", function ($scope, EmpService) {

    function clr() {

        $scope.EMP = new empvm();

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

    } clr();

    function fill()

    {

        EmpService.GetAll().then(function (d) {

            $scope.list = d.data;

        });

    } fill();

    $scope.reset = function ()

    {

        clr();

    }

    $scope.da = function ()

    {

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

        {

            var n = '';

            angular.forEach($(".cb:checked"), function (i, j) {

                n = n + 'lst=' + $(i).val() + '&';

            });

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

            EmpService.Mdelete(n).then(function (d) {

                alert(d.data);

                fill();

            });

        }

    }

    $scope.save = function ()

    {

        EmpService.Save($scope.EMP).then(function (d) {

            alert(d.data);

            clr();

            fill();

        });

    }

    $scope.edit = function (s)

    {

        EmpService.Get(s.EID).then(function (d) {

            $scope.EMP = d.data;

        });

    }

    $scope.update = function () {

        EmpService.Update($scope.EMP).then(function (d) {

            alert(d.data);

            clr();

            fill();

        });

    }

    $scope.del = function (s)

    {

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

        {

            EmpService.Delete(s.EID).then(function (d) {

                alert(d.data);

                fill();

            });

        }

    }

    $('#hcb').click(function () {

        if ($('#hcb').is(":checked"))

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

        else

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

    });

    $('body').on("click", '.cb', function () {

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

            $('#hcb').prop("checked", true);

        else

            $('#hcb').prop("checked", false);

    });

})

.factory("EmpService", function ($http) {

    var fac = {};

    fac.GetAll = function () {

        return $http.get('http://localhost:63386/api/Values');

    }

    fac.Get = function (EID) {

        return $http.get('http://localhost:63386/api/Values/Get?EID=' + EID);

    }

    fac.Save = function (EMP) {

        return $http.post('http://localhost:63386/api/Values/Post', EMP);

    }

    fac.Update = function (EMP) {

        return $http.put('http://localhost:63386/api/Values/Put', EMP);

    }

    fac.Delete = function (EID) {

        return $http.get('http://localhost:63386/api/Values/Delete?EID=' + EID+"&i="+1);

    }

    fac.Mdelete = function (lst) {

        return $http.delete('http://localhost:63386/api/Values/Mdelete?' + lst);

    }

    return fac;

}

);

function empvm()

{

    return {

        EID: null,

        NAME:null

    }

}

When to use

It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.