Monday 30 January 2017

Dynamy page in angularjs



<!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">
        <table style="margin-top:10px">
            <tr><td>Add New Row</td><td>&nbsp;</td><td ><a style="color:green;margin-left:153px" ng-click="add()">+</a></td></tr>
        </table>
        <table id="tb">
            <tr ng-repeat="c in list">
                <td>Name</td>
                <td><input style="margin-left:10px" type="text" class="form-control" ng-model="c.NAME" /></td>
                <td><a style="color:red;margin-left:20px" ng-click="sub(c)">-</a></td>
            </tr>
            <tr><td colspan="3">&nbsp;</td></tr>
            <tr><td>&nbsp;</td><td><input type="button" ng-click="save()" class="btn btn-primary" value="Save" style="width:80px" /></td><td>&nbsp;</td></tr>
        </table>
    </div>
</body>
</html>
<script type="text/javascript">
    angular.module("app", [])
    .controller("ctrl", function ($scope) {
        var m = [{NAME:null}];
        $scope.add = function ()
        {
            m.push({ NAME: null });
            fill();
        }
        $scope.sub = function (s)
        {
            if(m.length>1)
            m.splice(m.indexOf(s), 1);
        }
        function fill()
        {
            $scope.list = m;
        } fill();
        $scope.save = function ()
        {
            for (var i = 0; i < m.length; i++)
                alert(m[i].NAME);
        }
    });
</script>


Thursday 26 January 2017

DML opration tempolarly using angularjs

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta charset="utf-8" />
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="jquery-1.10.2.js"></script>
    <script src="angular.js"></script>
</head>
<body 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="EMP.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="EMP.NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">DEPARTMENT</label>
            <div class="col-lg-4">
                <select name="ddl" class="form-control"  ng-model="x" ng-options="c.DID as c.DNAME for c in listd">
                    <option value="">Select</option><Br />
                </select><input type="button" class="btn btn-primary" value="Add More" ng-click="addnew()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Update" ng-click="modify()" 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">
                    <thead class="btn-primary">
                        <tr>
                            <th>DID</th>
                            <th>DNAME</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="c in list">
                            <td>{{c.DID}}</td>
                            <td>{{c.DNAME}}</td>
                            <td><a ng-click="ed(c)">Edit</a>|<a ng-click="del(c)">Delete</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Update" ng-click="update()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Reset" ng-click="reset()" style="width:80px" />
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered">
                <thead class="btn-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="del1(c.EID)">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    angular.module("app", [])
    .controller("ctrl", function ($scope, $http) {
        $http.get("http://localhost:15497/api/Empservice/Getd").then(function (d) {
            $scope.listd = d.data;
        });
        var m = new Array();
        $scope.addnew = function ()
        {
 
            m.push({ DID: $scope.x,DNAME:$("[name='ddl'] :selected").text() });
            fill();

        }
        var v;
        $scope.ed = function (s)
        {
            v = s;
            $scope.x = s.DID;
        }
        $scope.modify = function ()
        {
            m.splice(m.indexOf(v), 1);
            m.push({ DID: $scope.x, DNAME: $("[name='ddl'] :selected").text() });
        }
        function fill()
        {
            $scope.list = m;
        }
        $scope.del = function (s)
        {
            if (m.length > 1)
            {
                m.splice(m.indexOf(s), 1);
            }
           
        }
        function CLR()
        {
            $scope.EMP = new emp();
            $scope.x = "";
            m.splice(0, m.length);
        } CLR();
        function fill1()
        {
            $http.get("http://localhost:15497/api/Empservice/Gets?i="+1).then(function (d) {
                $scope.liste = d.data;
               
            });
        } fill1();
        $scope.save = function ()
        {
            $scope.EMP.LDEPT = m;
            $http.post("http://localhost:15497/api/Empservice/Post",$scope.EMP).then(function (d) {
                alert(d.data);
                CLR();
                fill1();
            });
        }
        $scope.update = function () {
            $scope.EMP.LDEPT = m;
            $http.put("http://localhost:15497/api/Empservice/Put", $scope.EMP).then(function (d) {
                alert(d.data);
                CLR();
                fill1();
            });
        }
        $scope.edit = function (s)
        {
           
            $http.get("http://localhost:15497/api/Empservice/Get?EID=" + s + "&j=" + 2).then(function (d) {
                $scope.EMP = d.data;
                $scope.list = $scope.EMP.LDEPT;
                m = $scope.EMP.LDEPT;

            });
        }
        $scope.del1 = function (s)
        {
            if (confirm("Do you want to delete it ?"))
            {
                $http.delete("http://localhost:15497/api/Empservice/Delete?EID=" + s + "&i=" + 2 + "&j=" + 3).then(function (d) {
                    alert(d.data);
                    fill1();

                });
            }
           
        }
        $scope.reset=function()
        {
            CLR();
        }
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            LDEPT: {}
        }
    }
</script>

DML opration tempolarly using angularjs


DML opration tempolarly using angularjs

<!DOCTYPE html>
<html>
<head>
    <title></title>
<meta charset="utf-8" />
    <link href="bootstrap.css" rel="stylesheet" />
    <script src="jquery-1.10.2.js"></script>
    <script src="angular.js"></script>
</head>
<body 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="EMP.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="EMP.NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">DEPARTMENT</label>
            <div class="col-lg-4">
                <select name="ddl" class="form-control"  ng-model="x" ng-options="c.DID as c.DNAME for c in listd">
                    <option value="">Select</option><Br />
                </select><input type="button" class="btn btn-primary" value="Add More" ng-click="addnew()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Update" ng-click="modify()" 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">
                    <thead class="btn-primary">
                        <tr>
                            <th>DID</th>
                            <th>DNAME</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="c in list">
                            <td>{{c.DID}}</td>
                            <td>{{c.DNAME}}</td>
                            <td><a ng-click="ed(c)">Edit</a>|<a ng-click="del(c)">Delete</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Update" ng-click="update()" style="width:80px" />
                <input type="button" class="btn btn-primary" value="Reset" ng-click="reset()" style="width:80px" />
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered">
                <thead class="btn-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="del1(c.EID)">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    angular.module("app", [])
    .controller("ctrl", function ($scope, $http) {
        $http.get("http://localhost:15497/api/Empservice/Getd").then(function (d) {
            $scope.listd = d.data;
        });
        var m = new Array();
        $scope.addnew = function ()
        {
 
            m.push({ DID: $scope.x,DNAME:$("[name='ddl'] :selected").text() });
            fill();

        }
        var v;
        $scope.ed = function (s)
        {
            v = s;
            $scope.x = s.DID;
        }
        $scope.modify = function ()
        {
            m.splice(m.indexOf(v), 1);
            m.push({ DID: $scope.x, DNAME: $("[name='ddl'] :selected").text() });
        }
        function fill()
        {
            $scope.list = m;
        }
        $scope.del = function (s)
        {
            if (m.length > 1)
            {
                m.splice(m.indexOf(s), 1);
            }
           
        }
        function CLR()
        {
            $scope.EMP = new emp();
            $scope.x = "";
            m.splice(0, m.length);
        } CLR();
        function fill1()
        {
            $http.get("http://localhost:15497/api/Empservice/Gets?i="+1).then(function (d) {
                $scope.liste = d.data;
               
            });
        } fill1();
        $scope.save = function ()
        {
            $scope.EMP.LDEPT = m;
            $http.post("http://localhost:15497/api/Empservice/Post",$scope.EMP).then(function (d) {
                alert(d.data);
                CLR();
                fill1();
            });
        }
        $scope.update = function () {
            $scope.EMP.LDEPT = m;
            $http.put("http://localhost:15497/api/Empservice/Put", $scope.EMP).then(function (d) {
                alert(d.data);
                CLR();
                fill1();
            });
        }
        $scope.edit = function (s)
        {
           
            $http.get("http://localhost:15497/api/Empservice/Get?EID=" + s + "&j=" + 2).then(function (d) {
                $scope.EMP = d.data;
                $scope.list = $scope.EMP.LDEPT;
                m = $scope.EMP.LDEPT;

            });
        }
        $scope.del1 = function (s)
        {
            if (confirm("Do you want to delete it ?"))
            {
                $http.delete("http://localhost:15497/api/Empservice/Delete?EID=" + s + "&i=" + 2 + "&j=" + 3).then(function (d) {
                    alert(d.data);
                    fill1();

                });
            }
           
        }
        $scope.reset=function()
        {
            CLR();
        }
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            LDEPT: {}
        }
    }
</script>

Wednesday 18 January 2017

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>


Sunday 15 January 2017

Dynamic page in angularjs

Entity

Web api Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using WebApplication22.Models;


namespace WebApplication22.Controllers
{
    public class QuestionmasterController : ApiController
    {
       [HttpGet]
       public List<QMASTER> Gets()
       {
           using(Database1Entities obj=new Database1Entities())
           {
               return obj.QUESTIONs.Select(m => new QMASTER { QID = m.QID, QUESTION = m.QUESTION1, CONTROLTYPEID = m.CONTROLTYPEID.Value, QMAP = obj.QUESTIONMAPs.Where(n => n.QID == m.QID).ToList() }).ToList();
           }
       }
       [HttpGet]
       public QMASTER Get(int QID,int j)
       {
           using (Database1Entities obj = new Database1Entities())
           {
               return obj.QUESTIONs.Select(m => new QMASTER { QID = m.QID, QUESTION = m.QUESTION1, CONTROLTYPEID = m.CONTROLTYPEID.Value, QMAP = obj.QUESTIONMAPs.Where(n => n.QID == m.QID).ToList() }).FirstOrDefault(x => x.QID == QID);
           }
       }
       [HttpPost]
       public string Post(QMASTER qm)
       {
           using (Database1Entities obj = new Database1Entities())
           {
               obj.QUESTIONs.Add(new QUESTION { QUESTION1 = qm.QUESTION, CONTROLTYPEID = qm.CONTROLTYPEID });
               obj.SaveChanges();
               if(qm.CONTROLTYPEID==3)
               {
                   int QID = obj.QUESTIONs.OrderByDescending(p => p.QID).First().QID;
                   obj.QUESTIONMAPs.AddRange(qm.QMAP.Select(m => new QUESTIONMAP { QID = QID, VALUE = m.VALUE }));
                   obj.SaveChanges();
               }
               
               return "Data Saved.";
           }
       }
     [HttpPut]
       public string Put(QMASTER qm)
       {
           using (Database1Entities obj = new Database1Entities())
           {
               QUESTION qs = obj.QUESTIONs.SingleOrDefault(p => p.QID == qm.QID);
               qs.QUESTION1 = qm.QUESTION;
               qs.CONTROLTYPEID = qm.CONTROLTYPEID;
               obj.SaveChanges();
               obj.QUESTIONMAPs.RemoveRange(obj.QUESTIONMAPs.Where(m=>m.QID==qm.QID));
               obj.SaveChanges();
               if (qm.CONTROLTYPEID==3)
               {
                   obj.QUESTIONMAPs.AddRange(qm.QMAP);
                   obj.SaveChanges();
               }
               
               return "Data Updated.";
           }
       }
     [HttpGet]
     public string Delete(int QID)
     {
         using (Database1Entities obj = new Database1Entities())
         {
             QUESTION qs = obj.QUESTIONs.SingleOrDefault(p => p.QID == QID);
             obj.QUESTIONs.Remove(qs);
             obj.SaveChanges();
             obj.QUESTIONMAPs.RemoveRange(obj.QUESTIONMAPs.Where(m => m.QID == QID));
             obj.SaveChanges();
             return "Data Deleted.";
         }
     }
    
     
    }
    public class QMASTER
    {
        public int QID{get;set;}
        public string QUESTION{get;set;}
        public int CONTROLTYPEID{get;set;}
        public List<QUESTIONMAP> QMAP { get; set; }
        
        
    }
   
}

answer web api code :

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


namespace WebApplication22.Models
{
    public class AnswerController : ApiController
    {
        [HttpGet]
        public dynamic Gets()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return (from x in obj.QUESTIONs
                        join y in obj.ANSWERs
                        on x.QID equals y.QID
                        select new { x.QUESTION1, y.AVALUE }).ToList();
            }
        }
        [HttpPost]
        public string Post(List<ANSWER> am)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                foreach(ANSWER an in am)
                {
                    obj.ANSWERs.Add(an);
                    obj.SaveChanges();
                }
               
                return "Data Saved.";
            }
        }
    }
}


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="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/angular.js"></script>
</head>
<body  ng-app="app" ng-controller="ctrl" style="padding-top:10px">
    <div class="container">
        <form name="frmEmp" novalidate class="form-horizontal">
           <fieldset>
               <legend>QUESTION</legend>
               <div class="form-group">
                   <label class="control-label col-lg-4">QUESTION</label>
                   <div class="col-lg-4">
                       <input type="text" class="form-control" ng-model="QMASTER.QUESTION" />
                   </div>
               </div>
               <div class="form-group">
                   <label class="control-label col-lg-4">CONTROL TYPE</label>
                   <div class="col-lg-4">
                       <select class="form-control" ng-change="ddl()" ng-options="c.cid as c.name for c in listc" ng-model="QMASTER.CONTROLTYPEID">
                           <option value="">Select</option>
                       </select>
                   </div>
               </div>
               <div class="form-group" ng-show="checkv==1">
                   <div class="col-md-4">&nbsp;</div>
                   <div class="col-md-4">
                       <table>
                           <tr>
                               <td>Value</td>
                               <td>&nbsp;</td>
                               <td style="padding-left:140px">
                                   <a ng-click="addp()" id="btnPlus"><img class="img-responsive" src="Content/plusicon.png"></a>
                               </td>
                           </tr>
                       </table>
                   </div>
               </div>
               <div class="form-group" ng-show="checkv==1">
                   <div class="col-md-4">&nbsp;</div>
                   <div class="col-md-4">
                       <table id="ValueDiv">
                           <tr class="c">
                               <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" 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>
                               <th>QID</th>
                               <th>QUESTION</th>
                               <th>ACTION</th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr ng-repeat="c in liste">
                               <td>{{c.QID}}</td>
                               <td>{{c.QUESTION}}</td>
                               <td><a ng-click="edit(c.QID)">Edit</a>|<a ng-click="del(c.QID)">Delete</a></td>
                           </tr>
                       </tbody>
                   </table>
               </div>
               
           </fieldset>
           <fieldset>
               <legend>ANSWER</legend>
               <div class="row">
                   <table id="tb1" class="table table-bordered table-condensed table-hover table-responsive table-striped">
                       <thead class="bg-primary">
                           <tr>
                               <th>QUESTION</th>
                               <th>ANSWER</th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr ng-repeat="c in liste">
                               <td>{{c.QUESTION}} <input type="hidden" name="hqid" ng-model="QID1" value="{{c.QID}}" /><input type="hidden" ng-model="CONTROLTYPEID1" name="hctid" value="{{c.CONTROLTYPEID}}" /></td>

                               <td ng-show="c.CONTROLTYPEID==1">

                                   <input name="tb" type="text" class="form-control" ng-model="value" />
                               </td>
                               <td ng-show="c.CONTROLTYPEID==2">
                                   <textarea name="ta" class="form-control" ng-model="value"></textarea>
                               </td>
                               <td ng-show="c.CONTROLTYPEID==3">
                                   <select name="ddl" class="form-control" ng-options="d.ID as d.VALUE for d in c.QMAP" ng-model="value">
                                       <option value="">Select</option>
                                   </select>
                               </td>
                           </tr>
                       </tbody>


                   </table>
               </div>
               <div class="form-group">
                   <label class="control-label col-lg-4"></label>
                   <div class="col-lg-4">
                       <input type="button" ng-click="save1()" class="btn btn-primary" value="Save" 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>QUESTION</th>
                               <th>ANSWER</th>
                           </tr>
                       </thead>
                       <tbody>
                           <tr ng-repeat="c in lista">
                               <td>{{c.QUESTION1}}</td>
                               <td>{{c.AVALUE}}</td>
                               
                           </tr>
                       </tbody>
                   </table>
               </div>
           </fieldset>
           
</form>
    </div>
</body>
</html>
<script type="text/javascript">
    angular.module("app", [])
    .controller("ctrl", function ($scope, EmpService) {
        $scope.value = null;
        $scope.QID1 = null;
        $scope.CONTROLTYPEID = null;
        function CLR()
        {
            $scope.QMASTER = new qMASTER();
           
        } CLR();
        function fill()
        {
            EmpService.Gets().then(function (d) {
                $scope.liste = d.data;
            });
        } fill();
        $scope.listc = [
            { cid: 1, name: "Textbox" },
        {cid:2,name:"Multilinetextbox"},
            { cid: 3, name: "Dropdown" }
        ];
        $scope.checkv = 0;
        $scope.ddl = function ()
        {

            if ($scope.QMASTER.CONTROLTYPEID == 3)
                $scope.checkv = 1;
            else
                $scope.checkv = 0;

        }
        var row;
        row = $('.c').clone();
        $scope.addp = function ()
        {
            var crow = row.clone();
            $('#ValueDiv').append(crow);
        }
        $('body').on('click', "a[name='del']", function () {
            var row = $(this).parents('.c');
            if ($('.c').length > 1)
                row.remove();
        });
        $scope.edit = function (s) {
            EmpService.Get(s).then(function (d) {
                if (d.data.CONTROLTYPEID == 3)
                {
                   
                    $scope.checkv = 1;
                    $('.c').remove();
                    for (var i = 0; i < d.data.QMAP.length; i++)
                    {
                        $('#ValueDiv').append("<tr class='c'><td><input type='text' class='form-control txtValue' value='" + d.data.QMAP[i].VALUE + "' /></td><td>&nbsp;</td><td><a name='del'><img class='img-responsive' src='Content/minus-icon.png'></a></td></tr>");
                    }
                }
                else
                    $scope.checkv = 0;
                $scope.QMASTER = d.data;
            });

        }
        $scope.save = function ()
        {
            var m = [];
            if($scope.QMASTER.CONTROLTYPEID==3)
            {
 $('.c').find(".txtValue").each(function (i, j) {
     m.push({ VALUE: $(j).val() });
 });
 $scope.QMASTER.QMAP = m;
            }
            EmpService.Save($scope.QMASTER).then(function (d) {
                alert(d.data);
                CLR();
                fill();
                $scope.checkv = 0;
            });
           
        }
        $scope.update = function () {
            var m = [];
            if ($scope.QMASTER.CONTROLTYPEID == 3) {
                $('.c').find(".txtValue").each(function (i, j) {
                    m.push({ VALUE: $(j).val() });
                });
                $scope.QMASTER.QMAP = m;
            }
            EmpService.Update($scope.QMASTER).then(function (d) {
                alert(d.data);
                CLR();
                fill();
                $scope.checkv = 0;
            });

        }
        $scope.reset = function ()
        {
            CLR();
        }
        $scope.del = function (s)
        {
            if (confirm('Do you want to delete it ?'))
            {
                EmpService.Delete(s).then(function (d) {
                    alert(d.data);
                    fill();
                });
            }
        }
        $scope.save1 = function ()
        {
           
            var m = [];
            $('#tb1').find("tr").each(function (i, j) {
                var ANSWER = {
                    ID: null,
                    QID: null,
                    AVALUE: null
                };
                if (i > 0)
                {
                    ANSWER.QID = $(j).find("[name='hqid']").val();
                    if ($(j).find("[name='hctid']").val() == 1)
                        ANSWER.AVALUE = $(j).find("[name='tb']").val();
                    else if ($(j).find("[name='hctid']").val() == 2)
                        ANSWER.AVALUE = $(j).find("[name='ta']").val();
                    else if ($(j).find("[name='hctid']").val() == 3)
                        ANSWER.AVALUE = $(j).find("[name='ddl'] :selected").text();
                    m.push(ANSWER);
                }
            });
            EmpService.Save1(m).then(function (d) {
                alert(d.data);
                fill1();
            });
           
        }
        function fill1()
        {
            EmpService.Get1().then(function (d) {
                $scope.lista = d.data;
            });
        } fill1();
    })
    .factory("EmpService", function ($http) {
        var fac = {};
        fac.Save = function (emp)
        {
            return $http.post("http://localhost:50628/api/Questionmaster/Post", emp);
        }
        fac.Update = function (emp)
        {
            return $http.put("http://localhost:50628/api/Questionmaster/Put", emp);
        }
        fac.Delete = function (EID) {
            return $http.get("http://localhost:50628/api/Questionmaster/Delete?QID="+EID);
        }
        fac.Get = function (EID) {
         
            return $http.get("http://localhost:50628/api/Questionmaster/Get?QID=" + EID+"&j="+2);
        }
        fac.Gets = function (EID) {
            return $http.get("http://localhost:50628/api/Questionmaster/Gets");
        }
        fac.Save1 = function (amp) {
           
            return $http.post("http://localhost:50628/api/Answer/Post", amp);
        }
        fac.Get1 = function () {
            return $http.get("http://localhost:50628/api/Answer/Gets");
        }
        return fac;
    });
    function qMASTER()
    {
        return {
            QID: null,
            QUESTION: null,
            CONTROLTYPEID: null,
            QMAP: {}
        };
    }

</script>