example of list box and nested gride in angularjs

MVC Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication19.Models;

namespace WebApplication19.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        [AcceptVerbs(HttpVerbs.Get)]
        [OutputCache(Duration = 0)]
        public JsonResult Gets()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                List<EMP2> lst = (from x in obj.EMPs
                                 select new EMP2() {
                                  EID=x.EID,
                                  NAME=x.NAME,
                                  LDEPT = obj.DEPTs.Where(n => obj.EMPMAPPINGs.Where(p => p.EID == x.EID).Select(t=>t.DID).Contains(n.DID)).ToList()
                                 }).ToList();
                return Json(lst, JsonRequestBehavior.AllowGet);
            }
        }
        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult Get(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP1 emp = (from x in obj.EMPs
                           where x.EID==EID
                            select new EMP1
                            {
                                EID = x.EID,
                                NAME = x.NAME,
                                MAP = obj.EMPMAPPINGs.Where(m => m.EID == x.EID).Select(p => p.DID.Value).ToList()
                            }).SingleOrDefault(m => m.EID == EID);
                return Json(emp, JsonRequestBehavior.AllowGet);
            }
        }
        public string Save(EMP1 emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = new EMP();
                emp1.EID = emp.EID;
                emp1.NAME = emp.NAME;
                obj.Entry(emp1).State=System.Data.Entity.EntityState.Added;
                obj.SaveChanges();
                List<EMPMAPPING> lst = new List<EMPMAPPING>();
                foreach(int did in emp.MAP)
                {
                    EMPMAPPING eMPMAPPING = new EMPMAPPING();
                    eMPMAPPING.DID = did;
                    eMPMAPPING.EID = emp.EID;
                    lst.Add(eMPMAPPING);
                }
                obj.EMPMAPPINGs.AddRange(lst);
                obj.SaveChanges();
                return "Data Saved.";

            }
        }
        public string Update(EMP1 emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                emp1.NAME = emp.NAME;
                obj.Entry(emp1).State = System.Data.Entity.EntityState.Modified;
                obj.SaveChanges();
                obj.EMPMAPPINGs.RemoveRange(obj.EMPMAPPINGs.Where(m => m.EID == emp.EID));
                obj.SaveChanges();
                List<EMPMAPPING> lst = new List<EMPMAPPING>();
                foreach (int did in emp.MAP)
                {
                    EMPMAPPING eMPMAPPING = new EMPMAPPING();
                    eMPMAPPING.DID = did;
                    eMPMAPPING.EID = emp.EID;
                    lst.Add(eMPMAPPING);
                }
                obj.EMPMAPPINGs.AddRange(lst);
                obj.SaveChanges();
                return "Data Updated.";

            }
        }
        public string Delete(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
                obj.Entry(emp1).State = System.Data.Entity.EntityState.Deleted;
                obj.SaveChanges();
                obj.EMPMAPPINGs.RemoveRange(obj.EMPMAPPINGs.Where(m => m.EID == EID));
                obj.SaveChanges();
                return "Data Deleted.";

            }
        }
        public JsonResult Getd()
        {
            using (Database1Entities obj = new Database1Entities())
            {
               return Json( obj.DEPTs.ToList(),JsonRequestBehavior.AllowGet);
            }
        }
    }
    public class EMP1
    {
        public int EID{get;set;}
        public string NAME{get;set;}
        public List<int> MAP{get;set;}
    }
    public class EMP2
    {
        public int EID { get; set; }
        public string NAME { get; set; }
        public List<DEPT> LDEPT { get; set; }
    }
}

View  Code :


@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<h2>Jay Jagannath...</h2>
<br /><br />
<div class="container" ng-app="app" ng-controller="ctrl">
    <form class="form-horizontal" name="frmEmp" novalidate>
        <div class="form-group" ng-class="{'has-error':frmEmp.txtEid.$invalid}">
            <label class="control-label col-lg-4">EID</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EMP1.EID" name="txtEid" ng-required="frmEmp.txtEid.$invalid" />
            </div>
            <span class="help-block has-error" ng-show="frmEmp.txtEid.$invalid">
                EID should not be blank.
            </span>
        </div>
        <div class="form-group" ng-class="{'has-error':frmEmp.txtName.$invalid}">
            <label class="control-label col-lg-4">NAME</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" ng-model="EMP1.NAME" name="txtName" ng-required="frmEmp.txtName.$invalid" />
            </div>
            <span class="help-block has-error" ng-show="frmEmp.txtName.$invalid">
                Name should not be blank.
            </span>
        </div>
        <div class="form-group" ng-class="{'has-error':frmEmp.txtMap.$invalid}">
            <label class="control-label col-lg-4">DEPARTMENT NAME</label>
            <div class="col-lg-4">
                <select multiple class="form-control" ng-options="c.DID as c.DNAME for c in list" ng-model="EMP1.MAP" name="txtMap" ng-required="frmEmp.txtMap.$invalid" ></select>
            </div>
            <span class="help-block has-error" ng-show="frmEmp.txtMap.$invalid">
                Department name should not be blank.
            </span>
        </div>
        <div class="form-group" ng-class="{'has-error':frmEmp.txtMap.$invalid}">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
              <input type="button" value="Save" ng-click="save()" class="btn btn-primary" style="width:80px" />
                <input type="button" value="Update" ng-click="update()" class="btn btn-primary" style="width:80px" />
                <input type="button" value="Reset" ng-click="reset()" class="btn btn-primary" 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>DEPARTMENT NAME</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="c in liste">
                        <td>{{c.EID}}</td>
                        <td>{{c.NAME}}</td>
                        <td>
                            <table class="table table-bordered">
                                <thead class="bg-primary">
                                    <tr>
                                        <th>
                                            DID
                                        </th>
                                        <th>
                                            DNAME
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="d in c.LDEPT">
                                        <td>{{d.DID}}</td>
                                        <td>{{d.DNAME}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </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>
<script type="text/javascript">
    (function () {
        "use strict";
        angular.module("app", [])
        .controller("ctrl", function ($scope, empService) {
            function CLR()
            {
                $scope.EMP1 = new emp();
            } CLR();
            empService.Getd().then(function (response) {
                $scope.list = response.data;
            });
            $scope.save = function ()
            {
                empService.Save($scope.EMP1).then(function (response) {
                    alert(response.data);
                    CLR();
                    fill();
                });
            }
            $scope.update = function () {
                empService.Update($scope.EMP1).then(function (response) {
                    alert(response.data);
                    CLR();
                    fill();
                });
            }
            function fill()
            {
                empService.Gets().then(function (response) {
                    $scope.liste = response.data;
                });
            } fill();
            $scope.edit = function (s) {
                empService.Get(s).then(function (response) {
                    $scope.EMP1 = response.data;
                });

            }
            $scope.reset = function ()
            {
                CLR();
            }
            $scope.del = function (s)
            {
                if (confirm('Do you want to delete it ?'))
                {
                    empService.Delete(s).then(function (response) {
                        alert(response.data);
                        fill();
                    });
                }
            }
        })
        .service("empService", function ($http) {
            this.Getd = function ()
            {
                return $http.get("/Home/Getd");
            }
            this.Save = function (EMP)
            {
                return $http.post("/Home/Save", EMP);
            }
            this.Update = function (EMP) {
                return $http.post("/Home/Update", EMP);
            }
            this.Gets = function () {
                return $http.get("/Home/Gets");
            }
            this.Get = function (EID) {
                return $http.get("/Home/Get?EID="+EID);
            }
            this.Delete = function (EID) {
                return $http.get("/Home/Delete?EID=" + EID);
            }
        });
    }());
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            MAP:[]
        }
    }
</script>