Wednesday 27 July 2016

Multiple delete & CURD oration in NG GRIDE, MVC ,WEB API, & ANGULARJS


web api code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication31.Models;

namespace WebApplication31.Controllers
{
   
    public class ValuesController : ApiController
    {
        public List<string> Getc()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.COUNTRies.Select(m => m.CNAME).ToList();
            }
        }
        public List<string> Gets(string CNAME)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                int CID = obj.COUNTRies.SingleOrDefault(m => m.CNAME == CNAME).CID;
                return obj.STATEs.Where(m => m.CID == CID).Select(n => n.SNAME).ToList();
            }
        }
        public List<EMP> Gete(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP GetById(int EID,int j)
        {
            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;
                emp1.ADDRESS = emp.ADDRESS;
                emp1.PASSWORD = emp.PASSWORD;
                emp1.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.CNAME = emp.CNAME;
                emp1.SNAME = emp.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Delete(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
        [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.";
            }
        }
    }
}

View code :

@{
    ViewBag.Title = "Index";
}

<h2>Jay Jagannath...</h2>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ng-grid.js"></script>
<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">ADDRESS</label>
            <div class="col-lg-4">
                <textarea class="form-control" ng-model="EMP.ADDRESS" ></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">PASSWORD</label>
            <div class="col-lg-4">
               <input type="password" class="form-control" ng-model="EMP.PASSWORD" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">GENDER</label>
            <div class="col-lg-4">
                <input type="radio" ng-model="EMP.GENDER" value="Male" />Male
                <input type="radio" ng-model="EMP.GENDER" value="Female" />Female
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">ARE YOU MARRIED ?</label>
            <div class="col-lg-4">
                <input type="checkbox" ng-model="EMP.ISMARRIED"  />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">COUNTRY</label>
            <div class="col-lg-4">
               <select class="form-control" ng-model="EMP.CNAME" ng-options="c for c in listc" ng-change="fillddl()"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">STATE</label>
            <div class="col-lg-4">
                <select class="form-control" ng-model="EMP.SNAME" ng-options="c for c in lists" ></select>
            </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="Delete All" ng-click="delall()" style="width:80px" />
                <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="gridStyle" ng-grid="gridOptions">

        </div>
    </form>
</div>
<script type="text/javascript">
    angular.module("app", ['ngGrid']).controller("ctr", function ($scope, $http) {
        var m,k='';
        var lst = [];
        $scope.n = [];
        function clr() {
            $scope.EMP = new emp();
            $('#tb').focus();
        } clr();
        function fill() {
            $scope.filterOptions = {
                filterText: "",
                useExternalFilter: false
            };
            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: ['5', '10', '20'],
                pageSize: '5',
                currentPage: 1
            };
            $scope.setPagingData = function (data, page, pageSize) {
                var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
                $scope.DataSource = pagedData;
                $scope.totalServerItems = data.length;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            };
            $scope.getPagedDataAsync = function (pageSize, page, searchText) {
                setTimeout(function () {
                    var data;
                    if (searchText) {
                        var ft = searchText.toLowerCase();
                        $http.get('http://localhost:50311/api/Values/Gete?i='+1).success(function (largeLoad) {
                            data = largeLoad.filter(function (item) {
                                return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                            });
                            $scope.setPagingData(data, page, pageSize);
                        });
                    } else {
                        $http.get('http://localhost:50311/api/Values/Gete?i='+2).success(function (largeLoad) {
                            $scope.setPagingData(largeLoad, page, pageSize);
                        });
                    }
                }, 100);
            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {
                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
                }
            }, true);
            $scope.$watch('filterOptions', function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
                }
            }, true);


            $scope.gridOptions = {
                data: 'DataSource',
                multiSelect: true,
                showSelectionCheckbox: true,
                enableCellEdit: false,
                enableRowSelection: true,
                enableColumnResize: false,
                enableCellSelection: true,
                enablePaging: true,
                showFooter: true,
                selectedItems: $scope.n,
                totalServerItems: 'totalServerItems',
                pagingOptions: $scope.pagingOptions,
                filterOptions: $scope.filterOptions,
                showFilter: true,
                columnDefs:
                 [
          { field: 'EID', displayName: 'Eid', width: '250px', resizable: true },
          { field: 'NAME', displayName: 'Name', width: '250px' },

       {
           displayName: 'Actions', cellTemplate:
            '<div class="grid-action-cell">' +
            '<a ng-click="Edit(row.entity);" >Edit</a>' + ' | ' +
            '<a ng-click="Del(row.entity);" >Delete</a>' +
            '</div>'
       }
                 ],
            };


        } fill();
        m = $http({
            url: 'http://localhost:50311/api/Values',
            method:'Get'
        });
        m.then(function (d) {
            $scope.listc = d.data;
        });
        $scope.fillddl = function ()
        {
            fd($scope.EMP.CNAME);
        }
        function fd(s)
        {
            m = $http({
                url: 'http://localhost:50311/api/Values/Gets?CNAME='+s,
                method: 'Get'
            });
            m.then(function (d) {
                $scope.lists = d.data;
            });

        }
        $scope.save = function ()
        {
            m = $http({
                url: 'http://localhost:50311/api/Values/Post',
                method: 'Post',
                data:$scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                clr();
                fill();
            });
        }
        $scope.update = function () {
            m = $http({
                url: 'http://localhost:50311/api/Values/Put',
                method: 'Put',
                data: $scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                clr();
                fill();
            });
        }
        $scope.Edit = function (s)
        {
            m = $http({
                url: 'http://localhost:50311/api/Values/GetById?EID='+s.EID+'&j='+2,
                method: 'Get',
               
            });
            m.then(function (d) {
                fd(d.data.CNAME);
                $scope.EMP=d.data;
            });
        }
        $scope.reset = function ()
        {
            clr();
        }
        $scope.delall = function ()
        {
            if (confirm('Do you want to delete it ?'))
            {
                angular.forEach($scope.n, function (i, j) {
                    k = k + 'lst=' + i.EID + '&';
                });
                k = k.substring(0, k.lastIndexOf('&'));
                m = $http({
                    url: 'http://localhost:50311/api/Values/Mdelete?' + k,
                    method: 'Delete'
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });
            }
        }
        $scope.Del = function (s)
        {
            if (confirm('Do you want to delete it ?')) {
                m = $http({
                    url: 'http://localhost:50311/api/Values/Delete',
                    method: 'Patch',
                    data: s
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });
            }
        }
        
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            ADDRESS: null,
            PASSWORD: null,
            GENDER: null,
            ISMARRIED:true,
            CNAME: null,
            SNAME:null
        }
    }
</script>
<style type="text/css">
    .gridStyle {
        border: 1px solid rgb(212,212,212);
        width: 900px;
        height: 300px;
    }
</style>

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)