Dynamic page in angularjs

Web API code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Http;

using WebApplication23.Models;

namespace WebApplication23.Controllers

{

    public class EmpController : ApiController

    {

        [HttpGet]

        public dynamic Gets()

        {

            using (Database1Entities obj = new Database1Entities())

            {

                try

                {

                    return obj.EMPS.Select(x => new { x.EID, x.NAME, LISTPM = obj.EMPMAPs.Where(q => q.EID == x.EID).Select(r => new pmaster { PID = r.PID.Value, NUMBER = r.NUMBER }) }).ToList();

                }

                catch (Exception ex)

                {

                    return ex.Message;

                }

               

            }

        }

        [HttpGet]

        public dynamic Get(int EID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                try

                {

                    return obj.EMPS.Select(x => new { x.EID, x.NAME, LISTPM = obj.EMPMAPs.Where(q => q.EID == x.EID).Select(r => new pmaster { PID = r.PID.Value, NUMBER = r.NUMBER }).ToList() }).SingleOrDefault(m => m.EID == EID);

                     

                }

                catch (Exception ex)

                {

                    return ex.Message;

                }

               

               

            }

        }

        [HttpPost]

        public dynamic Post(empData dm)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                 try

                {

                    obj.EMPS.Add(new EMP { EID = dm.EID, NAME = dm.NAME });

                    obj.SaveChanges();

                    obj.EMPMAPs.AddRange(dm.LISTPM.Select(x => new EMPMAP { EID = dm.EID, PID = x.PID, NUMBER = x.NUMBER }));

                    obj.SaveChanges();

                    return "Data Saved.";

                }

                catch (Exception ex)

                {

                    return ex.Message;

                }

               

            }

        }

        [HttpPut]

        public dynamic Put(empData dm)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                try

                {

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

                    emp.NAME = dm.NAME;

                    obj.SaveChanges();

                    obj.EMPMAPs.RemoveRange(obj.EMPMAPs.Where(p => p.EID == dm.EID));

                    obj.SaveChanges();

                    obj.EMPMAPs.AddRange(dm.LISTPM.Select(x => new EMPMAP { EID = dm.EID, PID = x.PID, NUMBER = x.NUMBER }));

                    obj.SaveChanges();

                    return "Data Updated.";

                }

                catch (Exception ex)

                {

                    return ex.Message;

                }

               

               

            }

        }

        [HttpDelete]

        public string Delete(int EID)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                try

                {

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

                    obj.EMPS.Remove(emp);

                    obj.SaveChanges();

                    obj.EMPMAPs.RemoveRange(obj.EMPMAPs.Where(p => p.EID == EID));

                    obj.SaveChanges();

                    return "Data Deleted.";

                }

                catch (Exception ex)

                {

                    return ex.Message;

                }

                

            }

        }

        [HttpGet]

        public List<PMASTER> Getspm(int i,int j)

        {

            using (Database1Entities obj = new Database1Entities())

            {

                return obj.PMASTERs.ToList();

            }

        }

    }

    public class empData

    {

        public int EID { get; set; }

        public string NAME { get; set; }

        public List<pmaster> LISTPM { get; set; }

    }

    public class pmaster

    {

        public int PID { get; set; }

        public string NUMBER { get; set; }

    }

}

View Code :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

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

    <script src="http://localhost:50552/Scripts/jquery-1.10.2.js"></script>

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

</head>

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

    <div class=" container">

        <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="empData.EID" />

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

                </div>

            </div>

            <div class="form-group" >

                <div class="col-md-4">&nbsp;</div>

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

                    <table>

                        <tr>

                            <td>Phone</td>

                            <td>&nbsp;</td>

                            <td style="padding-left:140px">

                                <a ng-click="addNew()" id="btnPlus"><img class="img-responsive" src="Content/plusicon.png"></a>

                            </td>

                        </tr>

                    </table>

                </div>

            </div>

            <div class="form-group" >

                <div class="col-md-4">&nbsp;</div>

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

                    <table id="ValueDiv">

                        <tr class="c">

                            <td>

                                <select name="ddl"  class="form-control ddl">

                                </select>

                            </td>

                            <td>

                                <input  type="text" class="form-control txtValue" />

                            </td>

                            <td>&nbsp;</td>

                            <td>

                                <a name="del"><img class="img-responsive" src="Content/minus-icon.png"></a>

                            </td>

                        </tr>

                    </table>

                </div>

            </div>

            <div class="form-group">

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

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

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

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

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

                </div>

            </div>

            <div class="row">

                <table class="table table-bordered table-condensed table-hover table-responsive table-striped 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>

        </form>

    </div>

</body>

</html>

<script type="text/javascript">

    angular.module("app", [])

    .controller("ctrl", function ($scope, empService) {

        var data = {};

        function CLR()

        {

            $scope.empData = new EmpData();

           

            empService.Gets().then(function (d) {

                $scope.list = d.data;

                data = d.data;

                $.each(data, function (m, n) {

                    $('.ddl').append('<option  value="' + n.PID + '">' + n.NAME + '</option>');

                });

            });

        } CLR();

      

       

        $scope.addNew = function () {

            var x = '';

            $('#ValueDiv').append("<tr class='c'><td><select name='ddl' class='form-control ddl'>" +

               $.each(data, function (m, n) {

                   

                       x = x + '<option  value="' + n.PID + '">' + n.NAME + '</option>'

                   

               })+""+x+"</select></td><td><input type='text' class='form-control txtValue' /></td><td>&nbsp;</td><td><a name='del'><img class='img-responsive' src='Content/minus-icon.png'></a></td></tr>");

        }

        $('body').on('click', "a[name='del']", function () {

            var row = $(this).parents('.c');

            if ($('.c').length > 1)

                row.remove();

        });

        $scope.save = function ()

        {

            var m = [];

            $('#ValueDiv').find('tr').each(function (i, j) {

               

                    m.push({ PID: $(j).find(".ddl").val(), NUMBER: $(j).find(".txtValue").val() });

              

                

            });

            $scope.empData.LISTPM = m;

            empService.Save($scope.empData).then(function (d) {

                alert(d.data);

                fill();

                CLR();

            });

        }

        $scope.update = function () {

            var m = [];

            $('#ValueDiv').find('tr').each(function (i, j) {

                m.push({ PID: $(j).find(".ddl").val(), NUMBER: $(j).find(".txtValue").val() });

            });

            $scope.empData.LISTPM = m;

            empService.Update($scope.empData).then(function (d) {

                alert(d.data);

                fill();

                CLR();

            });

        }

        function fill()

        {

            empService.Get().then(function (d) {

                $scope.liste = d.data;

            });

        } fill();

        $scope.edit = function (s)

        {

            empService.Get1(s).then(function (d) {

                $scope.empData = d.data;

                $('#ValueDiv').empty();

                var x = '';

                $.each(d.data.LISTPM, function (i, j) {

                   

                    $('#ValueDiv').append("<tr class='c'><td><select name='ddl' class='form-control ddl'>" +

            $.each(data, function (m, n) {

                if (n.PID==j.PID)

                    x = x + '<option selected="selected"  value="' + n.PID + '">' + n.NAME + '</option>';

                else

                    x = x + '<option   value="' + n.PID + '">' + n.NAME + '</option>';

            }) + "" + x + "</select></td><td><input type='text' value='" + j.NUMBER + "' class='form-control txtValue' /></td><td>&nbsp;</td><td><a name='del'><img class='img-responsive' src='Content/minus-icon.png'></a></td></tr>");

                });

            });

        }

        $scope.reset = function ()

        {

            CLR();

        }

        $scope.del = function (s) {

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

            {

                empService.Delete(s).then(function (d) {

                    alert(d.data);

                    fill();

                });

            }

        }

    })

    .service("empService", function ($http) {

        this.Gets = function () {

            return $http.get("http://localhost:50552/api/Emp/Getspm?i=" + 1 + "&j=" + 2);

        }

        this.Save = function (emp) {

            return $http.post("http://localhost:50552/api/Emp/Post", emp);

        }

        this.Update = function (emp) {

            return $http.put("http://localhost:50552/api/Emp/Post", emp);

        }

        this.Get = function ()

        {

            return $http.get("http://localhost:50552/api/Emp/Gets");

        }

        this.Get1 = function (S)

        {

            return $http.get("http://localhost:50552/api/Emp/Get?EID="+S);

        }

        this.Delete = function (S) {

            return $http.delete("http://localhost:50552/api/Emp/Delete?EID=" + S);

        }

    });

    function EmpData()

    {

        return {

            EID: null,

            NAME: null,

            LISTPM: {}

        }

    }

</script>