Friday 10 February 2017

DML oprations in Angular js


Api code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class EmpserviceController : ApiController
    {
        [HttpGet]
        public List<EMP> Gets()
        {
            using (Database1Entities obj = new Database1Entities())
            {
              
                return obj.EMPs.ToList();
            }
        }
        [HttpGet]
        public EMP1 Get(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.Select(x => new EMP1 { EID = x.EID, NAME = x.NAME, LPHONEMAP = obj.EMPPHONEMAPs.Where(m => m.EID == x.EID).Select(p => new EMPPHONE {PID= p.PID??0,NUMBER= p.NUMBER, LPHONE = obj.PHONEs.ToList() }).ToList() }).SingleOrDefault(P => P.EID == EID);
            }
        }
        [HttpPost]
        public string Post(EMP1 emp1)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.Add(new EMP { EID=emp1.EID,NAME=emp1.NAME });
                obj.SaveChanges();
                obj.EMPPHONEMAPs.AddRange(emp1.LPHONEMAP.Select(x => new  EMPPHONEMAP{ EID=emp1.EID, PID=x.PID,NUMBER=x.NUMBER }));
                obj.SaveChanges();
                return "Data Saved.";
            }
        }
        [HttpPut]
        public string Put(EMP1 emp1)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp = obj.EMPs.SingleOrDefault(m => m.EID == emp1.EID);
                emp.NAME = emp1.NAME;
                obj.SaveChanges();
                obj.EMPPHONEMAPs.RemoveRange(obj.EMPPHONEMAPs.Where(p => p.EID == emp1.EID));
                obj.SaveChanges();
                obj.EMPPHONEMAPs.AddRange(emp1.LPHONEMAP.Select(x => new EMPPHONEMAP { EID = emp1.EID, PID = x.PID, NUMBER = x.NUMBER }));
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpDelete]
        public string Delete(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.Remove(obj.EMPs.SingleOrDefault(m => m.EID == EID));
                obj.SaveChanges();
                obj.EMPPHONEMAPs.RemoveRange(obj.EMPPHONEMAPs.Where(p => p.EID == EID));
                obj.SaveChanges();
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
    }
    public class EMP1
    {
        public int EID{get;set;}
        public string NAME{get;set;}
        public List<EMPPHONE> LPHONEMAP { get; set; }
    }
    public class EMPPHONE
    {
        public int PID { get; set; }
        public string NUMBER { get; set; }
        public List<PHONE> LPHONE { get; set; }
    }
    
    
}

Angular js Code;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/angular.js"></script>
</head>
<body>
    <div class="container" ng-app="app" ng-controller="ctrl">
        <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="EMP1.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="EMP1.NAME" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4"></label>
                <div class="col-lg-4">
                    <table style="margin-top:10px">
                        <tr><td>Phone</td><td><a style="color:green;margin-left:303px" ng-click="add()">+</a></td></tr>
                    </table>
                    <table id="tb">
                        
                        <tr ng-repeat="c in EMP1.LPHONEMAP">
                            <td><select class="form-control" ng-model="c.PID" ng-options="d.PID as d.PHONETYPE for d in c.LPHONE"></select></td>
                            <td><input style="margin-left:10px" type="text" class="form-control" ng-model="c.NUMBER" /></td>
                            <td><a style="color:red;margin-left:20px" ng-click="sub(c)">-</a></td>
                        </tr>
                        <tr><td colspan="3">&nbsp;</td></tr>
                        
                    </table>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-4">&nbsp;</label>
                <div class="col-lg-4">
                    <input type="button" ng-click="save()" class="btn btn-primary" value="Save" style="width:80px" />
                    <input type="button" ng-click="update()" class="btn btn-primary" value="Update" style="width:80px" />
                    <input type="button" ng-click="reset()" class="btn btn-primary" value="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>
                            <td>EID</td>
                            <td>NAME</td>
                            <td>ACTION</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="c in list1">
                            <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, $http) {
        
        function fill1() {
            $http.get('http://localhost:57694/api/Empservice/Gets').then(function (d) {
                $scope.list1 = d.data;
            });
        } fill1();
        var n = [{ PID: 1, PHONETYPE: 'Mobile' }, { PID: 2, PHONETYPE: 'Land Line' }];
        $scope.add = function ()
        {
            $scope.EMP1.LPHONEMAP.push({ PID: null, NUMBER: null, LPHONE: n });
            
        }
        $scope.sub = function (s)
        {
            if ($scope.EMP1.LPHONEMAP.length > 1)
                $scope.EMP1.LPHONEMAP.splice($scope.EMP1.LPHONEMAP.indexOf(s), 1);
        }
        
       
        function CLR()
        {
            $scope.EMP1 = new eMP1();
        } CLR();
        $scope.save = function ()
        {
           
            $http.post('http://localhost:57694/api/Empservice/Post', $scope.EMP1).then(function (d) {
                alert(d.data);
                fill1();
                CLR();
            });
        }
        $scope.update = function ()
        {
            $http.put('http://localhost:57694/api/Empservice/Put', $scope.EMP1).then(function (d) {
                alert(d.data);
                fill1();
                CLR();
            });
        }
        $scope.edit = function (d)
        {
            $http.get('http://localhost:57694/api/Empservice/Get?EID='+d).then(function (d) {
                $scope.EMP1 = d.data;
                
            });
        }
        $scope.del = function (d)
        {
            if (confirm('Do you want to delete it ?'))
            {
                $http.delete('http://localhost:57694/api/Empservice/Delete?EID=' + d).then(function (d) {
                    
                    alert(d.data);
                    fill1();
                });
            }
        }
    });
    function eMP1()
    {
        return {
            EID: null,
            NAME: null,
            LPHONEMAP: [{
                PID: null,
                NUMBER: null,
                LPHONE:[{ PID: 1, PHONETYPE: 'Mobile' }, { PID: 2, PHONETYPE: 'Land Line' }]
            }]
        };
    }
</script>


No comments:

Post a Comment